Layout

General

Data Entry

Data Display

Feedback

Table

Table is a component that displays data in a tabular format.

Import: import { Table } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

For detailed react table usage, please refer to react-table

Name	Age	Address
KubeSphere	1	Beijing
KubeSphere	3	Beijing
KubeSphere	2	Beijing

import * as React from 'react';
import { DataTable, Table } from '@kubed/components';

() => {
  const [defaultOptions] = React.useState(
    DataTable.getDefaultTableOptions({
      tableName: 'table-demo',
      manual: false,
      enableFilters: true,
      enablePagination: false,
    })
  );
  const [columnFilters, setColumnFilters] = React.useState([]);
  const columns = React.useMemo(() => {
    return [
      {
        accessorKey: 'name',
        header: 'Name',
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: 'age',
        header: 'Age',
        cell: (info) => info.getValue(),
        filterFn: 'equals',
      },
      {
        accessorKey: 'address',
        header: 'Address',
        cell: (info) => info.getValue(),
      },
    ];
  }, []);
  const data = React.useMemo(() => {
    return [
      { name: 'KubeSphere', age: 1, address: 'Beijing' },
      { name: 'KubeSphere', age: 3, address: 'Beijing' },
      { name: 'KubeSphere', age: 2, address: 'Beijing' },
    ];
  }, []);
  const table = DataTable.useTable({
    ...defaultOptions,
    columns,
    data,
    meta: {
      ...defaultOptions.meta,
      getProps: {
        filters: () => {
          return {
            simpleMode: false,
            suggestions: [
              {
                key: 'age',
                label: 'Age',
                options: Array(4)
                  .fill(1)
                  .map((i, index) => ({ key: index, label: `Age ${index}` })),
              },
            ],
          };
        },
      },
    },
  });
  return <Table table={table} />;
};

1
import * as React from 'react';
2
import { DataTable, Table } from '@kubed/components';
3

4
() => {
5
  const [defaultOptions] = React.useState(
6
    DataTable.getDefaultTableOptions({
7
      tableName: 'table-demo',
8
      manual: false,
9
      enableFilters: true,
10
      enablePagination: false,
11
    })
12
  );
13
  const [columnFilters, setColumnFilters] = React.useState([]);
14
  const columns = React.useMemo(() => {
15
    return [
16
      {
17
        accessorKey: 'name',
18
        header: 'Name',
19
        cell: (info) => info.getValue(),
20
      },
21
      {
22
        accessorKey: 'age',
23
        header: 'Age',
24
        cell: (info) => info.getValue(),
25
        filterFn: 'equals',
26
      },
27
      {
28
        accessorKey: 'address',
29
        header: 'Address',
30
        cell: (info) => info.getValue(),
31
      },
32
    ];
33
  }, []);
34
  const data = React.useMemo(() => {
35
    return [
36
      { name: 'KubeSphere', age: 1, address: 'Beijing' },
37
      { name: 'KubeSphere', age: 3, address: 'Beijing' },
38
      { name: 'KubeSphere', age: 2, address: 'Beijing' },
39
    ];
40
  }, []);
41
  const table = DataTable.useTable({
42
    ...defaultOptions,
43
    columns,
44
    data,
45
    meta: {
46
      ...defaultOptions.meta,
47
      getProps: {
48
        filters: () => {
49
          return {
50
            simpleMode: false,
51
            suggestions: [
52
              {
53
                key: 'age',
54
                label: 'Age',
55
                options: Array(4)
56
                  .fill(1)
57
                  .map((i, index) => ({ key: index, label: `Age ${index}` })),
58
              },
59
            ],
60
          };
61
        },
62
      },
63
    },
64
  });
65
  return <Table table={table} />;
66
};
67

useTable Extension Points

useTable(options)

options.meta

Most of the extension points in the table are configured through meta.

1
interface TableMeta<TData extends RowData> {
2
  tableName: string; // table name, now only used for storage state
3
  refetch?: () => void; // refetch data
4
  storageStateKeys?: (keyof TableState)[] | '*'; // state keys need to be stored, used with Status2StorageFeature
5
  manual?: boolean; // whether to manually control the data
6
  enable?: {
7
    // whether to enable some features
8
    pagination?: boolean; // whether to enable pagination
9
    toolbar?: boolean; // whether to enable toolbar
10
    visible?: boolean; // whether to enable hidden columns
11
    filters?: boolean; // whether to enable filters
12
  };
13
  enableDefault?: {
14
    // whether to enable default functions
15
    toolbar?: boolean; // toolbar default functions, including multi-selection display, multi-selection operation status switching, etc.
16
    th?: boolean; // when th is more than one line, enable border
17
  };
18
  getProps?: {
19
    // custom props of each component in BaseTable, can be returned by function. Refer to BaseTable for the props of each component
20
    filters?: (table: Table<TData>) => BaseTable.ToolbarProps['filterProps'];
21
    toolbar?: (
22
      table: Table<TData>
23
    ) => Partial<Omit<BaseTable.ToolbarProps, 'filtersProps' | 'enableFilters'>>;
24
    table?: (table: Table<TData>) => Partial<BaseTable.TableProps>;
25
    th?: (
26
      table: Table<TData>,
27
      header: Header<TData, unknown>
28
    ) => Omit<BaseTable.TableCellProps, 'ref'>;
29
    pagination?: (table: Table<TData>) => Partial<BaseTable.BaseTablePaginationProps> & {
30
      total?: number;
31
    };
32
    tr?: (table: Table<TData>, row: Row<TData>) => Partial<BaseTable.TableRowProps>;
33
    td?: (table: Table<TData>, props: Record<string, any>) => Omit<BaseTable.TableCellProps, 'ref'>;
34
    empty?: () => Partial<BaseTable.TableFilteredEmptyProps>;
35
  };
36

37
  registerHandlers?: StateHandler[];
38
}

options.meta.registerHandlers

Extend the state processing function of the table by registering through registerHandlers.

When stateKeys is '*', all state changes are listened to through useEffect. When (keyof TableState[]), state changes are listened to through onXXXChange.

handleName and callback are optional, and callback has a higher priority than handleName.

1
interface StateHandler {
2
  handlerName?: string; // options 中的方法名
3
  stateKeys: (keyof TableState)[] | '*'; // 监听的状态
4
  callback?: (state: Partial<TableState>) => void; // 状态变化时的回调
5
}

options.columns

Customize column configuration by setting column.meta

