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行的表，可按"名称"排序。和";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>;
}
};