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行的表，它可以按"Name“和"Phone”排序。但是，它不能按照“复选框”列进行排序，“复选框”列具有或任何其他的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>;
  }
};