I am trying to find an optimal way to handle the empty cell values.
I have following column definition in which all the fields are optional except the name field:
const columnHelper = createColumnHelper<{
name: string;
contact_person?: string;
phone_no?: string
}>();
export const countryColumns = () => [
columnHelper.display({
header: "S.N.",
cell: ({ row }) => row.index + 1,
}),
columnHelper.accessor("name", {
header: "Name",
}),
columnHelper.accessor("contact_person", {
header: "Contact Person",
}),
columnHelper.accessor("phone_no", {
header: "Phone Number",
}),
columnHelper.display({
id: "actions",
header: "Actions",
cell: ({ row }) => (
// Buttons
),
}),
];
Here, contact_person and phone_no are optional fields. So, there might be cases where the contact_person and phone_no will be empty in the table. How do I handle it?
export const countryColumns = () => [
columnHelper.display({
header: "S.N.",
cell: ({ row }) => row.index + 1,
}),
columnHelper.accessor("name", {
header: "Name",
}),
columnHelper.accessor("contact_person", {
header: "Contact Person",
cell: info => info.getValue() ?? "---";
}),
columnHelper.accessor("phone_no", {
header: "Phone Number",
cell: info => info.getValue() ?? "---";
}),
columnHelper.display({
id: "actions",
header: "Actions",
cell: ({ row }) => (
// Buttons
),
}),
];
Here, I need to check the condition in every optional field. Is this what I should do or there is another workaround?
Also, in the main table component, I tried doing something like this:
{row.getVisibleCells().map(cell => {
return (
<Td key={cell.id} pl={6}>
{cell.getValue() ? flexRender(
cell.column.columnDef.cell,
cell.getContext(),
) : "---"}
</Td>
);
})}
However, this renders “—” in S.N. and “Actions” field too which are display columns. This only seems to work on accessor columns.
