@acodez/table NPM

@acodez/table

npm_version license

Installation
PropsAPI
Usage

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: '$',
            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": []
                }
              ]
            },
          ]


       <Table
            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: () => { },
                  },
                ],
              },
            ]}
          />

@acodez/profilepreviewsmall @acodez/checkbox @acodez/tooltip

@everything-registry/sub-chunk-25

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago