1

I am using PrimeReact Datatables and creating the columns dynamically from JSON. How do I render Boolean values in the table? Right now they are not showing up.

JSON Person Example

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

Component

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

return (
    <DataTable value={person}>
        {dynamicColumns}
    </DataTable>
)
...
jbreslow
  • 186
  • 1
  • 11

1 Answers1

3

Use 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>
  );
Iman Rabbi
  • 271
  • 1
  • 2
  • How does that work if the columns are being generated dynamically like in my example code? Do I put a if statement in dynamicColumns()... if (col.field === 'canEdit' || col.field === 'canView'){}else {} – jbreslow Apr 16 '21 at 19:53
  • Thank you! That did it, and actually helped me clean up my code a bit by accessing 'item'. – jbreslow Apr 16 '21 at 20:09