Table

Table 是一个用于展示数据的表格组件。

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

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

详细 react table 使用请参考 react-table

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 扩展点

useTable(options)

options.meta

table 中大部分扩展点都是通过 meta 进行配置的。

1
interface TableMeta<TData extends RowData> {
2
  tableName: string; // table 名称, 现在仅用于存储状态
3
  refetch?: () => void; // 重新获取数据
4
  storageStateKeys?: (keyof TableState)[] | '*'; // 需要存储的状态字段, 配合 Status2StorageFeature 使用
5
  manual?: boolean; // 是否手动控制数据
6
  enable?: {
7
    // 是否启用某些功能
8
    pagination?: boolean; // 是否启用分页
9
    toolbar?: boolean; // 是否启用工具栏
10
    visible?: boolean; // 是否启用隐藏列
11
    filters?: boolean; // 是否启用过滤
12
  };
13
  enableDefault?: {
14
    // 是否启用默认功能
15
    toolbar?: boolean; // toolbar 默认功能，包含选中显示多选操作状态切换等
16
    th?: boolean; // th 多于一行时，启用 border
17
  };
18
  getProps?: {
19
    // 自定义 BaseTable 中各个组件的 props，可以通过函数返回。各个组件的 props 参考 BaseTable
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

扩展 table 的状态处理函数，通过 registerHandlers 注册。

stateKeys 为 '*' 时，是通过 useEffect 监听所有状态变化。(keyof TableState[]) 时，通过 onXXXChange 监听状态变化。

handleName 和 callback 为可选项，callback 优先级大于 handleName。

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

options.columns

通过设置 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 }[]; // 过滤选项
4
  selectType?: 'single' | 'multiple'; // 多选类型
5
  sortable?: boolean; // 是否可排序
6
  searchKey?: string; // 自定义搜索 key
7
  th?: Partial<BaseTable.TableCellProps>; // baseTable th props，优先级高于 getProps.th
8
  td?: Partial<BaseTable.TableCellProps>; //baseTable td props，优先级高于 getProps.td
9
}

Feature

Status2StorageFeature

加入到 _features 后，默认将配置的 state 中字段存储到 localStorage 中。 getDefaultTableOptions 会自动注册该 feature。

options.state2Storage 状态转换为存储的方法，将 state 转换为存储的方法。
options.storage2State 存储转换为状态的方法，将存储转换为状态的方法。
options.meta.storageKeys 需要存储的字段。

1
// storageKey 字段构成 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)

可快速生成默认 options 配置项

config:

1
interface Config {
2
  tableName: string;
3
  manual: boolean; // 是否手动控制数据
4
  enableToolbar?: boolean; // 是否启用 toolbar
5
  enablePagination?: boolean; // 是否启用分页
6
  enableVisible?: boolean; // 是否启用隐藏列
7
  enableFilters?: boolean; // 是否启用过滤
8
  enableStateToStorage?: boolean; // 是否将 state 存储到 storage，配合 options.meta.storageKeys 使用
9
  enableSelection?: boolean; // 是否启用选择
10
  enableSort?: boolean; // 是否启用排序
11
  enableMultiSelection?: boolean; // 是否启用多选
12
  enableInitParamsByUrl?: boolean; // TODO: 是否启用 url 参数初始化（未实现）
13
  enableParamsToUrl?: boolean; // TODO: 是否启用 url 参数（未实现）
14
}

默认开启功能：

enableFilters
enablePagination
enableToolbar
enableVisible
enableStateToStorage
enableSort

默认启用 Feature：

Status2StorageFeature

默认生成配置：

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; // 是否固定表头
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; // table th 是否有边框
5
}

BaseTable.TableBodyProps

1
interface TableBodyProps {
2
  className?: string;
3
  style?: React.CSSProperties;
4
  hasBorder?: boolean; // table body 中 td 是否有边框
5
}

BaseTable.TableRowProps

1
export interface TableRowProps {
2
  className?: string;
3
  hover?: boolean; // 是否 hover 效果
4
  selected?: boolean; // 是否选中
5
  style?: React.CSSProperties;
6
}

BaseTable.TableCellProps

1
/**
2
   padding 为 normal 时， variant 和 size 对应 padding 属性
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'; // 单元格 padding
10
  align?: 'left' | 'center' | 'right' | 'justify'; // 单元格对齐方式
11
  className?: string;
12
  size?: 'small' | 'medium'; // 单元格大小
13
  ariaSort?: 'asc' | 'desc' | false; // 是否排序
14
  variant?: 'head' | 'body'; // 区分 th 和 td
15
  stickyHeader?: boolean; // 是否固定表头
16
  fixed?: 'left' | 'right'; // 固定列
17
  fixedWidth?: number; // 固定列时的宽度（当 position 为 sticky; left 或者 right 值）
18
  fixedLastLeft?: boolean; // 是否是最左侧的 fixed，主要用于隔断阴影效果
19
  fixedLastRight?: boolean; // 是否是最右侧的 fixed，主要用于隔断阴影效果
20
  style?: React.CSSProperties;
21
  hasBorder?: boolean;
22
};

BaseTable.ToolbarProps

1
interface ToolbarProps {
2
  enableBatchActions: boolean; // 是否多选时操作
3
  enableSettingMenu?: boolean; // 是否暂时操作按钮
4
  onDisableBatchActions?: () => void; // 取消多选操作框
5
  enableFilters?: boolean; // 是否启用过滤
6
  settingMenu?: React.ReactNode; // 操作列表
7
  settingMenuText?: string;
8
  toolbarLeft?: React.ReactNode; // left 组件
9
  toolbarRight?: React.ReactNode; // right 组件
10
  batchActions?: React.ReactNode; // 多选操作按钮
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; // 刷新
22
  loading?: boolean; // 刷新按钮上的 loading
23
}

BaseTable.EmptyProps

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

8
// data 为空，无过滤条件
9
export type TableEmptyProps = PropsWithChildren<EmptyProps & CreateButtonProps>;
10

11
interface DescriptionProps {
12
  clearAndRefetch?: false | (() => void); // 清除过滤条件
13
  refetch?: false | (() => void); // 刷新
14
}
15

16
// data 为空，有过滤条件
17
export type TableFilteredEmptyProps = TableEmptyProps & DescriptionProps;

完整示例

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 是一个基础的表格组件，提供了一些基础的表格组件，如 Table, TableHead, TableBody, TableRow, TableCell。

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

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

BaseTable 顶部固定

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 列固定

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

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

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

布局

常规

信息录入

数据展示

反馈