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 行的 table，可以按“姓名”和“Phone”排序。但是，它不能按具有或任何其他 React 组件的“复选框”列进行排序。

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

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>;
  }
};

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

Gridjs-react: Sort by column having a React Component

reactjs

gridjs