react table component
npm install @acodez/tablebash
npm install @acodez/table
`
Props API
| Property | Type | Required | Default value | Description |
| ------------------------ | ---------- | -------- | ------------- | :----------------------------------------------------------- |
| headings | array | yes | | headings of table |
| rows | array | yes | | array of data |
| isCheckable | boolean | no | false | whether rows can be selected |
| pageCheckedLabel | string | no | | label for items in page selected |
| ultimateCheckedLabel | string | no | | label for all items in list including all pages selected |
| isCheckable | boolean | no | false | whether rows can be selected |
| isAllChecked | boolean | no | false | check if all rows in page is selected |
| isUltimatedChecked | boolean | no | false | check if all entries in list including all pages is selected |
| onCheck | function | no | | function to check single entry |
| onAllCheck | function | no | | function to check all entries in page |
| onUltimateCheck | function | no | | function to check all entries in list including all pages |
| buttons | array | no | empty array | row actions |
| checked | string | no | |
| tablestyle | string | no | | table style 'gapped' or not |
| size | string | no | | table size (medium or empty) |
| backgroundColor | string | no | | table background color (grey or empty) |
| bulkactions | array | no | empty array | bulk actions for those rows selected |
---
Usage
`jsx
import Table from '@acodez/table';
import '@acodez/table/dist/index.css';
function CourseCard({ rowData, value }) {
return (
The Complete JavaScript Course 2020: From Zero to Expert!
);
}
const COURSE_LISTING_HEADINGS = [
{
label: 'TITLE',
key: 'title',
type: 'custom',
style: { fontSize: '22px' },
component: CourseCard,
sortable: true,
},
{ label: 'STATUS', key: 'status', sortable: true, type: 'status' },
{
label: 'RATING',
key: 'rating',
style: { fontSize: '22px' },
currency: '$',
type: 'currency',
sortable: true,
},
{ label: 'ENROLLMENT', key: 'enrollment', style: { fontSize: '22px' }, sortable: true },
{ label: 'MATERIALS', key: 'materialCount', style: { fontSize: '22px' }, sortable: true },
]
const data = [
{
"isPublished": false,
"status": "Draft",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "dg",
"subject": []
},
{
"isPublished": false,
"status": "Active",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "sfgsd",
"subject": []
},
{
"isPublished": false,
"status": "Active",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "Test",
"subject": []
},
{
"isPublished": false,
"status": "Active",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "English 5",
"subject": []
},
{
"isPublished": false,
"status": "Active",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "ds",
"subject": []
},
{
"isPublished": false,
"status": "Active",
"rating": 0,
"enrollment": 0,
"materialCount": 0,
"title": "English",
"subject": []
},
{
"isPublished": true,
"status": "Draft",
"rating": 0,
"title": "9th Std",
"subject": [
{
"status": "Active",
"isDeleted": true,
"title": "Maths",
"chapter": []
}
],
"enrollment": 0,
"materialCount": 0
},
{
"isPublished": true,
"status": "Active",
"rating": 0,
"title": "Monsoon",
"subject": [
{
"status": "Active",
"isDeleted": false,
"title": "hi",
"chapter": []
}
]
},
]
size="medium"
onSort={() => { }}
headings={COURSE_LISTING_HEADINGS}
rows={data}
buttons={[
{
action: (data) => {
history.push(/courses/${data._id}/details);
},
label: 'edit',
},
{
action: (id) => {
deleteCourse(id._id);
},
type: 'modal',
confirmText: 'Delete',
label: 'delete',
},
{
icon: more,
label: 'list',
type: 'list',
items: [
{
label: 'Send Email',
onClick: (id) => {
alert(id);
},
},
{
label: 'Send Notificaion',
onClick: () => { },
},
],
},
]}
/>
``