React-all-in-one-table NPM

react-all-in-one-table

A table component that comes virtualized, sortable and searchable, out of the box.

Requirements

"react": "^17.0.2",
"react-dom": "^17.0.2",
"lodash": "^4.17.21",
"react-virtualized": "^9.22.3"

Install

npm install react-all-in-one-table

yarn add react-all-in-one-table

Usage

import Table from 'react-all-in-one-table';
function MyDataTable() {

    const data = [
        { kills: 1, deaths: 2, points: 1, name: "John Doe", id: 0 },
        { kills: 2, deaths: 1, points: 2, name: "Jane Doe", id: 1 }
    ]

    const columns = [
        { dataKey: 'name', label: 'Player', width: 75 },
        { dataKey: 'kills', label: 'Kills', width: 75 },
        { dataKey: 'deaths', label: 'Deaths', width: 75 },
        { dataKey: 'points', label: 'Points', width: 75 },
    ]

    const tableHeight = '500px'

    return (
        <div style={{ height: tableHeight }}>
            <Table
                data={data}
                columns={columns}
                defaultOrder="desc"
                defaultOrderBy="points"
                ignoreSearchColumns={["id"]}
                onRowClick={({rowData}) => console.log(rowData.name)}
            />
        </div>
    );
}

Prop Types

Property	Type	Required?	Default	Description
columns	{ dataKey: string, label: string, width: number }[]	x		The header label, field to search on data items, and width of the column
data	any[]	x		Any array of objects
defaultOrder	"desc" \| "asc" \| undefined		"asc"	The default sort order if supplying an order by column
defaultOrderBy	string		""	The column/field to sort by on first load
defaultSearchTerm	string		""	The search term to pre-filter the data with
ignoreSearchColumns	string[]		[]	Fields/columns to ignore when using the search input
inputClassName	string		""	CSS class applied to search input element
showSearch	boolean		TRUE	Show/hide the search input box
onRowClick	() => any			Callback invoked when a user clicks on a table row. `({ event: Event, index: number, rowData: any }): void`
actionButtons	JSX.Element[]		[]	Any items provided in the array will be rendered after the searchBar (if applicable)