@acodez/table 中文文档教程

Question

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