README
@acodez/table
Installation
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
import Table from '@acodez/table';
import '@acodez/table/dist/index.css';
function CourseCard({ rowData, value }) {
return (
<div>
<h5 style={{ fontSize: 18 }}>The Complete JavaScript Course 2020: From Zero to Expert!</h5>
</div>
);
}
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: '