@acodez/table

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