npm package: @licuido-ui/ui_table
Description: A table is a method of organizing data, and is usually portrayed as rows and columns. Tables can be simple, meaning the first row has headers and is not counted as data, or multidimensional, meaning there is no header row, and all of the information prese
Latest version: 4.0.1

# Table

A table is a method of organizing data, and is usually portrayed as rows and columns. Tables can be simple, meaning the first row has headers and is not counted as data, or multidimensional, meaning there is no header row, and all of the information presented is tabular data.

### Author

- @author Hariharan <hariharan@crayond.co>

## Link

[Story Book Link Table](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_table
```

## Image

![alt text](./table.png)

## Import component

```jsx
import { Table } from '@licuido-ui/ui_table';
```

## Usage

```jsx
<Table Header={[]} dataList={[]} tableData={[]} />
```

### Table with row border Radius, row spacing, header height, header border radius and last row style

![alt text](./table2.png)

**`Using props`**

```jsx
 headerOptions: {
    fontSize: '16px',
    fontWeight: '600',
    color: '#02111A',
    bgColor: '#EAEAEA',
    borderBottom: '0px solid #E6E6E6',
    padding: '10px 16px',
    borderRadius: 8,
    style: { height: '90px' },
  },
  rowOptions: {
    paddingTop: '8px',
    paddingBottom: '8px',
    border: '1px solid #D9DBDD',
    borderRadius: '8px',
    lastRowStyle: { background: 'lightblue !important' },
  },
  cellOptions: {
    fontSize: '16px',
    fontWeight: '500',
    color: '#353448',
    bgColor: '#fff',
    padding: '16px !important',
    // borderBottom: '1px solid #d3d3d3',
    style: { padding: '6px' },
  },
```

**checkbox function and props**

```jsx
//props
  selectedCheckbox={selectedCheckbox}
  SelectAll={onChangeCheckbox}
  checkboxHandleChange={onChangeCheckbox}
  isSelectedIndeterminateCheckbox={
          selectedCheckbox?.length === tableData?.dataList?.length ? false : selectedCheckbox?.length >= 1
        }
 isSelectedAllCheckbox={selectedCheckbox?.length === tableData?.dataList?.length}


//function

 const [selectedCheckbox, setSelectedCheckbox] = React.useState<Array<number>>([]);
  const onChangeCheckbox = (id: any) => {
    if (id === 'selectAll') {
      if (selectedCheckbox?.length === tableData?.dataList?.length) {
        setSelectedCheckbox([]);
      } else {
        setSelectedCheckbox(tableData.dataList?.map((item) => item?.id as number) as Array<number>);
      }
    } else {
      const isExit = selectedCheckbox?.find((item) => item === id);
      if (isExit) {
        setSelectedCheckbox(selectedCheckbox?.filter((item) => item !== id));
      } else {
        setSelectedCheckbox((pre) => [...pre, id]);
      }
    }
  };
```

## Table Props

| **Name**                 | **Description**                                                                                                                                                                                                                                                                        | **Default** | **Control** |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------- |
| **Header\***             | TableHeader                                                                                                                                                                                                                                                                            | \-          | Set object  |
| **dataList\***           | TableBody                                                                                                                                                                                                                                                                              | \-          | Set object  |
| **tableData\***          | TableData                                                                                                                                                                                                                                                                              | \-          | Set object  |
| **headerOptions**        | \{ fontSize?: string; fontWeight?: string; color?: string; bgColor?: string; borderBottom?: string; padding?: string; \}                                                                                                                                                               | \-          | Set object  |
| **rowOptions**           | \{ rowOddBgColor: string; rowEvenBgColor: string; paddingTop: string; paddingBottom: string; border: string;\}                                                                                                                                                                         | \-          | Set object  |
| **cellOptions**          | \{ fontSize?: string; fontWeight?: string; color?: string; bgColor?: string; borderBottom?: string; padding?: string; \}                                                                                                                                                               | \-          | Set object  |
| **noDataFound**          | \{ fontSize: string; fontWeight: string; color: string; bgColor: string; text: string; component: ReactNode; \}                                                                                                                                                                        | \-          | Set object  |
| **alertOptions**         | \{ isEnable?: boolean; alertOpen: boolean; setAlertOpen: \(status: boolean\) =&gt; void; title?: string; description?: string; primaryText?: string; secondaryText?: string; icon?: ReactNode; \}                                                                                      | \-          | Set object  |
| **setSelectedCheckbox**  | any                                                                                                                                                                                                                                                                                    | \-          | Set object  |
| **selectedCheckbox**     | \(string \| number\)\[\]                                                                                                                                                                                                                                                               | \-          | Set object  |
| **checkboxHandleChange** | \(\) =&gt; void                                                                                                                                                                                                                                                                        | \-          | \-          |
| **handleSwitch**         | \(id: any, rowData: any, event: any\) =&gt; void                                                                                                                                                                                                                                       | \-          | \-          |
| **switchList**           | \(string \| number\)\[\]                                                                                                                                                                                                                                                               | \-          | Set object  |
| **SelectAll**            | \(id: any, event: any\) =&gt; void \| \(\(data: any, isRestSet: boolean\) =&gt; void\)                                                                                                                                                                                                 | \-          | \-          |
| **tableBackground**      | any                                                                                                                                                                                                                                                                                    | \-          | "\#ffffff"  |
| **tableMinWidth**        | string                                                                                                                                                                                                                                                                                 | \-          | 3350px      |
| **tableMinHeight**       | string                                                                                                                                                                                                                                                                                 | \-          | 465px       |
| **tableName\***          | string                                                                                                                                                                                                                                                                                 | \-          | Team Member |
| **paddingAll**           | string                                                                                                                                                                                                                                                                                 | \-          | 0px         |
| **padding**              | string\[\]                                                                                                                                                                                                                                                                             | \-          | Set object  |
| **marginAll**            | string                                                                                                                                                                                                                                                                                 | \-          | 0px         |
| **margin**               | string\[\]                                                                                                                                                                                                                                                                             | \-          | Set object  |
| **tableBorderRadius**    | string                                                                                                                                                                                                                                                                                 | \-          | 12px        |
| **dense**                | "small""medium"                                                                                                                                                                                                                                                                        | \-          | smallmedium |
| **stickyOptions**        | \{ stickyHeader: boolean; stickyRight: string\[\]; stickyLeft: string\[\]; \}                                                                                                                                                                                                          | \-          | Set object  |
| **paginationOption**     | \{ isEnable?: boolean; rowPerPage?: number; rowsPerPageOptions?: \(number \| \{ value: number; label: string; \}\)\[\]; \}                                                                                                                                                             | \-          | Set object  |
| **HeaderComponent\***    | \{ variant: string \| number; component?: ReactNode; styles?: \{ padding?: any; margin?: any; \}; headerSelect?: string; setHederSelect?: \(\) =&gt; void; searchPlaceholder?: string; selectOption?: \{ \.\.\.; \}\[\]; \.\.\. 14 more \.\.\.; setHederCheckbox?: \(\) =&gt; void; \} | \-          | Set object  |
| **className**            | string                                                                                                                                                                                                                                                                                 | \-          | Set string  |
| **sx**                   | SxProps&lt;Theme&gt;                                                                                                                                                                                                                                                                   | \-          | Set object  |
| **id**                   | any                                                                                                                                                                                                                                                                                    | \-          | Set object  |
| **tableMaxWidth**        | string                                                                                                                                                                                                                                                                                 | \-          | Set string  |
| **tableMaxHeight**       | string                                                                                                                                                                                                                                                                                 | \-          | Set string  |
| **isSelectedAll**        | boolean                                                                                                                                                                                                                                                                                | \-          | Set boolean |
| **isDataMask**           | boolean                                                                                                                                                                                                                                                                                | \-          | Set boolean |
| **onRowClick**           | (rowData: object, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void                                                                                                                                                                                                        | `undefined` | Function    |

**Note:** if you use `onRowClick` and Table cell functions, both called same time. The issue solution for using Table cell function `e.preventDefault();` `e.stopPropagation();`

```jsx
(id, data, e) => {
          console.log(id, data);
          e.preventDefault();
          e.stopPropagation();
        },
```

## Sample Props

```jsx
 Header: [
      {
        id: 'id',
        align: 'left',
        disablePadding: false,
        label: 'Sl no',
        isSortable: true,
      },
      {
        id: 'select',
        align: 'left',
        disablePadding: false,
        label: 'Select',
        variant: 'CHECKBOX',
        isSortable: false,
      },
      {
        id: 'name',
        align: 'left',
        disablePadding: false,
        label: 'Dessert',
        isSortable: true,
      },
      {
        id: 'calories',
        align: 'left',
        disablePadding: false,
        label: 'Calories',
        isSortable: true,
      },
      {
        id: 'fat',
        align: 'left',
        disablePadding: false,
        label: 'Fat (g)',
        isSortable: true,
      },
      {
        id: 'carbs',
        align: 'left',
        disablePadding: false,
        label: 'Carbs (g)',
        isSortable: true,
      },
      {
        id: 'protein',
        align: 'left',
        disablePadding: false,
        label: 'Protein (g)',
        isSortable: true,
      },
      {
        id: 'profile',
        align: 'center',
        disablePadding: false,
        label: 'Profile',
        isSortable: false,
      },
      {
        id: 'overall_progress',
        align: 'left',
        disablePadding: false,
        label: 'Overall Progress',
        isSortable: false,
      },
      {
        id: 'production',
        align: 'left',
        disablePadding: false,
        label: 'Production',
        isSortable: false,
      },
      {
        id: 'status',
        align: 'left',
        disablePadding: false,
        label: 'Status',
        isSortable: false,
      },
      {
        id: 'performance',
        align: 'center',
        disablePadding: false,
        label: 'Performance',
        isSortable: false,
      },
      {
        id: 'signals',
        align: 'center',
        disablePadding: false,
        label: 'Signals',
        isSortable: false,
      },
      {
        id: 'reporting_to',
        align: 'center',
        disablePadding: false,
        label: 'Reporting to',
        isSortable: false,
      },
      {
        id: 'global_rating',
        align: 'center',
        disablePadding: false,
        label: 'Global Rating',
        isSortable: false,
      },
      {
        id: 'growth',
        align: 'center',
        disablePadding: false,
        label: 'Growth',
        isSortable: false,
      },
      {
        id: 'experience',
        align: 'center',
        disablePadding: false,
        label: 'Experience',
        isSortable: false,
      },
      {
        id: 'link',
        align: 'center',
        disablePadding: false,
        label: 'Link',
        isSortable: false,
      },
      {
        id: 'custom',
        align: 'center',
        disablePadding: false,
        label: 'Custom',
        isSortable: false,
      },
      {
        id: 'alert_type',
        align: 'center',
        disablePadding: false,
        label: 'Alert Type',
        isSortable: false,
      },
      {
        id: 'response',
        align: 'left',
        disablePadding: false,
        label: 'Response',
        isSortable: false,
      },
      {
        id: 'action',
        align: 'center',
        disablePadding: false,
        label: 'Action',
        isSortable: false,
      },
    ],
    dataList: [
      {
        id: 1,
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        profile: {
          image: 'sample.jpg',
          label: 'Hariharan',
        },
        overall_progress: '45',
        production: [
          {
            label: 'Sufficient',
            color: '#7692cc',
            bgColor: '#e2eafa',
          },
          {
            label: 'React',
            color: '#5AC782',
            bgColor: '#BDEDCF',
          },
        ],
        performance: 'Completely away',
        signals: [
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
          {
            image: 'sample.jpg',
            label: 'Ram',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
          {
            image: 'sample.jpg',
            label: 'Babu',
          },
          {
            image: 'sample.jpg',
            label: 'Siva',
          },
        ],
        global_rating: 4,
        growth: {
          value: 2.5,
          variant: 'POSITIVE',
        },
        experience: '2023-03-15T18:43:21.055Z',
        custom: <BasicButton>Button 1</BasicButton>,
        alert_type: {
          label: 'Filter',
          color: '#7692cc',
          bgColor: '#e2eafa',
          icon: <FunnelIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
      {
        id: 2,
        name: 'cake',
        calories: 5,
        fat: 7,
        carbs: 167,
        protein: 34.3,
        profile: {
          image: 'sample.jpg',
          label: 'Hari Ram',
        },
        overall_progress: '35',
        production: [
          {
            label: 'Insufficient',
            color: '#AE7330',
            bgColor: '#FCEDDD',
          },
          {
            label: 'Next.js',
            color: '#F7838B',
            bgColor: '#FCCACD',
          },
        ],
        status: false,
        performance: 'Need to improve a lot',
        signals: [
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Ram',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
          {
            image: 'sample.jpg',
            label: 'Siva',
          },
        ],
        global_rating: 3,
        growth: {
          value: 0.5,
          variant: 'NEGATIVE',
        },
        experience: '2023-03-05T18:43:21.055Z',
        custom: <BasicButton>Button 2</BasicButton>,
        alert_type: {
          label: 'Insufficient',
          color: '#AE7330',
          bgColor: '#FCEDDD',
          icon: <FunnelIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
      {
        id: 3,
        name: 'T',
        calories: 5,
        fat: 7,
        carbs: 167,
        protein: 34.3,
        profile: {
          image: 'sample.jpg',
          label: 'Siva',
        },
        overall_progress: '67',
        production: [
          {
            label: 'Sufficient',
            color: '#7692cc',
            bgColor: '#e2eafa',
          },
          {
            label: 'React',
            color: '#5AC782',
            bgColor: '#BDEDCF',
          },
        ],
        performance: 'Impactful',
        signals: [
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Siva',
          },
          {
            image: 'sample.jpg',
            label: 'Ram',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
        ],
        global_rating: 1,
        growth: {
          value: 0.1,
          variant: 'NEGATIVE',
        },
        experience: '2022-01-15T18:43:21.055Z',
        custom: <BasicButton>Button 3</BasicButton>,
        alert_type: {
          label: 'Delete',
          color: '#F44F5A',
          bgColor: '#FCCACD',
          icon: <SouthIcon />,
        },
        response: {
          label: 'Not Delivered',
          icon: <SouthIcon />,
        },
      },
      {
        id: 4,
        name: 'Pie',
        calories: 5,
        fat: 7,
        carbs: 167,
        protein: 34.3,
        profile: {
          image: 'sample.jpg',
          label: 'Kumar',
        },
        overall_progress: '98',
        production: [
          {
            label: 'Insufficient',
            color: '#AE7330',
            bgColor: '#FCEDDD',
          },
          {
            label: 'Work',
            color: '#AE7333',
            bgColor: '#FCEDDF',
          },
        ],
        status: false,
        performance: 'Need to improve',
        signals: [
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'Hari',
            label: 'Excellent',
            color: '#007C32',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Ram',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
        ],
        global_rating: 3.5,
        growth: {
          value: 3.2,
          variant: 'POSITIVE',
        },
        experience: '2023-01-11T18:43:21.055Z',
        custom: <BasicButton>Button 4</BasicButton>,
        alert_type: {
          label: 'Edit',
          color: '#6f6f6f',
          bgColor: '#DEDEDE',
          icon: <SouthIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
      {
        id: 5,
        name: 'Cupcake',
        calories: 305,
        fat: 3.7,
        carbs: 67,
        protein: 4.3,
        profile: {
          image: 'sample.jpg',
          label: 'Hariharan',
        },
        overall_progress: '45',
        production: [
          {
            label: 'Sufficient',
            color: '#7692cc',
            bgColor: '#e2eafa',
          },
          {
            label: 'React',
            color: '#5AC782',
            bgColor: '#BDEDCF',
          },
        ],
        performance: 'Good',
        signals: [
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
        ],
        global_rating: 4.5,
        growth: {
          value: 1.2,
          variant: 'POSITIVE',
        },
        experience: '2023-02-25T18:43:21.055Z',
        custom: <BasicButton>Button 5</BasicButton>,
        alert_type: {
          label: 'Delete',
          color: '#F44F5A',
          bgColor: '#FCCACD',
          icon: <SouthIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
      {
        id: 6,
        name: 'cake',
        calories: 5,
        fat: 7,
        carbs: 167,
        protein: 34.3,
        profile: {
          image: 'sample.jpg',
          label: 'Hari Ram',
        },
        overall_progress: '35',
        production: [
          {
            label: 'Insufficient',
            color: '#AE7330',
            bgColor: '#FCEDDD',
          },
          {
            label: 'Work',
            color: '#AE7333',
            bgColor: '#FCEDDF',
          },
        ],
        status: false,
        performance: 'Very Good',
        signals: [
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
        ],
        global_rating: 4,
        growth: {
          value: 0.74,
          variant: 'NEGATIVE',
        },
        experience: '2022-12-15T18:43:21.055Z',
        custom: <BasicButton>Button 6</BasicButton>,
        alert_type: {
          label: 'Delete',
          color: '#F44F5A',
          bgColor: '#FCCACD',
          icon: <SouthIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
      {
        id: 7,
        name: 'T',
        calories: 5,
        fat: 7,
        carbs: 167,
        protein: 34.3,
        profile: {
          image: 'sample.jpg',
          label: 'Siva',
        },
        overall_progress: '67',
        production: [
          {
            label: 'Sufficient',
            color: '#7692cc',
            bgColor: '#e2eafa',
          },
          {
            label: 'React',
            color: '#5AC782',
            bgColor: '#BDEDCF',
          },
        ],
        performance: 'Spectacular',
        signals: [
          {
            name: 'Hari',
            label: 'Excelent',
            color: '#007C32',
          },
          {
            name: 'Ram',
            label: 'Good',
            color: '#F2B824',
          },
          {
            name: 'Anbu',
            label: 'Very Good',
            color: '#4C9E29',
          },
          {
            name: 'S',
            label: 'Bad',
            color: '#DE1010',
          },
          {
            name: 'Babu',
            label: 'Good',
            color: '#F2EB24',
          },
        ],
        reporting_to: [
          {
            image: 'sample.jpg',
            label: 'Hari Ram',
          },
          {
            image: 'sample.jpg',
            label: 'Hariharan',
          },
        ],
        global_rating: 2,
        growth: {
          value: 0.63,
          variant: 'NEGATIVE',
        },
        experience: '2022-06-02T18:43:21.055Z',
        custom: <BasicButton>Button 7</BasicButton>,
        alert_type: {
          label: 'Delete',
          color: '#F44F5A',
          bgColor: '#FCCACD',
          icon: <SouthIcon />,
        },
        response: {
          label: 'sent',
          icon: <FunnelIcon />,
        },
      },
    ],
    tableData: [
      { type: ['INCREMENT'], name: 'sl_no' },
      { type: ['CHECKBOX'], name: 'checkbox' },
      { type: ['TEXT'], name: 'name' },
      { type: ['TEXT'], name: 'calories' },
      { type: ['TEXT'], name: 'fat' },
      { type: ['TEXT'], name: 'carbs' },
      { type: ['TEXT'], name: 'protein' },
      { type: ['IMAGE_WITH_LABEL'], name: 'profile', variant: 'circular' },
      { type: ['PROGRESS'], name: 'overall_progress' },
      { type: ['LABEL'], name: 'production' },
      {
        type: ['SWITCH'],
        name: 'status',
        switchText: [{ label_1: 'No', label_2: 'Yes' }],
      },
      { type: ['PERFORMANCE'], name: 'performance' },
      { type: ['AVATAR_NAME'], name: 'signals' },
      {
        type: ['IMAGE_WITH_PROFILES'],
        name: 'reporting_to',
        variant: 'circular',
      },
      { type: ['STAR_RATING'], name: 'global_rating' },
      { type: ['GROWTH'], name: 'growth' },
      { type: ['DATE'], name: 'experience', format: 'YYYY MMM DD' },
      {
        type: ['LINK'],
        name: 'link',
        label: 'view',
        viewHandel: (id: any) => {
          console.log(id);
        },
      },
      { type: ['CUSTOM'], name: 'custom' },
      { type: ['ICON_WITH_LABEL'], name: 'alert_type' },
      { type: ['ICON_WITH_TEXT'], name: 'response' },
      {
        type: ['ACTION'],
        name: 'action',
        variant: [
          {
            icon: <VisibilityOffIcon />,
            method: (id: string | number, rowData: object, e: Event) => {
              console.log(id, rowData, e);
            },
          },
          {
            icon: <SouthIcon width={'16px'} height={'16px'} />,
            method: (id: string | number, rowData: object, e: Event) => {
              return console.log(id, rowData, e);
            },
          },
          {
            icon: <VisibilityIcon />,
            method: (id: string | number, rowData: object, e: Event) => {
              console.log(id, rowData, e);
            },
          },
        ],
      },
    ],
    headerOptions: {
      fontSize: '16px',
      fontWeight: '500',
      color: '#818181',
      bgColor: '#EAEAEA',
      borderBottom: '0px solid #E6E6E6',
      padding: '12px',
    },
    rowOptions: {
      rowOddBgColor: '#fff',
      rowEvenBgColor: '#F7F7F7',
      paddingTop: '4px',
      paddingBottom: '4px',
      border: '2px #D9DBDD solid',
    },
    cellOptions: {
      fontSize: '16px',
      fontWeight: '500',
      color: '#353448',
      // bgColor: '#fff',
      borderBottom: '0px solid #E6E6E6',
      padding: '12px',
    },
    noDataFound: {
      fontSize: '16px',
      fontWeight: '600',
      color: '#353448',
      bgColor: '#F7F7F7',
      text: 'No Data Found',
      component: null,
    },
    alertOptions: {
      isEnable: false,
      alertOpen: false,
      setAlertOpen: () => undefined,
      title: 'Are you sure, would you like to deactivate?',
      description: '',
      primaryText: 'Yes',
      secondaryText: 'No',
      icon: <AlertIcon />,
    },
    setSelectedCheckbox: () => undefined,
    selectedCheckbox: [],
    checkboxHandleChange: () => undefined,
    handleSwitch: () => undefined,
    switchList: [],
    SelectAll: () => undefined,
    tableBackground: '#ffffff',
    tableMinWidth: '3350px',
    tableMinHeight: '465px',
    tableName: 'Team Member',
    paddingAll: '0px',
    padding: ['1px', '1px', '1px', '1px'],
    marginAll: '0px',
    margin: ['0px', '1px', '0px', '1px'],
    tableBorderRadius: '12px',
    dense: 'medium',
    stickyOptions: {
      stickyHeader: true,
      stickyLeft: [],
      stickyRight: ['action', 'response'],
    },
    paginationOption: {
      rowPerPage: 5,
      rowsPerPageOptions: [5, 10, 25],
    },
    HeaderComponent: {
      variant: 1,
      styles: {
        padding: '10px 0',
        margin: '0',
      },
      headerSelect: '',
      setHederSelect: () => undefined,
      searchPlaceholder: 'Search',
      selectOption: [
        {
          label: 'Status',
          value: '',
        },
        {
          label: 'Active',
          value: 'active',
        },
        {
          label: 'Inactive',
          value: 'inactive',
        },
      ],
      setHederSearch: () => undefined,
      deleteIcon: <DeleteIcon />,
      downloadIcon: <SouthIcon />,
      funnelIcon: <FunnelIcon />,
      searchIcon: <VisibilityIcon />,
      fillerMethod: () => undefined,
      downloadMethod: () => undefined,
    },
```