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

Basic Usage

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

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

Base Table

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

baseTable selected

BaseTable Header Fixed

BaseTable Column Fixed

BaseTable Pagination

BaseTable with toolbar