react-basic-table

React basic table is a basic table library which handles basic table functions like paging, sorting, and filtering for you.

Usage

To install react basic table using npm run:

npm install --save react-basic-table

Then use react basic table like below:

import ReactBasicTable from 'react-basic-table';
...
render() {
    var columns = ['Name', 'State', 'Age', 'Note'];
    var rows = [
        [
        <span>Joe</span>,
        <span>PA</span>,
        <span>22</span>,
        <input type="text" />
        ],
        [
        <span>Jim</span>,
        <span>TX</span>,
        <span>55</span>,
        <input type="text" />
        ]
    ];
    return <ReactBasicTable rows={rows} columns={columns} />
};

Props

Prop	Description	Default	Example
rows	An array of rows. Every in this array is an array of components. This way you can render inputs and other components into the table.	[]	[[<span>Joe</span> ],[<span>John</span>]]
columns	An array of strings that are the names of the column.	[]	['Name']
pageSize	The number of rows on a page.	10	15
hideColumns	An array of column indexes that you want to hide. You can still filter on this column.	[]	[1]
filter	An array of objects ({id, match}) that define filter criteria and column index. To use this you need to define a data-ReactBasicTable-value on the components in the row prop. This allows filtering on all components.	[]	[{id: 0, match: 'John'}]
filterMode	An 'Or' or 'And' is accepting here. It is used in the filtering logic. In the case of 'Or' only one of the filter criteria needs to be true and in the case of 'And' they all need to be true. You can also pass 'Fuction' here to use advanced filtering logic declared in a function. See 'filterFunction' prop	'Or'	'And'
filterFunction	A function used when 'filterMode' is 'Function'. This function takes an array of values and returns a bool if field passes the filter. (...values) => { return values[0] === 'OneA'; }	Empty function	(...values) => { return values[0] === 'OneA'; }
sort	An array of column indexes that you want to be sortable. To use this you need to define a data-ReactBasicTable-value on the components in the row prop. This allows filtering on all components.	[]	[1]

Examples

Please see the example directory for examples of all of available functionality. We also have a code pen here.