页面表格

页面表格参数与卡片表格大致一样，但页面表格为常用组件，更适合于独立页面使用。

引入组件

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

基础示例

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

<PageTable
    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',
  },
]
tableEnhancedTableProps
undefined
TDesign 表格组件的配置参数。
columnsPrimaryTableCol[]
undefined
TDesign 表格组件的列配置参数，你可以根据需要配置选择、筛选等功能。
headerRender(params: PageTableRenderProps) => React.ReactNode
undefined
自定义页面表格的头部元素。
footerRender(params: PageTableRenderProps) => React.ReactNode
undefined
在页面表格底部添加自定义元素。
siderRender(params: PageTableRenderProps) => React.ReactNode
undefined
自定义页面表格的左侧边栏元素。
actionRender(params: PageTableRenderProps) => React.ReactNode
undefined
自定义页面表格的动作元素。
filterRender(params: PageTableRenderProps) => React.ReactNode
undefined
筛选表单元素的回调函数，你可以返回自定义的筛选表单组件来配置表单元素。
import { FilterItem } from '@duxweb/dux-refine'

filterRender={() => {
  return (
    <>
      <FilterItem name='keyword'>
        <Input />
      </FilterItem>
    </>
  )
}}
filterAdvRender(params: PageTableRenderProps) => React.ReactNode
undefined
高级表格筛选元素与 filterRender 一致。
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 文档。
卡片表格
表单组件