T
TanStack•2y ago
sunny-green

Hide Column in react-table v8

I try to hide a column, by using this in my columns definition: 
  columnHelper.accessor("lastName", {
    enableHiding: true,
  }),
  columnHelper.accessor("lastName", {
    enableHiding: true,
  }),
but it is still visible not sure what I have to add to remove a column but still be able to use it for global sorting
2 Replies
absent-sapphire
absent-sapphire•2y ago
I'm also in need of a solution to the problem where reaching the mobile screen size hides a specified number of columns using CSS
sunny-green
sunny-greenOP•2y ago
I figured it out! 
  const table = useReactTable({
    // data: nullToString(data),
    data: tableData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
      globalFilter,
      columnVisibility: {
        lastName: false, // this will hide the "lastName" column
        // you can add other columns here
        // you can use state to toggle your columns visibility
      },
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
  });
  const table = useReactTable({
    // data: nullToString(data),
    data: tableData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting,
      globalFilter,
      columnVisibility: {
        lastName: false, // this will hide the "lastName" column
        // you can add other columns here
        // you can use state to toggle your columns visibility
      },
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
  });

Did you find this page helpful?