reactjs - Gridjs-react：按具有 React 组件的列排序

Question

我正在使用 gridjs-react 创建一个自定义网格，如下所示：

import { Grid, _ } from 'gridjs-react';

const tableData = [
  ['John', 12345, _(<input type="checkbox" name="ch" value="1" disabled checked />)],
  ['Mike', 67891, _(<input type="checkbox" name="ch" value="2" disabled />)],
]

export default function myCustomGrid() {
  return (
    <Grid
      sort
      columns={['Name', 'Phone', 'Checkbox']}
      data={tableData}
      pagination={{
        enabled: true,
        limit: 5,
      }}
    />
  );
}

输出是一个包含 2 行的表，可以按“姓名”和“电话”排序。但是，它不能按具有 <input> 或任何其他 React 组件的“复选框”列进行排序。

我最终希望能够根据复选框是选中还是禁用或者如果可能的话按其值对表格进行排序。

Answer 1

我找到了解决方案：

import { Grid, _ } from 'gridjs-react';

const tableData = [
  ['John', 12345, true],
  ['Mike', 67891, false],
]

export default function myCustomGrid() {
  return (
    <Grid
      sort
      columns={[
        'Name', 
        'Phone', 
        {
          name: 'Enabled', 
          formatter: (isEnabled) => _(renderEnabled(isEnabled)) 
        }
      ]}
      data={tableData}
      pagination={{
        enabled: true,
        limit: 5,
      }}
    />
  );
}

const renderEnabled = (isEnabled) => {
  switch (isEnabled) {
    case true:
      return <input type="checkbox" disabled checked />;
    case false:
      return <input type="checkbox" disabled />;
    default:
      return <b>Dunno</b>;
  }
};