T
TanStack•3y ago
magic-amber

How can I hide column based on a specific breakpoint ?

Hey, I want to hide columns based on some breakpoint. What are the best practices to implement such feature ? I see few potential way of implementation: 
const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    ...(isLargeScreen && 
      [columnHelper.accessor('firstName', {
          header: 'First Name',
          cell: info => info.getValue(),
          footer: info => info.column.columnDef.header
        })
      ])
]
const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    ...(isLargeScreen && 
      [columnHelper.accessor('firstName', {
          header: 'First Name',
          cell: info => info.getValue(),
          footer: info => info.column.columnDef.header
        })
      ])
]
2nd option 
const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    columnHelper.accessor('firstName', {
      meta: { hidden: isSmallScreen },
      header: 'First Name',
      cell: info => info.getValue(),
      footer: info => info.column.columnDef.header
    })
]
const columns = [
    columnHelper.accessor('id', {
      header: 'Id',
      footer: info => info.column.columnDef.header
    }),
    columnHelper.accessor('firstName', {
      meta: { hidden: isSmallScreen },
      header: 'First Name',
      cell: info => info.getValue(),
      footer: info => info.column.columnDef.header
    })
]
The option 2 would be ideal, but I didn't find a way to have meta typesafe. thanks in advance
2 Replies
wee-brown
wee-brown•3y ago
You can make the meta typesafe by declaring it on the TableMeta interface. Here's a reference for it: https://tanstack.com/table/v8/docs/api/core/table#meta
Table | TanStack Table Docs
useReactTable / createSolidTable / useVueTable / createSvelteTable `tsx
wee-brown
wee-brown•3y ago
You could also, eliminate the JS calculation of isSmallScreen by passing in a classname and appending that onto your table column. This allows you to pass in a classname that is mapped to a media query in css. This could leverage something like tailwindcss or any other implementation for moving the observer of this from JS to the browser (and native code).

Did you find this page helpful?