react-table-factory

A set of table factory decorators to easily implement table components inside user projects.

View Demo Download Source

table HoC

A HoC to implement table components with a set of overridable options.

option default description
rowRenderer DefaultRowRenderer table row component
cellRenderer DefaultCellRenderer table tbody cell component
dataRowRenderer DefaultDataRowRenderer table tbody row implementation
dataCellRenderer DefaultDataCellRenderer wrapper around tbody cell content
headerCellRenderer DefaultHeaderCellRenderer table thead cell component
headerCellContentRenderer DefaultHeaderCellRenderer wrapper around thead cell content
headerRenderer DefaultHeaderRenderer table thead component
columns [] array of column configurations.

columns config

name type description
cell (optional) Component {data, index, rowIndex, table props that are not used for HoC implementation} Component to render a table cell
header (optional) Component {table props that are not used for HoC implementation} Component to render a header cell
name (optional) string Column key

Simple example:

import { table } from 'react-table-factory';

...
const Table = table();

const columns = [
    {
        name: "attr1"
    },
    {
        header: (props) => (
            'Attr custom component'
        ),
        cell: ({data, ...props}) => (
            <span>Custom output {data['attr2']}</span>
        )
    },
];
...

const MyComponent = ({data, ...props}) => (
    <Table
        data={data}
        columns={columns}
        {...props} // props that will be propagated to cells.
    />
)

Decorators

A set of decorators around table factory.

Some components can use css. Corresponding files should have the same base name. (i.e withFixedHeader.css).

name (css) (remarks) options(=defaults) Table props:column config description
withFixedHeader (true) Creates 2 Tables to implement a fixed header and a scrollable table content. Since it creates 2 tables, any decorators with context wrappers around table should NOT be wrapped by this component.
withInlineDetailsContext (false) {selectionReducer, tabIndex, clearOnDataChange, isSelectable, keyFactory} {detailsRenderer, clearOnDataChange}:{} Wraps Table with selectionContext. Implemented selectionReducers are singeSelectionReducer and multiSelectionReducer.
withLazyLoading (false) {Loading = ()=>'Loading', threshold=50} {fetch, fetching}:{} Decorator around withFixedHeader table decorator. When fetching prop is set to true, show Loading component after table contents. When the container is scrolled to bottom (taking threshold into account) fetch is called.
withSortingContext (true) {defaultDirection, sortFactory, inMemory = false, sortableContextHoc} {onSort, sortDirection='asc', sortParameter}:{sortable,name} Wraps Table with SortableContext. Provides a Sorter Component to implement custom sorting elements. If a name option of column config is an array, the one from Table props will be used, otherwise the first elem will be used.
withInMemorySortingContext (true) {defaultDirection, sortFactory} { onSort, defaultSortParameter, defaultSortDirection= 'asc'}:{sortable,name} An overload wrapper for withSortingContext to provide in-memory sorting.
withAdaptive (true) (will change) {Component} Injects a Component inside each cell. Adaptive layout should be handled using CSS rules.
withHeaderControl (false) (will change) {}:{control} Adds 1 to colspan of each cell previous to column with controll. This component is used when you want to create an element in header, but doesn't effect the tbody cell layout.
withHeaderCellOverflow (true) {}:{removeOverflowWrapper} Adds a set of wrapper around header cell contents. Overflow should be handled using css.

TODO

  • [ ] Add ColGroup Component.
  • [ ] Add tbody renderer option to table hoc.
  • [ ] Create decorator to add virtualization to withFixedHeader.
  • [ ] Rename withAdapticeColname.
  • [ ] Remove withHeaderControl for a more flexible decorator.
  • [ ] Create user guide to create new decorators and use existing.
  • [ ] Use react router for more usage examples.

GitHub