# Table 表格

# install

tnpm i -S @sula/table

# usage

import Table from "@sula/table";

# API

# remoteDataSource

类型: FetchType
默认值: -

表格后端分页请求配置，数据格式请查看后端分页,无分页

示例：

remoteDataSource: {
  url: '表格数据请求地址',
  method: '请求方法',
  extraParams: {
    domain: 'secure',
  },
  convertParams: (ctx) => {
  //请求参数转化 可通过ctx.params获取到搜索表单的表单值
  },
  converter: (ctx) => {
    //请求返回数据转化 可通过ctx.data获取接口返回数据
  },
}

提示

remoteDataSource 如果希望添加额外请求参数，可以在 convertParams 中添加，也可以在 extraParams 中添加（params被分页信息占用）

# initialDataSource

类型:any[]
默认值: -

表格初始数据列表，仅在第一次渲染时生效

# columns

类型:Array<Column>
默认值: -

表格列配置示例：

columns: [
  {
    key: "name", // 列对应的key值
    title: "Name" // 列名称
  }
];

操作列配置示例：

columns: [
  {
    key: "name",
    title: "Name",
    render: ctx => {
      return <div>Hello, {ctx.cell}</div>;
    }
  },
  {
    key: "operation",
    title: "Operation",
    render: [
      {
        type: "iconLink",
        props: {
          type: "edit"
        },
        visible: '${data.status !== "success"}', //模板字符串 控制该操作项展现
        path: "/crud/edit",
        query: {
          id: "${data.id}"
        }
      },
      {
        type: "icon",
        tooltip: "Are you sure to delete?",
        confirm: "view3",
        props: {
          type: "delete"
        }
      }
    ]
  }
];

使用 tips：

其中 render 支持配置化写法，参数 ctx 请查看ctx
属性配置均支持字符串、模板字符串、方法，后两者会提前解析出结果，再进行渲染
列默认文字显示，需要定制展现形态时可通过 render 属性配置RenderType
render.props 内配置的方法直接透传，不会提前解析

# autoInit

类型:boolean
默认值:true

表单初始是否自动发起一次后端分页请求

# disableClearSelectedRows

类型:boolean
默认值:false

调用refresh时是否清空选中行

# hasTitlePaddingBottom

类型:boolean
默认值:true

表格标题下方是否留出 16px 间隔

# hasTitlePaddingTop

类型:boolean
默认值:true

表格标题上方是否留出 16px 间隔

# initialPaging

类型:object
默认值:{ pagination: { current: 1, pageSize: 10 } }

表格初始分页、排序、过滤信息，只在初始设置时生效，可以配置属性如下：

属性名	说明	类型	默认值
pagination	分页信息	Pagination	`{ current: 1, pageSize: 10 }`
sorter	排序信息	`{ columnKey: string, order: 'ascend' \\| 'descend' \\| undefined }`	`-`
filters	过滤项信息	`{ [columnKey: string]: any[] }`	`-`

# initialSelectedRowKeys

类型:Array<string>
默认值:-

表格选中行，只在初始设置时生效

# initialTitleState

类型:object
默认值: -

title 部分的状态

tips

可以在titleRender配置里的配置方法参数ctx中，通过 ctx.titleState 拿到
titleState 在内部进行管理，如果要改变它请使用ctx参数中的ctx.setTitleState()方法

示例：

<Table
  initialTitleState={{
    count: 0
  }}
  titleRender={{
    right: {
      type(ctx) {
        return <div>Count: {ctx.titleState.count}</div>;
      },
      action(ctx) {
        ctx.setTitleState({ count: ctx.titleState.count + 1 });
      }
    }
  }}
/>

# original

类型:boolean
默认值:false

是否使用 antd 主题

# plugins

类型:Array<Plugin>
默认值: -

业务插件

# rowSelection

类型:boolean |rowSelection
默认值: -

注意

rowSelection 将被组件内部管理，所以一般情况你只需设置 rowSelection 为 true 即可，如果你需要监听哪些行被选中可以设置为: rowSelection: { onChange: (selectedRowKeys, selectedRows) => {...} }，但不要在 onChange 使用 setState 来设置 selectedRowKeys，这不会起作用。

# state

类型:object
默认值: -

表格状态，可关联外部 state，当 state 改变时，表格视图会更新

tips

可以在配置方法中，通过参数ctx.state 拿到 state 属性

示例：

<Table
  state={{
    count: this.state.count
  }}
  titleRender={{
    right: {
      type(ctx) {
        return <div>Count: {ctx.state.count}</div>;
      }
    }
  }}
/>

# titleRender

类型:object | Array<ReactNode|(ctx)=>ReactNode|object>
默认值: -

表格上方 title 部分配置，会渲染为 AntD 表格的标题部分。如果使用数组配置，每项会单独占一行。 object可配置以下参数:

参数	说明	类型	默认值
left	左侧展示元素	RenderType \| `Array<`RenderType`>`	`-`
right	右侧展示元素	RenderType \| `Array<`RenderType`>`	`-`

示例：

