Featureable, flexible and powerful react table. ctablex will not hold you back and let you customize table UI and behavior. ctablex name is the combination of table and ctx (context).
yarn add @ctablex/coreimport React from 'react';
import {
DataTable,
Columns,
Column,
Table,
} from '@ctablex/core';
const data = [
id: '1',
name: 'Gloves',
price: 544,
count: 5,
},
{
id: '2',
name: 'Salad',
price: 601,
count: 6,
},
{
id: '3',
name: 'Keyboard',
price: 116,
count: 1,
},
];
export function MyTable() {
return (
<DataTable data={data}>
<Columns>
<Column header="Name" accessor="name" />
<Column header="Price" accessor="price" />
<Column header="Count" accessor="count" />
</Columns>
<Table />
</DataTable>
);
}The Table/TableHeader/HeaderRow/TableBody/Rows/Row components have default children. so when you write <Table />, it's equal to you write the following codes:
<Table>
<TableHeader>
<HeaderRow>
<Columns />
</HeaderRow>
</TableHeader>
<TableBody>
<Rows>
<Row>
<Columns />
</Row>
</Rows>
</TableBody>
</Table>You can assume <Columns /> component somehow renders Columns' children defined in the first part (definition part).
<DataTable data={data}>
<Columns>
{/* begin children definition */}
<Column header="Name" accessor="name" />
<Column header="Price" accessor="price" />
<Column header="Count" accessor="count" />
{/* end children definition */}
</Columns>
<TableBody>
<Rows>
<Row>
<Columns />
</Row>
</Rows>
</TableBody>
</DataTable>is equal to
<DataTable data={data}>
<TableBody>
<Rows>
<Row>
<Column header="Name" accessor="name" />
<Column header="Price" accessor="price" />
<Column header="Count" accessor="count" />
</Row>
</Rows>
</TableBody>
</DataTable>Please read the changelog here.
This project is licensed under the terms of the Apache License 2.0.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent