How to show boolean-based values, in datatable cell content, using lightning design-system-react?

Question

One of the values rendered in my is a boolean. I'm following the "Advanced: Joined with Page Header" from the components page, and I don't know how to render it correctly and without raising errors in my browser console. Here is my current code:

const CustomBooleanActiveCell = ({ children }) => {
 const stringVal = children ? "Active" : "Inactive";
 return <DataTableCell title={stringVal}>{stringVal}</DataTableCell>;
};
CustomBooleanActiveCell.displayName = DataTableCell.displayName;
//...
<DataTableColumn label="Active" property="active">
      <CustomBooleanActiveCell />
</DataTableColumn>

This way I'm able to render "active" and "inactive" in my table, but it raises a ton of errors in chrome's console:

Vscode also complains about both my CustomBooleanActiveCell and the example's CustomDataTableCell, saying Property 'children' is missing in type '{}' but required in type '{ [x: string]: any; children: any; }'.

How can I change the content of a cell in this datatable? I can map the data before feeding the datatable, but I prefer to edit it in the datatable. Also can I choose to show this data in the datatable without writing CustomDataTableCells?

edit: I am running design-system-react v0.10.32, react v17.0.2, next v10.2.0.

Saulo santos monteiro · Accepted Answer · 2021-05-21 14:04:03Z

1

you can use a hook for initialize your stringVal before the request..

const [stringVal, setStringVal] = useState("Inactive");
useEffect(() => {
  setStringVal("your result here");
}, [children]);

answered May 21, 2021 at 14:04

Saulo santos monteiro

262 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show boolean-based values, in datatable cell content, using lightning design-system-react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related