// 配置left right属性
titleRender: {
  right: [
    {
      type: 'rowSelection',
      props: {
        style: {
          marginRight: 8,
        },
      },
    },
    {
      type: 'batchButton',
      text: 'Delete',
      confirm: 'Are you sure to delete?',
      props: {
        icon: 'minus-square',
        type: 'danger',
        shape: 'round',
        style: {
          marginRight: 8,
        },
      },
    },
  ],
  left: [
    {
      type: 'tabletitle',
      title: 'Title',
    }
  ]
};

// 数组配置，每项会单独占一行
titleRender: [
  (ctx) => {
    return <div>{ctx.state.count}</div>
  },
  <Button>Click</Button>,
  {
    left: [],
    right: []
  }
]

# 更多

table 更多配置参考antd Table

# 实例方法

注意

可通过 ref 属性获取实例方法
table 内所有配置属性，均支持配置成方法，ctx 为配置方法的第一个入参，通过 ctx.table 可获取到 table 实例提供的方法

# setDataSource()

setDataSource([
  {
    name: "sula",
    age: 0
  }
]);

为表格设置数据列表

# setSelectedRowKeys()

setSelectedRowKeys(["id1", "id2"]);

可操作表格中，为表格设置选中的行，传入空数组可用于清空当前勾选的行

# getSelectedRowKeys()

getSelectedRowKeys();

可操作表格中，获取当前勾选的表格行的 rowKey 列表

# getSelectedRows()

getSelectedRows();

可操作表格中，获取当前勾选的表格行的完整信息列表

# getPaging()

getPaging())

获取表格当前分页、排序、过滤信息

# getDataSource()

getDataSource();

获取表格当前数据列表

# refresh(pagination?, filters?, sorter?)

refresh({ current: 2 }, { name: "Miller" });

根据参数重新请求，刷新表格数据

参数	说明	类型
pagination	分页信息	`{ current: number, pageSize: number, total: number }`
filters	过滤项信息	`{ [columnKey: string]: any[] }`
sorter	排序信息	`{ columnKey: string, order: 'ascend' \\| 'descend' \\| undefined }`

# reset(boolean)

reset(true / false);

重置表格分页、过滤条件信息，函数接收参数，true 表示重置条件后刷新表格数据，false 仅进行重置

# getControls()

getControls();

获取表格当前完整信息，包括：

selectedRowKeys 可操作表格当前勾选的行信息
pagination 表格当前分页信息
sorter 表格当前排序信息
filters 表格当前筛选条件信息
dataSource 表格当前数据源列表

# ctx

sula 内所有配置属性，均支持配置方法，ctx 为该方法的第一个参数，配置给不同属性时，ctx 内容会有差异

示例：

const columns = [
  {
    key: "name",
    title: "Name",
    render: ctx => {
      const { data } = ctx;
      return <span>{data.name}</span>;
    }
  }
];

# 参数及适用范围

	columns render	columns action	titleRender render	titleRender action	convertParms	converter
locale	✅	✅	✅	✅	✅	✅
table	✅	✅	✅	✅	✅	✅
cell	✅	✅	-	-	-	-
data	✅	✅	-	-	-	-
index	✅	✅	-	-	-	-
state	✅	✅	✅	✅	✅	✅
pageData	-	-	✅	✅	-	-
titleState	-	-	✅	✅	-	-
setTitleState()	-	-	✅	✅	-	-
params	-	-	-	-	✅	-
data	-	-	-	-	-	✅

# locale

类型:object

国际化配置

# table

类型:object

表格实例，请查看table 实例

# cell

仅适用于 columns 的 render、action

类型:any

单元格的值

# data

仅适用于 columns 的 render、action

类型:object

该行数据

# index

仅适用于 columns 的 render、action

类型:number

该行序号

# state

类型:object

表格状态

# titleState

类型:object

title 部分状态

# pageData

仅适用于 titleRender 的 render、action

类型:Array

表格数据

# setTitleState

仅适用于 titleRender 的 render、action

类型:({}) => void

设置 titleState

# params

仅适用于 convertParms

类型: object

请求参数

# data

仅适用于 converter

类型: object

请求结果

# 后端分页

后端分页是表格获取数据最典型的场景，推荐后端采用以下参数下发与数据响应格式：

// 下发参数
{
  method: 'POST',
  params: {
    filters: { name: ['sula', 'antd'], level: ['High'] },
    sorter: {
      columnKey: 'age',
      order: 'ascend',
    },
    current: 1,
    pageSize: 10,
  }
}

// 数据响应
{
  data: {
    list: [{}],  // 或者改为dataSource
    current: 1,
    pageSize: 10,
    total: 200,
  }
}

# 无分页

无分页是表格获取数据的另一种场景，采用以下参数下发与数据响应格式：

// 无分页配置参数
<Table
  initialPaging={{ pagination: false }}
>

// 下发参数
{
  method: 'POST',
  params: {
    filters: { name: ['sula', 'antd'], level: ['High'] },
    sorter: {
      columnKey: 'age',
      order: 'ascend',
    },
  }
}

// 数据响应
{
  data: [{}]
}

← Form 表单 ModalForm 弹窗表单 →