卡片表格

表格组件使用 TDesign Table 进行了封装，支持组件参数的同时使用 hook 对组件进行扩展，使其可以支持 Refine 数据请求。

引入组件

import { CardTable } from '@duxweb/dux-refine'

基础示例

定义 resporce 资源名与 columns 列配置即可调用表格数据。

<CardTable
    resporce={'example.example'}
    columns={[
      { colKey: 'name', title: '名称', width: '100' },
    ]}
/>

组件参数

titlestring
undefined
自定义表格卡片的标题。
tabsArray<CardTableTab>
undefined
表格卡片头部的 Tab 切换配置。该选项的值会作为 tab 参数发送到后端的 API 接口中。
[
  {
    label: '全部',
    value: 'all',
  },
  {
    label: '已发布',
    value: 'published',
  },
  {
    label: '未发布',
    value: 'unpublished',
  },
]
headerRender() => React.ReactNode
undefined
自定义表格卡片的头部元素。
footerRender() => React.ReactNode
undefined
在表格卡片底部添加自定义元素。
tableEnhancedTableProps
undefined
TDesign 表格组件的配置参数。
columnsPrimaryTableCol[]
undefined
TDesign 表格组件的列配置参数，你可以根据需要配置选择、筛选等功能。
filterRender() => React.ReactNode
undefined
筛选表单元素的回调函数，你可以返回自定义的筛选表单组件来配置表单元素。
import { FilterItem } from '@duxweb/dux-refine'

filterRender={() => {
  return (
    <>
      <FilterItem name='keyword'>
        <Input />
      </FilterItem>
    </>
  )
}}
onData(data?: Record<string, any>[]) => void
undefined
表格数据发生变化时的回调函数。
batchRender() => React.ReactNode
undefined
自定义多选表格行后的多选操作元素，通过表格的 Ref 可以获取到所选择的数据。
import { CardTable, CardTableRef } from '@duxweb/dux-refine'

const table = useRef<CardTableRef>(null)

return (
  <CardTable
    ref={table}
    batchRender={
      () => <>
        <Button onClick={() => {
          console.log(table.current.selecteds)
        }}>Delete</Button>
      </>
    }
  />
)
tableHookuseTableProps<BaseRecord, HttpError, BaseRecord>
undefined
表格 hook 参数，请查看对应 hook 文档。
模态框
页面表格