Sticky React Table

Many large-scale applications require the use of tables somewhere, if not everywhere. Many a times the requirements for these tables are quite complex and difficult to manage. Sticky React Table aims to solve all of these problems for React developers, with a host of features including customizable cells, rows, and headers, column switching, column filtering, sorting, virtualization, column resizing, etc. All of that, provided in a declarative manner, and built ground-up, especially for React!

The package is still under development. We are working actively to get this package to a stable release as soon as possible. Please do not use this package in any production application.

Table of Contents

• Getting Started
• Basic Usage
• Important Properties
  • Table
  • Column
  • Cell Props
  • Row Props
• Gotchas
• Contributing
• Issues
• Roadmap
• License

Getting Started

Installing Sticky React Table is as simple as using your favourite package manager (ex. yarn or npm).

For NPM:

npm install sticky-react-table

For Yarn:

yarn add sticky-react-table

Basic Usage

The sticky-react-table package exposes two major components: Table and Column.

Consider a sample data set:

[
  {
    "name": "John Doe",
    "age": 24,
    "location": "Chicago",
    "occupation": "Research Analyst"
  },
  {
    "name": "Jane Delaney",
    "age": 22,
    "location": "London",
    "occupation": "Software Developer"
  },
  {
    "name": "Nishant Singh",
    "age": 28,
    "location": "Mumbai",
    "occupation": "Business Developer"
  }
]

The simplest implementation of the above data as an Sticky React Table would be like so:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Table, Column } from 'sticky-react-table';

import data from './data.json';

class MyTable extends Component {
  render() {
    return (
      <Table data={data}>
        <Column title="Name" width={200} dataKey="name" />
        <Column title="Age" width={50} dataKey="age" />
        <Column title="Occupation" width={200} dataKey="occupation" />
        <Column title="Location" width={150} dataKey="location" />
        <Column title="Top Skill" width={150} dataKey="topSkill" />
      </Table>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<MyTable />, rootElement);

From here on, you can customize the cell, row or header renderers, add custom classes, style it however you need.

If you use SASS as a pre-processor, two default themes are provided: light and dark. To use the themes, simply import the relevant theme.

• Light Theme: sticky-react-table/lib/themes/light.scss
• Dark Theme: sticky-react-table/lib/themes/dark.scss

Important Properties

Sticky React Table supports a host of properties which allow you to completely customize the look and feel of the table. You can find the properties supported by the two major components of the package.

Table

Properties:

Callbacks:

Column

Properties:

Callbacks:

Cell Props

The cell props allow you to access the data for the entire row, and some additional information about the cell. This particularly helps in customizing the cell, based on the information or the data for that row.

Every custom render function you use across the table, ex. headerRenderer and cellRenderer, get these props as the parameters of the renderer.

propTypes = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  rowData: PropTypes.object,
  cellData: PropTypes.any,
  isChecked: PropTypes.bool
  isCheckbox: PropTypes.bool,
  style: PropTypes.object,
  title: PropTypes.string, // Only available in headerRenderer
  isAllSelected: PropTypes.bool // Only available in headerRenderer
}

Filter Props

The filter props allows you to access the data for the table and the dataKey of a column. This helps in creating a custom filters in any column, based on the data of the table.

propTypes = {
  data: PropTypes.array,
  dataKey: PropTypes.string
};

Row Props

The row props allow you to access the data for the row, and some additional methods to help you render the defaults. Only the rowRenderer function gets access to row props.

propTypes = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
  rowIndex: PropTypes.number,
  rowData: PropTypes.object,
  columns: PropTypes.array,
  isChecked: PropTypes.bool,
  renderColumns: PropTypes.func,
  defaultRowRenderer: PropTypes.func
}

Gotchas

• While using headerRenderer, always render an inline element if you have either sorting or column filters in the cell. Otherwise the alignment will break.

Contributing

Since we are still developing and this is a fairly large project, we would ❤️ contributions! We are looking for people who echo our sentiments and share the same idea about Sticky React Table.

Check out the CONTRIBUTING.md file for details.

Issues

For any issues or queries you might have about the table, please feel free to create one in the issues section.

Roadmap

We started developing Sticky React Table due to a lot of issues we faced while implementing tables in our application, with React. Leading up to 1.0.0, we plan on supporting the following features:

• ✅ Fixed Columns
• ✅ Fixed Header
• ✅ Column Resizing
• ✅ Column Switching
• ✅ Column Reordering
• ✅ Column Sorting
• ✅ Column Filtering
• ✅ Cell Renderer
• ✅ Row Renderer
• ✅ Header Renderer
• ✅ Row Selection
• ✅ Infinite Scrolling
• ✅ Column resizing based on length of value (a la Excel)
• ❌ Keyboard Navigation (as per Gmail)
• ❌ More events:
  • Key Up
  • Key Down
  • Focus
  • Blur
  • Scroll

In the future, we plan on implementing the following:

• Virtualization
• Better support for custom classes

Features at no point will we build:

• Row resizing or native subrow rendering (both of these can be achieved using a custom row renderer)

License

This project is under the MIT License. You can checkout the LICENSE file for info.

Copyright © 2018.