Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Improve withAdaptive with hideAdaptive, hideFullSize opts May 16, 2019
src
.babelrc
.gitignore export from a single file. move styles to styles folder. Mar 14, 2019
.npmignore
LICENSE first commit Mar 6, 2019
README.md
package.json 0.2.2 May 21, 2019
rollup.config.js move adaptive to js Apr 21, 2019
yarn.lock hotfix total scroll hook May 6, 2019

README.md

react-table-factory

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

Demo

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} {}:{removeAdaptiveColname, hideAdaptive, hideFullSize} 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.
withEmptyRow (falst) {isEmpty = (rowProps)=>false, Component}:{} Provides capabilities to implement empty td that spans the whole row

TODO

  • Add ColGroup Component.
  • Add tbody renderer option to table hoc.
  • Create decorator to add virtualization to withFixedHeader.
  • Remove withHeaderControl for a more flexible decorator.
  • Create user guide to create new decorators and use existing.
  • Use react router for more usage examples.
You can’t perform that action at this time.