Download the file. save to your resource component, and fix every file about importing Component. then you can use it.
- Searching data
- Pagination
- Actions with event handler
- Using Tailwind For Styling, Fell Free To Custom Style
- RelationShip OneToOne
- RelationShip HasMany
- FormatValue before display
Define Column
const columns = [ { header: "Phone", key: "user" } ];
Define Actions
const actions = ( <><button className="w-6 h-6">click me</button></>);
Call Table
<Table actions="actions" columns="columns" rowData="yourPayloads"></Table>
Handle HasMany RelationShip
const columns = [ { header: "Comment", key: "comments", relationship: { related: 'HAS_MANY', targetKeys: ['comment'] } } ];
Handle OneToOne RelationShip
const columns = [ { header: "Product", key: "product.image" } ];
Handle FormatValue Relationship
relationship: { formatValue: (value) => { return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(value); } }
Give A Route on Your action links
const actions = ( <><button className="w-6 h-6" isLink={true} href="/invoice/{yourPayload.key}/detail">click me</button></>);
Give Event On Action Table
- define attribute dataValue & onClick
const actions = ( <><button className="w-6 h-6" dataValue="yourKeysTableField" onClick={(e) => handleDataValue(e)}>click me</button></>);
- define function
const handleDataValue = (e) => { console.log(e.target.getAttribute('data-value')); }
Define pagination itemsPerPage
<Table itemsPerPage={10}></Table>