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

问题描述

我正在使用 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>
)
...

解决方法

使用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>
  );