🔋 Batteries included table component that does it all!
⚡️ Try out the Demo! ⚡️
🏗 Active Development 🛠
- 💻 virtualized rows
- 🔽 built in sorting
- 📄 column pagination
↔️ column resize- 🕵 global search
- 🌊 overflow management with tool tips
- 🔨customizable toolbar
- ✅ selectable rows
Install ez-react-table with npm
npm install ez-react-table
Simple
import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/styles.css";
function App() {
return (
<div>
<EzReactTable
cols={[
{
title: "First",
key: "first",
},
{
title: "Last",
key: "last",
},
]}
data={[
{ first: "Michael", last: "Myers" },
{ first: "Laurie", last: "Strode" },
{ first: "Samuel", last: "Loomis" },
]}
/>
</div>
);
}
Property | Type | Default | Description |
---|---|---|---|
cols |
array |
[] |
column configuration |
data |
array |
[] |
data to render |
rowHeight |
number |
30 |
height of rows in pixels |
tableHeight |
number |
500 |
height of table in pixels |
showCols |
number |
cols.length |
how many columns to show before paginating |
title |
Component or string |
null |
create title for table, can be either a string or a react component |
toolbar |
Component |
null |
react component to pass as toolbar |
selectable |
string |
null |
defining makes rows selectable, pass column key to use as unique identifier. |
initialSelected |
array |
[] |
array of of ids that should be checked on component load. The array contains the values of the property specified in selectable |
onSelect |
function |
null |
function that runs when selections occur. the function will get passed the current selection array |
the toolbar component recieves 2 properties defined below
Property | Description |
---|---|
selected |
array of selected rows |
clearSelected |
clear selected rows |
Property | Type | Description |
---|---|---|
title |
string |
column display name |
align |
string |
justify-content css property |
key |
string |
correlated property name in data object |
format |
function |
render custom content |
Argument | Description |
---|---|
value |
value to render in column |
object |
row's object |
(value, object) => <span>{value}</span>;
Apply default styles
import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/main.css";
import "ez-react-table/lib/styles.css";
For custom styles, copy ez-react-table/lib/styles.css
and modify as needed.
import { EzReactTable } from "ez-react-table";
import "ez-react-table/lib/main.css";
import "./styles.css";