CODEWITHSUNDEEP
reactjstypescriptnext.jssalesforce-lightning
Bruno Lamps
Bruno Lamps

Reputation: 646

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

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:

first error second error

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.

Upvotes: 0

Views: 429

Answers (1)

Saulo santos monteiro
Saulo santos monteiro

Reputation: 26

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

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

Upvotes: 1

Related Questions