在动态生成的数据表列中显示布尔值

Question

我正在使用PrimeReact Datatables 并从 JSON 动态创建列。如何在表格中呈现布尔值？现在他们没有出现。

JSON 人物示例

const person = [
   {
      "id":1,
      "person":"John Smith",
      "canEdit":false,
      "canView":true
   },
   {
      "id":2,
      "person":"Frank Jones",
      "canEdit":true,
      "canView":true
   }
]

组件

...
const dynamicColumns = columns.map((col,i) => {
    return <Column key={col.field} field={col.field} header={col.header} />;
});

return (
    <DataTable value={person}>
        {dynamicColumns}
    </DataTable>
)
...

Answer 1

使用DataTable templating

  const booleanChecker = (rowData, item) => {
    if (typeof rowData[item.field] === "boolean") {
      return rowData[item.field] ? "Accepted" : "Unaccepted";
    } else {
      return rowData[item.field];
    }
  };

  const dynamicColumns = columns.map((col, i) => {
    return (
      <Column
        key={col.field}
        field={col.field}
        header={col.header}
        body={booleanChecker}
      />
    );
  });

  return (
    <div>
      <div className="card">
        <DataTable value={products}>{dynamicColumns}</DataTable>
      </div>
    </div>
  );