zent
Version:
一套前端设计语言和基于React的实现
117 lines (98 loc) • 14.8 kB
Markdown
title: Grid
path: component/grid
group: Data Display
## Grid
A table component. `Grid` is implemented using `<table>` tag.
### API
| Property | Descripition | Type | Default | Required |
| --------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -------- | --- |
| columns | columns | array | | Yes |
| datasets | Data to be displayed | array | | Yes |
| rowKey | Key for each row | string | `id` | No |
| tableLayout | Set table-layout property of table | - \| 'auto' \| 'fixed' | | No |
| onChange | Callback fires when columns change, filtering and sorting included | (conf: any) => any | `noop` | No |
| scroll | Can be scrolled in x/y direction, x or y can be a number that indicates the width and height of table body | { x?: number, y?: number } | | No |
| sortBy | The field which rows are sorted by, should be one of keys for columns | string | '' | No |
| sortType | The way to sort | string | '' | No |
| defaultSortType | The way to sort when first click | string | `'desc'` | No |
| emptyLabel | Text to be displayed when there's no data | string | `'No data'` | No |
| selection | Configuration for selection | object | | No |
| expandation | Expand configuration | object | | | no |
| loading | Determines whether data is being loaded or not | bool | `false` | No |
| className | Extra custom class name | string | `''` | No |
| rowClassName | Class name for row | string \| (data: object, rowIndex: number) => string | '' | No |
| pageInfo | Pagination information | object | null | No |
| paginationType | Pagination type, `'default'` \| `'lite'` \| `'mini'` | string | `'default'` | No |
| onRowClick | Callback fires when a row is clicked | (data: any, index: number, event: Event) => any | | No |
| ellipsis | Whether ellipsis should be displayed when content overflows (noWrap of columns needs to be set) | bool | false | No |
| onExpand | Callback fires when the row expand icon is clicked | (data: {expanded: boolean, data: any, event: Event, index: number}) => any | | No |
| components | Custom table element | object { row?: ComponentType } | | No |
| rowProps | Custom row props | (data: any, index: number) => object | | No |
| bordered | Whether to display the outer border and column border | bool | `false` | No |
| batchRender | Render batch operations | (data: array, position?: 'header' \| 'foot') => React.ReactNode | | No |
| stickyBatch | Automatically stick batch operation | bool | `false` | No |
| autoStick | Whether to stick the head to the window automatically | bool | `false` | No |
| autoStickOffsetTop | Custom offset of sticky head | number | `false` | No |
| disableHoverHighlight | Whether to disable mouse hover highlighting | boolean | `false` | No |
| loadingProps | All props in `BlockLoading`, exclude `loading` | `Omit<IBlockLoadingProps, 'loading'>` | - | No |
| size | Table Size | string | `'medium'` | No |
#### onChange function declaration
onChange will throw an object, which includes parameters about the change part of pagination.
```js
{
current, // {Number} the current page
sortBy, // {String} the key which rows are sorted according to
sortType, // {String} ['asc', 'desc', ''] the way to sort
pageSize, // {Number} page size
}
```
#### Columns
| Property | Description | Type | Required |
| ------------ | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -------- |
| title | column title | ReactNode | Yes |
| name | key for the corresponding data(recommended to be set). | string | No |
| width | column width | string \| number | No |
| bodyRender | Render complex component | ((data: any, pos: {row: number, column: number, fixed?: 'left' \| 'right'}, name: string) => ReactNode) \| ReactNode | No |
| className | class name of the column title | string | No |
| needSort | whether to support sorting | bool | No |
| colSpan | span of columns. It won't be rendered if the value is set to 0 | number | No |
| fixed | whether columns fixed or not. The value can be `left` `right` `true` (`true` is same to `left`) | bool \| strig | No |
| onCellClick | callback fires when a cell is clicked | (data: any, event: Event) => any | No |
| textAlign | Text alignment | string | No |
| noWrap | Don't wrap text | bool | No |
| defaultText | Default display text | ReactNode | No |
| children | Render grouping table headers | array | No |
| isValueEmpty | Callback to test whether show the default text | (value: any) => boolean | No |
#### Selection
| Property | Description | Type | Required |
| ----------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- | --- |
| selectedRowKeys | keys of selected rows by default | array | No |
| onSelect | callback fires when a check changes | (selectedkeys: string[], selectedRows: Array<any>, changeRow: any | any[]) => any | No |
| getCheckboxProps | **Depreciated use getSelectionProps** function to get properties of the checkbox/radio | (data: object) => { disabled?: boolean, indeterminate?: boolean, reason?: ReactNode } | No |
| getSelectionProps | function to get properties of the checkbox/radio | (data: object) => { disabled?: boolean, indeterminate?: boolean, reason?: ReactNode } | No |
| isSingleSelection | Radio or not | bool | No |
### GridColumnProvider
Support all `columns` props.
#### pageInfo
| Property | Description | Type | Required |
| --------------- | ---------------------------------------- | -------- | -------- |
| total | Total number of items | number | No |
| pageSize | Number of items to be displayed per page | number | No |
| pageSizeOptions | Page size options | number[] | No |
| current | current page | number | No |
### Expandation
| Props | Description | Type | Default | Required |
| ------------ | ---------------------------------------------------- | --------------------------------------- | ------- | -------- |
| isExpanded | Whether to expand the current row | (record: any, index: number) => boolean | | no |
| isExpandable | Whether to display the expand icon of current row | (record: any, index: number) => boolean | | no |
| expandRender | Render function of expanded row's additional content | (data: any) => ReactNode | | no |
<style>
.switch {
margin-bottom: 10px;
}
.big-size {
font-size: 20px;
}
</style>