T
TanStack•3y ago
optimistic-gold

Custom way to hide column, is it a bad practice ?

Hello everyone, I have an accessor cell that display multiple content, it must display within the cell a name, email, an organisation type(enum) and badge that inform confirmed account or not (boolean) I use as accessor the name and email concatened in this column, however, i have table filters that must filter regarding the organisation type (select) and if the user is confirmed (radio button). I wouldn't mess with the current accessor that is a string of the email and name, but i must find a way to chirurgically target the organisation type and confirmed. Instead of implementing a custom filter function that i judged maybe too time consuming on my side, i did the following: I created a column accessor for the organisation type and the confirmed, added a meta field isHidden and apply conditional rendering on the column: 
  columnHelper.accessor((row) => row.organisation.type, {
    id: 'type',
    meta: {
      isHidden: true,
    },
    header: '',
    cell: () => null,
  }),
  columnHelper.accessor((row) => row.organisation.type, {
    id: 'type',
    meta: {
      isHidden: true,
    },
    header: '',
    cell: () => null,
  }),
Now i have two possibilities: either i render the cell but hide with css, or i do not render it at all. Not rendering it would be better in my case so i have the true count of the visible cells, however i am concerned if that could introduce any bug or bad practice since it shouldn't be meant this way. I wanted to ask if thanks to your experience you'll spot any major red flag doing this approach or potential bug that i could encounter ? 
const getVisibleCells = (row) => {
  const visibleCells = row.getVisibleCells().filter((cell) => !cell.column.columnDef.meta?.isHidden);
  return visibleCells;
};

....

<tr
  v-for="row in table.getRowModel().rows"
  :key="row.id"
>
  <td
    v-for="cell in getVisibleCells(row)"
    :key="cell.id"
  >
    <FlexRender
      :render="cell.column.columnDef.cell"
      :props="cell.getContext()"
    />
  </td>
</tr>
const getVisibleCells = (row) => {
  const visibleCells = row.getVisibleCells().filter((cell) => !cell.column.columnDef.meta?.isHidden);
  return visibleCells;
};

....

<tr
  v-for="row in table.getRowModel().rows"
  :key="row.id"
>
  <td
    v-for="cell in getVisibleCells(row)"
    :key="cell.id"
  >
    <FlexRender
      :render="cell.column.columnDef.cell"
      :props="cell.getContext()"
    />
  </td>
</tr>
Thanks in advance 👍
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?