/
gsam
/
ui-kit-ce
Обзор
Документация
Войти
/
gsam
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/table/examples/CustomizeTableComponents.tsx
70 строк
2 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
import * as React from 'react' import { ColumnProps, RecordDataSource, Table } from '@v-uik/base' type DataSource = RecordDataSource<{ name: string; role: string }> type Props = React.ComponentPropsWithoutRef<'div'> const TableComponent: React.FC<Props> = (props) => ( <div {...props} style={{ height: 'auto' }} /> ) const RowComponent: React.FC<Props> = (props) => ( <div {...props} style={{ display: 'flex' }} /> ) const CellComponent: React.FC<Props> = (props) => ( <div {...props} style={{ flex: 1 }} /> ) const DivComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => ( <div ref={ref} {...props} /> )) export const CustomizeTableComponents = (): JSX.Element => { const dataSource: DataSource[] = [ { name: 'Vasya', role: 'developer', key: 1 }, { name: 'Slava', role: 'developer', key: 2 }, { name: 'Anton', role: 'manager', key: 3 }, { name: 'Artem', role: 'designer', key: 4 }, { name: 'Fillip', role: 'designer', key: 5 }, ] const columns: ColumnProps<DataSource>[] = [ { key: 'expand', dataIndex: 'key', title: 'Key', }, { key: 'name', dataIndex: 'name', title: 'Name', }, { key: 'role', dataIndex: 'role', title: 'Role', }, ] return ( <Table components={{ table: TableComponent, head: { wrapper: DivComponent, row: RowComponent, cell: CellComponent, }, body: { wrapper: DivComponent, row: RowComponent, cell: CellComponent, }, }} dataSource={dataSource} columns={columns} /> ) }