- Build easy high performance react tables
- Server and Client Side rendering
- Filter and Sort Data
- Select Rows and Copy (multi)
- Create Dynamic Charts from Table Data
- Resizable columns
- Typescript support
- Storybook Support
https://react-ava-table.vercel.app
npm install react-table-npm
import { Table } from "react-table-npm"
type Width = {
minWidth?: number;
defaultWidth?: string | number;
};
type Column = {
id: string;
label: string;
filter?: string;
sort?: boolean;
width?: Width;
};
type Data = {
id: string;
name: string;
age: number;
state: string;
};
const columns: Column[] = [
{
id: "name",
label: "Name",
sort: true,
width: { minWidth: 300, defaultWidth: "1fr" },
},
{
id: "age",
label: "Age",
sort: true,
filter: true,
width: { defaultWidth: 200 },
},
{
id: "state",
label: "State",
sort: true,
width: { minWidth: 300, defaultWidth: 400 },
},
];
const users = [
{
"id": "62e2dd905e37187e20fd4a13",
"name": "Mcintyre Forbes",
"age": 69,
"state": "Idaho"
},
{
"id": "62e2dd90c7d21f4a03638d4f",
"name": "Verna Berger",
"age": 18,
"state": "Louisiana"
},
{
"id": "62e2dd90edc01768932b2da7",
"name": "Gladys Dawson",
"age": 100,
"state": "Federated States Of Micronesia"
}
]
const data: Data[] = users;
function App() {
return (
<Table
columns={columns}
data={data}
selectable={true}
contextMenu={true}
/>
);
}
name |
props |
return |
description |
columnKeyExtractor |
(item: Column) |
string (unique id) |
creates a key for each column |
renderColumnItem |
(item: Column) |
string |
return name of the column |
dataKeyExtractor |
(item: Data) |
string (unique id) |
creates a key for each dataset |
renderData |
(item: Data, column: Column) |
React Component |
determine value for each dataset |
fetchDataOnPagination |
async (page: number, limit: number, sort: SortType, filter: FilterType) |
DataType[] |
calls for new data |
name |
type |
description |
default |
limit |
number |
determinse the row count of a page |
15 |
resizable |
boolean |
able to resize columns width |
true |
contextMenu |
boolean |
able to open a context menu for each row (enable copy and charts) |
false |
selectable |
boolean |
able to select single or multiple rows |
false |
isServerSide |
boolean |
need to set to true if you need server side |
false |
Extend Example With Server Side
const handleFetchDataOnPagination = async (
page: number,
limit: number,
filter: any
) => {
// TODO - add columns, data from first example
return new Promise((resolve) =>
setTimeout(
() =>
resolve({
data: [...users]
.sort((a: any, b: any) => {
if (filter?.sort?.sortBy?.value === "asc") {
return a[filter?.sort?.sortBy?.id] > b[filter?.sort?.sortBy?.id]
? 1
: -1;
}
if (filter?.sort?.sortBy?.value === "desc") {
return a[filter?.sort?.sortBy?.id] < b[filter?.sort?.sortBy?.id]
? 1
: -1;
}
return 0;
})
.slice((page - 1) * limit, page * limit),
hasNextPage: users.length > page * limit,
}),
1000
)
);
};
<Table
columns={columns}
data={data}
selectable={true}
contextMenu={true}
isServerSide={true}
fetchDataOnPagination={handleFetchDataOnPagination}
/>
Custom Callback Functions Example
const App = () => {
// TODO - add columns, data from first example
// DEFAULT CALLBACKS
const handleColumnKeyExtractor = (column: Column) => column.id;
const handleRenderColumn = (column: Column) => column.label;
const handleDataKeyExtractor = (item: Data) => item.id;
const handleRenderData = (item: Data, column: Column) => {
return (
<td key={`${item.name}-${column.id}`}>
<span>{item[column.id as keyof Data]}</span>
</td>
);
};
return (
<Table
columns={columns}
columnKeyExtractor={handleColumnKeyExtractor}
renderColumnItem={handleRenderColumn}
data={data}
dataKeyExtractor={handleDataKeyExtractor}
renderData={handleRenderData}
selectable={true}
contextMenu={true}
/>
);
}