1
interface ColumnMeta<TData extends RowData, TValue = unknown> {
2
  description?: Record<string, any>; // icon ? tooltip props
3
  // filterOptions?: { key: string; label: React.ReactNode }[]; // filter options
4
  selectType?: 'single' | 'multiple'; // multiple selection type
5
  sortable?: boolean; // whether it can be sorted
6
  searchKey?: string; // custom search key
7
  th?: Partial<BaseTable.TableCellProps>; // baseTable th props, priority is higher than getProps.th
8
  td?: Partial<BaseTable.TableCellProps>; //baseTable td props, priority is higher than getProps.td
9
}

Feature

Status2StorageFeature

After being added to _features, the fields in the configured state are stored in localStorage by default. getDefaultTableOptions will automatically register this feature.

options.state2Storage The method of converting state to storage, the method of converting state to storage.
options.storage2State The method of converting storage to state, the method of converting storage to state.
options.meta.storageKeys Fields that need to be stored.

1
// storageKey field consists of kube-table-${tableName}-state
2
interface StorageStateOptions {
3
  storage2State?: (storageKey: string) => Partial<TableState>;
4
  state2Storage?: (storageKey: string, state: Partial<TableState>) => void;
5
}
6

7
interface TableMeta<TData extends RowData> {
8
  storageKeys?: Array<keyof TableState>;
9
  tableName: string;
10
}

getDefaultTableOptions(config)

Quickly generate default options configuration

1
**config**:
2

