react-flex-data-table

A React based table and inline row editable table using flexbox. This table uses declarative components to define its columns, rows, and header. Support for inline editing, insert, and deletion via defineable row edit feature.

Usage

Installation

npm i react-flex-data-table

Quick Start

There are two main components for rendering a table. DataTable is the basic render a table component that produces rows of defined columns with optional headers. EditTable extends DataTable to provide Create, Update, and Delete functionality. The Editing is provided as an inline row. It also provides a validation function to hook into the onSave call back.

DataTable

import { DataTable, BoundColumn, SubTable} from 'react-flexbox-table';

interface MyData {
		"firstName": string,
		"lastName": string,
		"amount": number,
		"birthday": Date | string,
		"colors": string,
}

const data: MyData = [
    {
		"firstName": "Aretha",
		"lastName": "Larsen",
		"amount": 416,
		"birthday": "2019-02-22T03:00:27-08:00",
		"colors": "red",
		"comment": "semper rutrum. Fusce dolor quam, elementum"
	}
]

const MyTable
    return (
        <DataTable items={data} >
            <BoundColumn<MyData> binding={item => item.firstName} headerText="First Name" className="col-3"/>
            <BoundColumn<MyData> binding={item => item.lastName} headerText="Last Name" className="col-3"/>
            <BoundColumn<MyData> binding={item => item.comment} headerText="Comment" className="col-6"/>
            <SubTable<MyData> hideHeader cellClassName="col-12" isVisible={item => item && item.lastName === 'Andrews'}
                        onSubTableRender={item => <ColorList color={item.colors}/>} />
        </DataTable>
    );
}

Included Columns

• BoundColumn
• LinkColumn
• ActionColumn
• CustomColumn
• SubTable

Custom columns

You can develope your own column types based by using the CustomColumn component using its onRender render property.

export const MyColumn = <T extends {}>({ item, children, cellClassName, hideHeader, ...attrs }: MyColumnProps<T>) => {
    const render = (item: T) => 
        <div>
            {item}
        </div>

    return <CustomColumn {...attrs} onRender={render} />
};