How can I hide column based on a specific breakpoint ?

[gamegee]

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:

1st option

Handle responsive conditioning at the column definition level.

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

Be able to define meta property that will be interpreted in my generic <Table> component.

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
  })
]

// This component initialize useReactTable
<Table columns={columns} data={data} />

The 2nd option would be ideal, but I didn't find a way to have typesafe meta property.

Thanks in advance for your insights