3
```ts
4
interface Config {
5
  tableName: string;
6
  manual: boolean; // whether to manually control the data
7
  enableToolbar?: boolean; // whether to enable toolbar
8
  enablePagination?: boolean; // whether to enable pagination
9
  enableVisible?: boolean; // whether to enable hidden columns
10
  enableFilters?: boolean; // whether to enable filters
11
  enableStateToStorage?: boolean; // whether to store state to storage, used with options.meta.storageKeys
12
  enableSelection?: boolean; // whether to enable selection
13
  enableSort?: boolean; // whether to enable sorting
14
  enableMultiSelection?: boolean; // whether to enable multi-selection
15
  enableInitParamsByUrl?: boolean; // TODO: whether to enable url parameter initialization (not implemented)
16
  enableParamsToUrl?: boolean; // TODO: whether to enable url parameters (not implemented)
17
}

Default enabled features:

enableFilters
enablePagination
enableToolbar
enableVisible
enableStateToStorage
enableSort

Default enabled Feature:

Status2StorageFeature

Default generated configuration:

1
{
2
  storageStateKeys: ['columnVisibility'],
3
  registerHandlers: manual
4
    ? [
5
        {
6
          handlerName: 'onParamsChange',
7
          stateKeys: ['pagination', 'columnFilters', 'sorting'],
8
        },
9
      ]
10
    : [],
11
}

BaseTable

BaseTable.TableProps

1
interface TableInnerProps {
2
  padding?: 'normal' | 'none';
3
  size?: 'small' | 'medium';
4
  stickyHeader?: boolean; // whether to fix the table header
5
  className?: string;
6
  style?: React.CSSProperties;
7
  tableWrapperClassName?: string;
8
}

BaseTable.TableHeadProps

1
interface TableHeadProps {
2
  className?: string;
3
  style?: React.CSSProperties;
4
  hasBorder?: boolean; // whether the table th has a border
5
}

BaseTable.TableBodyProps

1
interface TableBodyProps {
2
  className?: string;
3
  style?: React.CSSProperties;
4
  hasBorder?: boolean; // whether the td in the table body has a border
5
}

BaseTable.TableRowProps

1
export interface TableRowProps {
2
  className?: string;
3
  hover?: boolean; // whether hover effect
4
  selected?: boolean; // whether selected
5
  style?: React.CSSProperties;
6
}

BaseTable.TableCellProps

1
/**
2
when padding is normal, variant and size correspond to the padding attributeQ
3
  'head-small': '8px 12px',
4
  'head-medium': '16px 12px',
5
  'body-small': '4px 8px',
6
  'body-medium': '8px 12px',
7
*/
8
export type TableCellProps = {
9
  padding?: 'none' | 'normal'; // cell padding
10
  align?: 'left' | 'center' | 'right' | 'justify'; // cell alignment
11
  className?: string;
12
  size?: 'small' | 'medium'; // cell size
13
  ariaSort?: 'asc' | 'desc' | false; // whether to sort
14
  variant?: 'head' | 'body'; // distinguish th and td
15
  stickyHeader?: boolean; // whether to fix the table header
16
  fixed?: 'left' | 'right'; // fixed column
17
  fixedWidth?: number; // width when the column is fixed (when position is sticky; left or right value)
18
  fixedLastLeft?: boolean; // whether it is the most left fixed, mainly used to separate shadow effects
19
  fixedLastRight?: boolean; // whether it is the most right fixed, mainly used to separate shadow effects
20
  style?: React.CSSProperties;
21
  hasBorder?: boolean;
22
};

BaseTable.ToolbarProps

1
interface ToolbarProps {
2
  enableBatchActions: boolean; //  Whether to operate when multiple selections
3
  enableSettingMenu?: boolean; //  Whether to temporarily operate the button
4
  onDisableBatchActions?: () => void; //  Cancel the multi-selection operation box
5
  enableFilters?: boolean; //  Whether to enable filtering
6
  settingMenu?: React.ReactNode; //  Operation list
7
  settingMenuText?: string;
8
  toolbarLeft?: React.ReactNode; //  left component
9
  toolbarRight?: React.ReactNode; //  right component
10
  batchActions?: React.ReactNode; //  Multi-selection operation button
11
  filterProps: {
12
    // FilterInput props
13
    filters?: any;
14
    placeholder?: string;
15
    suggestions: Suggestions;
16
    simpleMode?: boolean;
17
    onChange?: (value: any) => void;
18
    initialKeyword?: string;
19
  };
20
  onFilterInputChange?: (value: any) => void; // FilterInput onChange
21
  refetch?: any; //  refresh
22
  loading?: boolean; //  loading on the refresh button
23
}

BaseTable.EmptyProps

1
//  empty create button props
2
interface CreateButtonProps {
3
  enableCreate?: boolean;
4
  createButton?: ReactElement;
5
  clickCreateButtonFn?: (event: MouseEvent<HTMLButtonElement>) => void;
6
}
7

8
//  data is empty, no filter conditions
9
export type TableEmptyProps = PropsWithChildren<EmptyProps & CreateButtonProps>;
10

11
interface DescriptionProps {
12
  clearAndRefetch?: false | (() => void); //  clear filter conditions
13
  refetch?: false | (() => void); //  refresh
14
}
15

16
//  data is empty, with filter conditions
17
export type TableFilteredEmptyProps = TableEmptyProps & DescriptionProps;

Full example

Name		Info
			More Info
firstName	Last Name	Age	Visits	Status	Profile Progress

Limit:10Total:100

1 / 10

{
  "pagination": {
    "pageIndex": 0,
    "pageSize": 10
  },
  "columnFilters": [],
  "sorting": [],
  "rowSelection": {}
}

import { Table, DataTable, Dropdown, Menu } from '@kubed/components;';

export const App = () => {
  const defaultColumns = React.useMemo(
    () => [
      {
        header: 'Name',
        footer: (props) => props.column.id,
        columns: [
          {
            accessorFn: (row) => {
              return row.firstName;
            },
            accessorKey: 'firstName',
            cell: (info) => info.getValue(),
            footer: (props) => props.column.id,
          },
          {
            accessorFn: (row) => row.lastName,
            id: 'lastName',
            cell: (info) => info.getValue(),
            header: () => <span>Last Name</span>,
            footer: (props) => props.column.id,
            enableHiding: true,
          },
        ],
      },
      {
        header: 'Info',
        footer: (props) => props.column.id,
        columns: [
          {
            accessorKey: 'age',
            header: () => 'Age',
            footer: (props) => props.column.id,
            meta: {
              sortable: true,
            },
          },
          {
            header: 'More Info',
            columns: [
              {
                accessorKey: 'visits',
                header: () => <span>Visits</span>,
                footer: (props) => props.column.id,
              },
              {
                accessorKey: 'status',
                header: 'Status',
                footer: (props) => props.column.id,
                meta: {
                  searchKey: 'status1',
                },
              },
              {
                accessorKey: 'progress',
                header: 'Profile Progress',
                footer: (props) => props.column.id,
              },
            ],
          },
        ],
      },
      {
        id: 'actions',
        cell: () => (
          <Dropdown
            content={
              <Menu>
                <MenuItem>Edit</MenuItem>
              </Menu>
            }
          >
            <Button variant="text" radius="lg">
              More
            </Button>
          </Dropdown>
        ),
      },
    ],
    []
  );

  const [params, setParams] = React.useState({
    pagination: {
      pageIndex: 0,
      pageSize: 10,
    },
    columnFilters: [],
    sorting: [],
  });
  const { pagination = {} } = params;
  const [rowSelection, setRowSelection] = React.useState({}); //manage your own row selection state

  const handleParams = (p, key) => {
    setRowSelection({});
    const { pagination: page } = p;
    if (key === 'pagination') {
      setParams(p);
    } else {
      setParams({
        ...p,
        pagination: {
          ...page,
          pageIndex: 0,
        },
      });
    }
  };
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, [params]);
  const [columns] = React.useState(() => [
    {
      id: 'selection',
      header: ({ table }) => (
        <Checkbox
          checked={table.getIsAllRowsSelected()}
          indeterminate={table.getIsSomeRowsSelected()}
          onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
        />
      ),
      cell: ({ row }) => (
        <Checkbox
          checked={row.getIsSelected()}
          disabled={!row.getCanSelect()}
          onChange={row.getToggleSelectedHandler()}
        />
      ),
    },
    ...defaultColumns,
  ]);
  const total = 100;
  const data = React.useMemo(() => {
    if (loading) {
      return [];
    }
    return Array.from({ length: pagination.pageSize })
      .fill(1)
      .map((_, i) => {
        return {
          firstName: `page-${pagination.pageIndex}-firstName-${i}`,
          lastName: `lastName-${i}`,
          age: i,
          visits: i,
          status: `status-${i}`,
          progress: i,
        };
      });
  }, [params, loading]);

  const state = React.useMemo(() => {
    return {
      ...params,
      rowSelection,
    };
  }, [params, rowSelection]);

  const forceUpdate = React.useReducer(() => ({}), {})[1];

  const defaultOption = React.useState(
    DataTable.getDefaultTableOptions({
      tableName: 'table1',
      manual: true,
      enableSelection: true,
      enableMultiSelection: true,
    })
  )[0];

  const table = DataTable.useTable({
    ...defaultOption,
    data,
    loading,
    columns,
    onRowSelectionChange: setRowSelection,
    onParamsChange: handleParams,
    rowCount: total,
    //  getRowId: (row) => row.firstName,
    state,
    meta: {
      ...defaultOption.meta,
      tableName: defaultOption.meta.tableName,
      getProps: {
        filters: () => {
          return {
            simpleMode: false,
            suggestions: [
              {
                key: 'age',
                label: 'Age',
                options: [
                  {
                    key: '0',
                    label: '0',
                  },
                  {
                    key: '1',
                    label: '1',
                  },
                ],
              },
              {
                key: 'status1',
                label: 'Status',
                options: [
                  {
                    key: 'status-0',
                    label: 'status-0',
                  },
                  {
                    key: 'status-1',
                    label: 'status-1',
                  },
                ],
              },
            ],
          };
        },
      },
    },
  });

  return (
    <>
      <Table table={table} />
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </>
  );
};

1
import { Table, DataTable, Dropdown, Menu } from '@kubed/components;';
2

3
export const App = () => {
4
  const defaultColumns = React.useMemo(
5
    () => [
6
      {
7
        header: 'Name',
8
        footer: (props) => props.column.id,
9
        columns: [
10
          {
11
            accessorFn: (row) => {
12
              return row.firstName;
13
            },
14
            accessorKey: 'firstName',
15
            cell: (info) => info.getValue(),
16
            footer: (props) => props.column.id,
17
          },
18
          {
19
            accessorFn: (row) => row.lastName,
20
            id: 'lastName',
21
            cell: (info) => info.getValue(),
22
            header: () => <span>Last Name</span>,
23
            footer: (props) => props.column.id,
24
            enableHiding: true,
25
          },
26
        ],
27
      },
28
      {
29
        header: 'Info',
30
        footer: (props) => props.column.id,
31
        columns: [
32
          {
33
            accessorKey: 'age',
34
            header: () => 'Age',
35
            footer: (props) => props.column.id,
36
            meta: {
37
              sortable: true,
38
            },
39
          },
40
          {
41
            header: 'More Info',
42
            columns: [
43
              {
44
                accessorKey: 'visits',
45
                header: () => <span>Visits</span>,
46
                footer: (props) => props.column.id,
47
              },
48
              {
49
                accessorKey: 'status',
50
                header: 'Status',
51
                footer: (props) => props.column.id,
52
                meta: {
53
                  searchKey: 'status1',
54
                },
55
              },
56
              {
57
                accessorKey: 'progress',
58
                header: 'Profile Progress',
59
                footer: (props) => props.column.id,
60
              },
61
            ],
62
          },
63
        ],
64
      },
65
      {
66
        id: 'actions',
67
        cell: () => (
68
          <Dropdown
69
            content={
70
              <Menu>
71
                <MenuItem>Edit</MenuItem>
72
              </Menu>
73
            }
74
          >
75
            <Button variant="text" radius="lg">
76
              More
77
            </Button>
78
          </Dropdown>
79
        ),
80
      },
81
    ],
82
    []
83
  );
84

85
  const [params, setParams] = React.useState({
86
    pagination: {
87
      pageIndex: 0,
88
      pageSize: 10,
89
    },
90
    columnFilters: [],
91
    sorting: [],
92
  });
93
  const { pagination = {} } = params;
94
  const [rowSelection, setRowSelection] = React.useState({}); //manage your own row selection state
95

96
  const handleParams = (p, key) => {
97
    setRowSelection({});
98
    const { pagination: page } = p;
99
    if (key === 'pagination') {
100
      setParams(p);
101
    } else {
102
      setParams({
103
        ...p,
104
        pagination: {
105
          ...page,
106
          pageIndex: 0,
107
        },
108
      });
109
    }
110
  };
111
  const [loading, setLoading] = React.useState(true);
112
  React.useEffect(() => {
113
    setLoading(true);
114
    setTimeout(() => {
115
      setLoading(false);
116
    }, 2000);
117
  }, [params]);
118
  const [columns] = React.useState(() => [
119
    {
120
      id: 'selection',
121
      header: ({ table }) => (
122
        <Checkbox
123
          checked={table.getIsAllRowsSelected()}
124
          indeterminate={table.getIsSomeRowsSelected()}
125
          onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
126
        />
127
      ),
128
      cell: ({ row }) => (
129
        <Checkbox
130
          checked={row.getIsSelected()}
131
          disabled={!row.getCanSelect()}
132
          onChange={row.getToggleSelectedHandler()}
133
        />
134
      ),
135
    },
136
    ...defaultColumns,
137
  ]);
138
  const total = 100;
139
  const data = React.useMemo(() => {
140
    if (loading) {
141
      return [];
142
    }
143
    return Array.from({ length: pagination.pageSize })
144
      .fill(1)
145
      .map((_, i) => {
146
        return {
147
          firstName: `page-${pagination.pageIndex}-firstName-${i}`,
148
          lastName: `lastName-${i}`,
149
          age: i,
150
          visits: i,
151
          status: `status-${i}`,
152
          progress: i,
153
        };
154
      });
155
  }, [params, loading]);
156

157
  const state = React.useMemo(() => {
158
    return {
159
      ...params,
160
      rowSelection,
161
    };
162
  }, [params, rowSelection]);
163

164
  const forceUpdate = React.useReducer(() => ({}), {})[1];
165

166
  const defaultOption = React.useState(
167
    DataTable.getDefaultTableOptions({
168
      tableName: 'table1',
169
      manual: true,
170
      enableSelection: true,
171
      enableMultiSelection: true,
172
    })
173
  )[0];
174

175
  const table = DataTable.useTable({
176
    ...defaultOption,
177
    data,
178
    loading,
179
    columns,
180
    onRowSelectionChange: setRowSelection,
181
    onParamsChange: handleParams,
182
    rowCount: total,
183
    //  getRowId: (row) => row.firstName,
184
    state,
185
    meta: {
186
      ...defaultOption.meta,
187
      tableName: defaultOption.meta.tableName,
188
      getProps: {
189
        filters: () => {
190
          return {
191
            simpleMode: false,
192
            suggestions: [
193
              {
194
                key: 'age',
195
                label: 'Age',
196
                options: [
197
                  {
198
                    key: '0',
199
                    label: '0',
200
                  },
201
                  {
202
                    key: '1',
203
                    label: '1',
204
                  },
205
                ],
206
              },
207
              {
208
                key: 'status1',
209
                label: 'Status',
210
                options: [
211
                  {
212
                    key: 'status-0',
213
                    label: 'status-0',
214
                  },
215
                  {
216
                    key: 'status-1',
217
                    label: 'status-1',
218
                  },
219
                ],
220
              },
221
            ],
222
          };
223
        },
224
      },
225
    },
226
  });
227

228
  return (
229
    <>
230
      <Table table={table} />
231
      <pre>{JSON.stringify(state, null, 2)}</pre>
232
    </>
233
  );
234
};
235

Base Table

BaseTable is a basic table component that provides some fundamental table components, such as Table, TableHead, TableBody, TableRow, TableCell.

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

import { BaseTable } from '@kubed/components';
() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Cell 4</TableCell>
            <TableCell>Cell 5</TableCell>
            <TableCell>Cell 6</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
};

1
import { BaseTable } from '@kubed/components';
2
() => {
3
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
4
  return (
5
    <>
6
      <Table>
7
        <TableHead>
8
          <TableRow>
9
            <TableCell>Header 1</TableCell>
10
            <TableCell>Header 2</TableCell>
11
            <TableCell>Header 3</TableCell>
12
          </TableRow>
13
        </TableHead>
14
        <TableBody>
15
          <TableRow>
16
            <TableCell>Cell 1</TableCell>
17
            <TableCell>Cell 2</TableCell>
18
            <TableCell>Cell 3</TableCell>
19
          </TableRow>
20
          <TableRow>
21
            <TableCell>Cell 4</TableCell>
22
            <TableCell>Cell 5</TableCell>
23
            <TableCell>Cell 6</TableCell>
24
          </TableRow>
25
        </TableBody>
26
      </Table>
27
    </>
28
  );
29
};
30

baseTable selected

	Header 1	Header 2	Header 3
	Cell 1	Cell 2	Cell 3
	Cell 4	Cell 5	Cell 6

import { BaseTable } from '@kubed/components';

() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  const [selectIds, setSelectIds] = React.useState([]);
  const handleSelect = (id) => {
    setSelectIds((ids) => {
      if (ids.includes(id)) {
        return ids.filter((i) => i !== id);
      }
      return [...ids, id];
    });
  };
  return (
    <>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>
              <Checkbox
                checked={selectIds.length > 0 && selectIds.length === 2}
                indeterminate={selectIds.length > 0 && selectIds.length < 2}
                onChange={() => {
                  if (selectIds.length > 0) {
                    setSelectIds([]);
                  } else {
                    setSelectIds(['1', '2']);
                  }
                }}
              />
            </TableCell>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow selected={selectIds.includes('1')}>
            <TableCell>
              <Checkbox checked={selectIds.includes('1')} onChange={() => handleSelect('1')} />
            </TableCell>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
          </TableRow>
          <TableRow selected={selectIds.includes('2')}>
            <TableCell>
              <Checkbox checked={selectIds.includes('2')} onChange={() => handleSelect('2')} />
            </TableCell>
            <TableCell>Cell 4</TableCell>
            <TableCell>Cell 5</TableCell>
            <TableCell>Cell 6</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </>
  );
};

1
import { BaseTable } from '@kubed/components';
2

3
() => {
4
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
5
  const [selectIds, setSelectIds] = React.useState([]);
6
  const handleSelect = (id) => {
7
    setSelectIds((ids) => {
8
      if (ids.includes(id)) {
9
        return ids.filter((i) => i !== id);
10
      }
11
      return [...ids, id];
12
    });
13
  };
14
  return (
15
    <>
16
      <Table>
17
        <TableHead>
18
          <TableRow>
19
            <TableCell>
20
              <Checkbox
21
                checked={selectIds.length > 0 && selectIds.length === 2}
22
                indeterminate={selectIds.length > 0 && selectIds.length < 2}
23
                onChange={() => {
24
                  if (selectIds.length > 0) {
25
                    setSelectIds([]);
26
                  } else {
27
                    setSelectIds(['1', '2']);
28
                  }
29
                }}
30
              />
31
            </TableCell>
32
            <TableCell>Header 1</TableCell>
33
            <TableCell>Header 2</TableCell>
34
            <TableCell>Header 3</TableCell>
35
          </TableRow>
36
        </TableHead>
37
        <TableBody>
38
          <TableRow selected={selectIds.includes('1')}>
39
            <TableCell>
40
              <Checkbox checked={selectIds.includes('1')} onChange={() => handleSelect('1')} />
41
            </TableCell>
42
            <TableCell>Cell 1</TableCell>
43
            <TableCell>Cell 2</TableCell>
44
            <TableCell>Cell 3</TableCell>
45
          </TableRow>
46
          <TableRow selected={selectIds.includes('2')}>
47
            <TableCell>
48
              <Checkbox checked={selectIds.includes('2')} onChange={() => handleSelect('2')} />
49
            </TableCell>
50
            <TableCell>Cell 4</TableCell>
51
            <TableCell>Cell 5</TableCell>
52
            <TableCell>Cell 6</TableCell>
53
          </TableRow>
54
        </TableBody>
55
      </Table>
56
    </>
57
  );
58
};
59

Header 1		Header 2
Header 1	Header 2	Header 3
0	col2-0	col3-0
1	col2-1	col3-1
2	col2-2	col3-2
3	col2-3	col3-3
4	col2-4	col3-4
5	col2-5	col3-5
6	col2-6	col3-6
7	col2-7	col3-7
8	col2-8	col3-8
9	col2-9	col3-9
10	col2-10	col3-10
11	col2-11	col3-11
12	col2-12	col3-12
13	col2-13	col3-13
14	col2-14	col3-14
15	col2-15	col3-15
16	col2-16	col3-16
17	col2-17	col3-17
18	col2-18	col3-18
19	col2-19	col3-19
20	col2-20	col3-20
21	col2-21	col3-21
22	col2-22	col3-22
23	col2-23	col3-23
24	col2-24	col3-24
25	col2-25	col3-25
26	col2-26	col3-26
27	col2-27	col3-27
28	col2-28	col3-28
29	col2-29	col3-29
30	col2-30	col3-30
31	col2-31	col3-31
32	col2-32	col3-32
33	col2-33	col3-33
34	col2-34	col3-34
35	col2-35	col3-35
36	col2-36	col3-36
37	col2-37	col3-37
38	col2-38	col3-38
39	col2-39	col3-39
40	col2-40	col3-40
41	col2-41	col3-41
42	col2-42	col3-42
43	col2-43	col3-43
44	col2-44	col3-44
45	col2-45	col3-45
46	col2-46	col3-46
47	col2-47	col3-47
48	col2-48	col3-48
49	col2-49	col3-49
50	col2-50	col3-50
51	col2-51	col3-51
52	col2-52	col3-52
53	col2-53	col3-53
54	col2-54	col3-54
55	col2-55	col3-55
56	col2-56	col3-56
57	col2-57	col3-57
58	col2-58	col3-58
59	col2-59	col3-59
60	col2-60	col3-60
61	col2-61	col3-61
62	col2-62	col3-62
63	col2-63	col3-63
64	col2-64	col3-64
65	col2-65	col3-65
66	col2-66	col3-66
67	col2-67	col3-67
68	col2-68	col3-68
69	col2-69	col3-69
70	col2-70	col3-70
71	col2-71	col3-71
72	col2-72	col3-72
73	col2-73	col3-73
74	col2-74	col3-74
75	col2-75	col3-75
76	col2-76	col3-76
77	col2-77	col3-77
78	col2-78	col3-78
79	col2-79	col3-79
80	col2-80	col3-80
81	col2-81	col3-81
82	col2-82	col3-82
83	col2-83	col3-83
84	col2-84	col3-84
85	col2-85	col3-85
86	col2-86	col3-86
87	col2-87	col3-87
88	col2-88	col3-88
89	col2-89	col3-89
90	col2-90	col3-90
91	col2-91	col3-91
92	col2-92	col3-92
93	col2-93	col3-93
94	col2-94	col3-94
95	col2-95	col3-95
96	col2-96	col3-96
97	col2-97	col3-97
98	col2-98	col3-98
99	col2-99	col3-99

import { BaseTable } from '@kubed/components';
import * as React from 'react';

() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  const data = React.useMemo(() => {
    return [...Array(100)].fill(1).map((_, i) => ({
      col1: i,
      col2: `col2-${i}`,
      col3: `col3-${i}`,
    }));
  }, []);
  return (
    <div
      style={{
        height: '300px',
        overflowY: 'auto',
      }}
    >
      <Table stickyHeader>
        <TableHead hasBorder>
          <TableRow>
            <TableCell colSpan={2}>Header 1</TableCell>
            <TableCell colSpan={1}>Header 2</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody hasBorder>
          {data.map((row) => (
            <TableRow key={row.col1}>
              <TableCell>{row.col1}</TableCell>
              <TableCell>{row.col2}</TableCell>
              <TableCell>{row.col3}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

1
import { BaseTable } from '@kubed/components';
2
import * as React from 'react';
3

4
() => {
5
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
6
  const data = React.useMemo(() => {
7
    return [...Array(100)].fill(1).map((_, i) => ({
8
      col1: i,
9
      col2: `col2-${i}`,
10
      col3: `col3-${i}`,
11
    }));
12
  }, []);
13
  return (
14
    <div
15
      style={{
16
        height: '300px',
17
        overflowY: 'auto',
18
      }}
19
    >
20
      <Table stickyHeader>
21
        <TableHead hasBorder>
22
          <TableRow>
23
            <TableCell colSpan={2}>Header 1</TableCell>
24
            <TableCell colSpan={1}>Header 2</TableCell>
25
          </TableRow>
26
          <TableRow>
27
            <TableCell>Header 1</TableCell>
28
            <TableCell>Header 2</TableCell>
29
            <TableCell>Header 3</TableCell>
30
          </TableRow>
31
        </TableHead>
32
        <TableBody hasBorder>
33
          {data.map((row) => (
34
            <TableRow key={row.col1}>
35
              <TableCell>{row.col1}</TableCell>
36
              <TableCell>{row.col2}</TableCell>
37
              <TableCell>{row.col3}</TableCell>
38
            </TableRow>
39
          ))}
40
        </TableBody>
41
      </Table>
42
    </div>
43
  );
44
};
45

BaseTable Column Fixed

Header 1	Header 2	Header 3	Header 3	Header 3	Header 3
0	col2-0	col3-0	col3-0	col3-0	col3-0
1	col2-1	col3-1	col3-1	col3-1	col3-1
2	col2-2	col3-2	col3-2	col3-2	col3-2
3	col2-3	col3-3	col3-3	col3-3	col3-3
4	col2-4	col3-4	col3-4	col3-4	col3-4
5	col2-5	col3-5	col3-5	col3-5	col3-5
6	col2-6	col3-6	col3-6	col3-6	col3-6
7	col2-7	col3-7	col3-7	col3-7	col3-7
8	col2-8	col3-8	col3-8	col3-8	col3-8
9	col2-9	col3-9	col3-9	col3-9	col3-9
10	col2-10	col3-10	col3-10	col3-10	col3-10
11	col2-11	col3-11	col3-11	col3-11	col3-11
12	col2-12	col3-12	col3-12	col3-12	col3-12
13	col2-13	col3-13	col3-13	col3-13	col3-13
14	col2-14	col3-14	col3-14	col3-14	col3-14
15	col2-15	col3-15	col3-15	col3-15	col3-15
16	col2-16	col3-16	col3-16	col3-16	col3-16
17	col2-17	col3-17	col3-17	col3-17	col3-17
18	col2-18	col3-18	col3-18	col3-18	col3-18
19	col2-19	col3-19	col3-19	col3-19	col3-19
20	col2-20	col3-20	col3-20	col3-20	col3-20
21	col2-21	col3-21	col3-21	col3-21	col3-21
22	col2-22	col3-22	col3-22	col3-22	col3-22
23	col2-23	col3-23	col3-23	col3-23	col3-23
24	col2-24	col3-24	col3-24	col3-24	col3-24
25	col2-25	col3-25	col3-25	col3-25	col3-25
26	col2-26	col3-26	col3-26	col3-26	col3-26
27	col2-27	col3-27	col3-27	col3-27	col3-27
28	col2-28	col3-28	col3-28	col3-28	col3-28
29	col2-29	col3-29	col3-29	col3-29	col3-29
30	col2-30	col3-30	col3-30	col3-30	col3-30
31	col2-31	col3-31	col3-31	col3-31	col3-31
32	col2-32	col3-32	col3-32	col3-32	col3-32
33	col2-33	col3-33	col3-33	col3-33	col3-33
34	col2-34	col3-34	col3-34	col3-34	col3-34
35	col2-35	col3-35	col3-35	col3-35	col3-35
36	col2-36	col3-36	col3-36	col3-36	col3-36
37	col2-37	col3-37	col3-37	col3-37	col3-37
38	col2-38	col3-38	col3-38	col3-38	col3-38
39	col2-39	col3-39	col3-39	col3-39	col3-39
40	col2-40	col3-40	col3-40	col3-40	col3-40
41	col2-41	col3-41	col3-41	col3-41	col3-41
42	col2-42	col3-42	col3-42	col3-42	col3-42
43	col2-43	col3-43	col3-43	col3-43	col3-43
44	col2-44	col3-44	col3-44	col3-44	col3-44
45	col2-45	col3-45	col3-45	col3-45	col3-45
46	col2-46	col3-46	col3-46	col3-46	col3-46
47	col2-47	col3-47	col3-47	col3-47	col3-47
48	col2-48	col3-48	col3-48	col3-48	col3-48
49	col2-49	col3-49	col3-49	col3-49	col3-49
50	col2-50	col3-50	col3-50	col3-50	col3-50
51	col2-51	col3-51	col3-51	col3-51	col3-51
52	col2-52	col3-52	col3-52	col3-52	col3-52
53	col2-53	col3-53	col3-53	col3-53	col3-53
54	col2-54	col3-54	col3-54	col3-54	col3-54
55	col2-55	col3-55	col3-55	col3-55	col3-55
56	col2-56	col3-56	col3-56	col3-56	col3-56
57	col2-57	col3-57	col3-57	col3-57	col3-57
58	col2-58	col3-58	col3-58	col3-58	col3-58
59	col2-59	col3-59	col3-59	col3-59	col3-59
60	col2-60	col3-60	col3-60	col3-60	col3-60
61	col2-61	col3-61	col3-61	col3-61	col3-61
62	col2-62	col3-62	col3-62	col3-62	col3-62
63	col2-63	col3-63	col3-63	col3-63	col3-63
64	col2-64	col3-64	col3-64	col3-64	col3-64
65	col2-65	col3-65	col3-65	col3-65	col3-65
66	col2-66	col3-66	col3-66	col3-66	col3-66
67	col2-67	col3-67	col3-67	col3-67	col3-67
68	col2-68	col3-68	col3-68	col3-68	col3-68
69	col2-69	col3-69	col3-69	col3-69	col3-69
70	col2-70	col3-70	col3-70	col3-70	col3-70
71	col2-71	col3-71	col3-71	col3-71	col3-71
72	col2-72	col3-72	col3-72	col3-72	col3-72
73	col2-73	col3-73	col3-73	col3-73	col3-73
74	col2-74	col3-74	col3-74	col3-74	col3-74
75	col2-75	col3-75	col3-75	col3-75	col3-75
76	col2-76	col3-76	col3-76	col3-76	col3-76
77	col2-77	col3-77	col3-77	col3-77	col3-77
78	col2-78	col3-78	col3-78	col3-78	col3-78
79	col2-79	col3-79	col3-79	col3-79	col3-79
80	col2-80	col3-80	col3-80	col3-80	col3-80
81	col2-81	col3-81	col3-81	col3-81	col3-81
82	col2-82	col3-82	col3-82	col3-82	col3-82
83	col2-83	col3-83	col3-83	col3-83	col3-83
84	col2-84	col3-84	col3-84	col3-84	col3-84
85	col2-85	col3-85	col3-85	col3-85	col3-85
86	col2-86	col3-86	col3-86	col3-86	col3-86
87	col2-87	col3-87	col3-87	col3-87	col3-87
88	col2-88	col3-88	col3-88	col3-88	col3-88
89	col2-89	col3-89	col3-89	col3-89	col3-89
90	col2-90	col3-90	col3-90	col3-90	col3-90
91	col2-91	col3-91	col3-91	col3-91	col3-91
92	col2-92	col3-92	col3-92	col3-92	col3-92
93	col2-93	col3-93	col3-93	col3-93	col3-93
94	col2-94	col3-94	col3-94	col3-94	col3-94
95	col2-95	col3-95	col3-95	col3-95	col3-95
96	col2-96	col3-96	col3-96	col3-96	col3-96
97	col2-97	col3-97	col3-97	col3-97	col3-97
98	col2-98	col3-98	col3-98	col3-98	col3-98
99	col2-99	col3-99	col3-99	col3-99	col3-99

import { BaseTable } from '@kubed/components';
import * as React from 'react';

() => {
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
  const data = React.useMemo(() => {
    return [...Array(100)].fill(1).map((_, i) => ({
      col1: i,
      col2: `col2-${i}`,
      col3: `col3-${i}`,
    }));
  }, []);
  return (
    <div
      style={{
        height: '300px',
        overflow: 'auto',
        width: 500,
      }}
    >
      <Table
        stickyHeader
        style={{
          width: 700,
          minWidth: '100%',
        }}
      >
        <colgroup>
          <col width="100" />
          <col width="200" />
          <col />
          <col />
          <col />
          <col width="100" />
        </colgroup>
        <TableHead hasBorder>
          <TableRow>
            <TableCell fixed="left" fixedWidth={0} width={100}>
              Header 1
            </TableCell>
            <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
              Header 2
            </TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell fixed="right" fixedLastRight fixedWidth={0}>
              Header 3
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody hasBorder>
          {data.map((row) => (
            <TableRow key={row.col1}>
              <TableCell fixed="left" fixedWidth={0}>
                {row.col1}
              </TableCell>
              <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
                <div> {row.col2}</div>
              </TableCell>
              <TableCell>
                <div>{row.col3}</div>
              </TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell fixed="right" fixedLastRight fixedWidth={0}>
                {row.col3}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

1
import { BaseTable } from '@kubed/components';
2
import * as React from 'react';
3

4
() => {
5
  const { Table, TableHead, TableBody, TableRow, TableCell } = BaseTable;
6
  const data = React.useMemo(() => {
7
    return [...Array(100)].fill(1).map((_, i) => ({
8
      col1: i,
9
      col2: `col2-${i}`,
10
      col3: `col3-${i}`,
11
    }));
12
  }, []);
13
  return (
14
    <div
15
      style={{
16
        height: '300px',
17
        overflow: 'auto',
18
        width: 500,
19
      }}
20
    >
21
      <Table
22
        stickyHeader
23
        style={{
24
          width: 700,
25
          minWidth: '100%',
26
        }}
27
      >
28
        <colgroup>
29
          <col width="100" />
30
          <col width="200" />
31
          <col />
32
          <col />
33
          <col />
34
          <col width="100" />
35
        </colgroup>
36
        <TableHead hasBorder>
37
          <TableRow>
38
            <TableCell fixed="left" fixedWidth={0} width={100}>
39
              Header 1
40
            </TableCell>
41
            <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
42
              Header 2
43
            </TableCell>
44
            <TableCell>Header 3</TableCell>
45
            <TableCell>Header 3</TableCell>
46
            <TableCell>Header 3</TableCell>
47
            <TableCell fixed="right" fixedLastRight fixedWidth={0}>
48
              Header 3
49
            </TableCell>
50
          </TableRow>
51
        </TableHead>
52
        <TableBody hasBorder>
53
          {data.map((row) => (
54
            <TableRow key={row.col1}>
55
              <TableCell fixed="left" fixedWidth={0}>
56
                {row.col1}
57
              </TableCell>
58
              <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
59
                <div> {row.col2}</div>
60
              </TableCell>
61
              <TableCell>
62
                <div>{row.col3}</div>
63
              </TableCell>
64
              <TableCell>{row.col3}</TableCell>
65
              <TableCell>{row.col3}</TableCell>
66
              <TableCell fixed="right" fixedLastRight fixedWidth={0}>
67
                {row.col3}
68
              </TableCell>
69
            </TableRow>
70
          ))}
71
        </TableBody>
72
      </Table>
73
    </div>
74
  );
75
};
76

BaseTable Pagination

Limit:10Total:100

1 / 10

import { BaseTable } from '@kubed/components';
import * as React from 'react';

() => {
  const [state, setState] = React.useState({});
  return <BaseTable.Pagination total={100} pagination={state} onChange={setState} />;
};

1
import { BaseTable } from '@kubed/components';
2
import * as React from 'react';
3

4
() => {
5
  const [state, setState] = React.useState({});
6
  return <BaseTable.Pagination total={100} pagination={state} onChange={setState} />;
7
};
8

Header 2	Header 3	Header 3	Header 3	Header 3
page-1-col2-0	page-1-col3-0	page-1-col3-0	page-1-col3-0	page-1-col3-0
page-1-col2-1	page-1-col3-1	page-1-col3-1	page-1-col3-1	page-1-col3-1
page-1-col2-2	page-1-col3-2	page-1-col3-2	page-1-col3-2	page-1-col3-2
page-1-col2-3	page-1-col3-3	page-1-col3-3	page-1-col3-3	page-1-col3-3
page-1-col2-4	page-1-col3-4	page-1-col3-4	page-1-col3-4	page-1-col3-4
page-1-col2-5	page-1-col3-5	page-1-col3-5	page-1-col3-5	page-1-col3-5
page-1-col2-6	page-1-col3-6	page-1-col3-6	page-1-col3-6	page-1-col3-6
page-1-col2-7	page-1-col3-7	page-1-col3-7	page-1-col3-7	page-1-col3-7
page-1-col2-8	page-1-col3-8	page-1-col3-8	page-1-col3-8	page-1-col3-8
page-1-col2-9	page-1-col3-9	page-1-col3-9	page-1-col3-9	page-1-col3-9

Limit:10Total:100

1 / 10

import { BaseTable } from '@kubed/components';
import * as React from 'react';

() => {
  const { Table, TableHead, TableBody, TableRow, TableCell, Toolbar, Pagination } = BaseTable;
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(10);
  const [selectedIds, setSelectedIds] = React.useState([]);

  const handlePaginationChange = (pagination) => {
    setPage(pagination.page);
    setPageSize(pagination.pageSize);
    setSelectedIds([]);
  };

  const data = React.useMemo(() => {
    return [...Array(10)].fill(1).map((_, i) => ({
      col1: `page-${page}-col1-${i}`,
      col2: `page-${page}-col2-${i}`,
      col3: `page-${page}-col3-${i}`,
    }));
  }, [page]);

  const handleSelect = (id) => {
    setSelectedIds((ids) => {
      if (ids.includes(id)) {
        return ids.filter((i) => i !== id);
      }
      return [...ids, id];
    });
  };

  const enableBatchActions = selectedIds.length > 0;
  const setEnableBatchActions = () => {
    setSelectedIds([]);
  };

  return (
    <>
      <Toolbar
        enableBatchActions={enableBatchActions}
        onDisableBatchActions={setEnableBatchActions}
        enableFilters={false}
        filterProps={{
          suggestions: [],
          onChange: () => {},
        }}
        toolbarRight={<div>Toolbar Right</div>}
      />
      <Table
        stickyHeader
        style={{
          width: 700,
          minWidth: '100%',
        }}
      >
        <colgroup>
          <col width="100" />
          <col width="100" />
          <col width="100" />
          <col />
          <col width="100" />
          <col width="100" />
        </colgroup>
        <TableHead>
          <TableRow>
            <TableCell fixed="left" fixedWidth={0}>
              <Checkbox
                checked={selectedIds.length > 0 && selectedIds.length === 2}
                indeterminate={selectedIds.length > 0 && selectedIds.length < 2}
                onChange={() => {
                  if (selectedIds.length > 0) {
                    setSelectedIds([]);
                  } else {
                    setSelectedIds(['1', '2']);
                  }
                }}
              />
            </TableCell>
            <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
              Header 2
            </TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row) => (
            <TableRow key={row.col1} selected={selectedIds.includes(row.col1)}>
              <TableCell fixed="left" fixedWidth={0}>
                <Checkbox
                  checked={selectedIds.includes(row.col1)}
                  onChange={() => handleSelect(row.col1)}
                />
              </TableCell>
              <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
                <div> {row.col2}</div>
              </TableCell>
              <TableCell>
                <div>{row.col3}</div>
              </TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell>{row.col3}</TableCell>
              <TableCell>{row.col3}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Pagination
        total={100}
        pagination={{
          page,
          pageSize,
        }}
        onChange={handlePaginationChange}
      />
    </>
  );
};

1
import { BaseTable } from '@kubed/components';
2
import * as React from 'react';
3

4
() => {
5
  const { Table, TableHead, TableBody, TableRow, TableCell, Toolbar, Pagination } = BaseTable;
6
  const [page, setPage] = React.useState(1);
7
  const [pageSize, setPageSize] = React.useState(10);
8
  const [selectedIds, setSelectedIds] = React.useState([]);
9

10
  const handlePaginationChange = (pagination) => {
11
    setPage(pagination.page);
12
    setPageSize(pagination.pageSize);
13
    setSelectedIds([]);
14
  };
15

16
  const data = React.useMemo(() => {
17
    return [...Array(10)].fill(1).map((_, i) => ({
18
      col1: `page-${page}-col1-${i}`,
19
      col2: `page-${page}-col2-${i}`,
20
      col3: `page-${page}-col3-${i}`,
21
    }));
22
  }, [page]);
23

24
  const handleSelect = (id) => {
25
    setSelectedIds((ids) => {
26
      if (ids.includes(id)) {
27
        return ids.filter((i) => i !== id);
28
      }
29
      return [...ids, id];
30
    });
31
  };
32

33
  const enableBatchActions = selectedIds.length > 0;
34
  const setEnableBatchActions = () => {
35
    setSelectedIds([]);
36
  };
37

38
  return (
39
    <>
40
      <Toolbar
41
        enableBatchActions={enableBatchActions}
42
        onDisableBatchActions={setEnableBatchActions}
43
        enableFilters={false}
44
        filterProps={{
45
          suggestions: [],
46
          onChange: () => {},
47
        }}
48
        toolbarRight={<div>Toolbar Right</div>}
49
      />
50
      <Table
51
        stickyHeader
52
        style={{
53
          width: 700,
54
          minWidth: '100%',
55
        }}
56
      >
57
        <colgroup>
58
          <col width="100" />
59
          <col width="100" />
60
          <col width="100" />
61
          <col />
62
          <col width="100" />
63
          <col width="100" />
64
        </colgroup>
65
        <TableHead>
66
          <TableRow>
67
            <TableCell fixed="left" fixedWidth={0}>
68
              <Checkbox
69
                checked={selectedIds.length > 0 && selectedIds.length === 2}
70
                indeterminate={selectedIds.length > 0 && selectedIds.length < 2}
71
                onChange={() => {
72
                  if (selectedIds.length > 0) {
73
                    setSelectedIds([]);
74
                  } else {
75
                    setSelectedIds(['1', '2']);
76
                  }
77
                }}
78
              />
79
            </TableCell>
80
            <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
81
              Header 2
82
            </TableCell>
83
            <TableCell>Header 3</TableCell>
84
            <TableCell>Header 3</TableCell>
85
            <TableCell>Header 3</TableCell>
86
            <TableCell>Header 3</TableCell>
87
          </TableRow>
88
        </TableHead>
89
        <TableBody>
90
          {data.map((row) => (
91
            <TableRow key={row.col1} selected={selectedIds.includes(row.col1)}>
92
              <TableCell fixed="left" fixedWidth={0}>
93
                <Checkbox
94
                  checked={selectedIds.includes(row.col1)}
95
                  onChange={() => handleSelect(row.col1)}
96
                />
97
              </TableCell>
98
              <TableCell fixed="left" fixedWidth={100} fixedLastLeft>
99
                <div> {row.col2}</div>
100
              </TableCell>
101
              <TableCell>
102
                <div>{row.col3}</div>
103
              </TableCell>
104
              <TableCell>{row.col3}</TableCell>
105
              <TableCell>{row.col3}</TableCell>
106
              <TableCell>{row.col3}</TableCell>
107
            </TableRow>
108
          ))}
109
        </TableBody>
110
      </Table>
111
      <Pagination
112
        total={100}
113
        pagination={{
114
          page,
115
          pageSize,
116
        }}
117
        onChange={handlePaginationChange}
118
      />
119
    </>
120
  );
121
};
122