使用

基本

DataTable 支持行选择功能. 给DataTable设置enableRowSelection属性启用行选择功能

选择状态以行id作为对象的键名. 因此需要给DataTable的getRowId属性设置正确的数据源行id标识. 默认为: (row)=>row.id, 假如你的数据源中以uid字段是行的id:

<DataTable getRowId={(row) => row.uid} />

选中行和激活行的概念:

• 选中行
  可通过复选框或行单击进行选择, 可以单选或多选, DataTable会为选中的行(tr元素)附加selected样式类, 并且重复选择相同行会进行切换(添加或移除selected类名)
• 激活行
  只能通过行点击激活, 只能是单行, DataTable会为当前激活的行(tr元素)附加actived样式类, 并且重复点击相同的行不会移除actived类.
  DataTable没有actived类设置默认样式. 这是为了防止单选且启用点击行选择时视觉上和选择状态的不一致

区分两者是为了当多选时选中的行和激活的行有各自独立的样式和行为, 比如: 多选用于批量处理, 激活行用于过滤1对多的关系数据的场景.

单选

默认用单独的复选框列作为行选择器.

多选

enableRowSelection和enableMultiRowSelection属性都为true时即可多选

当多选用于对当前数据的批量处理, 激活行用于过滤一对多的关系数据的场景, DataTable提供了解决方案:

1. 首先为DataTable启用多选并禁用点击行选择, 这样就只能使用复选框进行多选
2. 然后通过onRowClick或者onRowDoubleClick事件属性对行点击进行自定义处理, 两者都会接收到一个event参数和row参数
3. 手动为actived样式类的激活行设置单元格样式.

// 行选择状态
const [rowSelection, setRowSelection] = React.useState({});
// 激活行状态
const [activedRowId, setActivedRowId] = React.useState("");

/* 可对选择状态和激活行状态分别进行处理 
...省略
*/

<DataTable
  getRowId={(r) => r.uid}
  enableRowSelection // 步骤1 启用选择
  enableMultiRowSelection // 步骤1 启用多选
  enableClickRowSelection={false} // 步骤1 禁用点击行选择行为
  // 步骤2 对行点击进行自定义处理
  onRowClick={(e, row) => {
    // row.id 是 getRowId 回调属性的返回值
    setActivedRowId(row.id);
  }}
  // 步骤3 设置激活行中的单元格样式
  className="[&&_tr.actived_td]:bg-info [&&_tr.actived_td]:text-info-content"
  state={{
    rowSelection,
  }}
  onRowSelectionChange={setRowSelection}
/>;

点击行选择

enableRowSelection启用, 并且enableClickRowSelection启用时, 不会显示复选框列, 而是直接点击行即可选择行.

tip: 重复点击已选中的行会反选, 如果不想要反选行为, 请使用激活行替代.

tip: 为保持清晰易见, 建议单选时才启用.

根据条件启用行选择

enableRowSelection和enableMultiRowSelection都可以设置了一个函数, 函数签名: (row: Row<TData>) => boolean

当设置为一个函数时可以根据条件设置行是否可被选择.

下面的例子中, 只有行的id为偶数的行才允许被选择.

激活行

DataTable内部会为点击的行附加activedCSS类名(但没有默认样式规则), 有actived类名的行称之为激活行.

为防止与单选行在视觉上的不一致, 应禁用enableClickRowSelection选项:

1. 首先为DataTable设置enableClickRowSelection为 false 以禁用点击行选择, 这样就只能使用复选框进行多选
2. 然后通过onRowClick或者onRowDoubleClick事件属性对激活行进行自定义处理, 两者都会接收到一个event参数和row参数
3. 手动为actived样式类的激活行设置单元格样式.

tip: 激活行只能是单个行, 重复点击已激活的行不会反激活, 如果想要有反选行为, 请使用选择行替代.