@fatqianqian/cabbage-package NPM

Installation
Basic Usage
Props

Installation

Use npm to install the package:

npm install @fatqianqian/cabbage-package

And make sure ChakraProvider is set up in your app:

import { ChakraProvider } from '@chakra-ui/react';

const App = () => (
  <ChakraProvider>
    {/* ... */}
  </ChakraProvider>
);

Basic Usage

Here's how to use the DataTable component in a React component:

import { DataTable } from '@fatqianqian/cabbage-package';

const App = () => {
  const columns = [
    { header: 'Code', accessorKey: 'code' },
    { header: 'Name', accessorKey: 'name' },
    { header: 'Action', accessorKey: 'action', render: (rowData) => (<Button>{rowData.action}</Button>)}
    // ... more columns
  ];

  const data = [
    { id: 1, code: 'A1', name: 'Apple', action: 'Button 1' },
    { id: 2, code: 'B1', name: 'Banana', action: 'Button 2' },
    // ... more data
  ];

  return (
    <DataTable
      columns={columns}
      data={data}
    />
  );
};

Props

`columns` (required)

An array of column objects specifying the header label and the key for data accessor. If you want to render a custom component in the column, you can also provide a render function that takes the row data as the argument and returns the component to be rendered.

Type: Array

Example:

const columns = [
  { header: 'Code', accessorKey: 'code' },
  { header: 'Name', accessorKey: 'name' },
  { header: 'Action', accessorKey: 'action', render: (rowData) => (<Button>{rowData.action}</Button>)}
];

`data` (required)

An array of objects to be displayed in the table. Each object should have the same keys as the accessor keys specified in the columns prop.

Type: Array

Example:

const data = [
  { id: 1, code: 'A1', name: 'Apple', action: 'Button 1' },
  { id: 2, code: 'B1', name: 'Banana', action: 'Button 2' },
];

`selectedRows`

An array of objects to be selected in the table. Each object should have the same keys as the accessor keys specified in the columns prop.

Type: Array
Default: []

`onRowSelectionChange`

A function that will be called when the selected rows change.

Type: Function
Default: () => {}

`hasCaption`

A boolean flag that enables or disables the table caption.

Type: Boolean
Default: false

`caption`

A string that is used as the table caption if hasCaption is set to true.

Type: String
Default: ''

`tableStyle`

Allows you to provide additional styles for the table.

Type: Object

Default:

{
    textAlign: "center",
    size: "sm",
    border: "1px",
    borderColor: "blackAlpha.900",
}

Type: Object

`enablePagination`

A boolean flag that enables or disables pagination for the table.

Type: Boolean
Default: false

`enableRowDoubleClick`

A boolean flag that enables or disables double click for the table row, if enabled, if enabled, rowDoubleClickHandler will be called when double click on the row.

Type: Boolean
Default: false

`rowDoubleClickHandler(rowData)`

Double click handler for the table row, if enableRowDoubleClick is set to true, this handler will be called when double click on the row.

Type: Function
Default: () => {}

Usage:

<DataTable
  ...
  rowDoubleClickHandler = (row) => {alert(`Double Clicked Row ${row.id}`)},
  ...
/>

`enableFilter`

A boolean flag that enables or disables filter for the table.

Type: Boolean
Default: false

`enableMultiSelect`

A boolean flag that enables or disables multi select for the table.

Type: Boolean
Default: false

`enableFixedHeader`

A boolean flag that enables or disables fixed header for the table. maxH will be set to 100% if enableFixedHeader is set to true.

Type: Boolean
Default: false

Example Usage with All Props

<DataTable
  columns={columns}
  data={data}
  selectedRows={[1, 2]}
  onRowSelectionChange={(selectedRows) => { console.log(selectedRows) }}
  hasCaption={true}
  caption="Sample Caption"
  tableStyle={{ textAlign: 'center' }}
  enablePagination={true}
  enableRowDoubleClick={true}
  rowDoubleClickHandler={(row) => { console.log(row) }}
/>