Manage column visibility in tables using Tanstack Table. Toggle each column's visibility with checkboxes, set some as non-hideable, or hide them by default. Adjust properties in the table code to control displayed columns.
Install Shadcn's Switch component to render nice looking switches instead of plain html check boxes.
[00:01] So here we have our table. Sometimes you don't always want to display all of the columns, so it would be nice to have little toggles to hide any of the columns in this list. So back in our code, we can scroll down to our table component. Instead of just returning the table, we're going to return a fragment. And above the table here, we're going to get all columns.
[00:44] And cursor knows what I'm trying to do. So I'm gonna complete here. For each column, we're mapping over the columns and we're rendering a div with a label and it's the column ID and the input with which is a type of checkbox. It's disabled if you can't hide the column. We'll update one of the columns later to see that that's working.
[01:19] If it's checked, which all of these columns are visible by default, this will be checked. And then the onChange handler passes checked to column.toggleVisibility. So in our browser, we have all of our check boxes, and we can hide our columns on the table. Back in the code, if you wanted to hide one of these columns by default, you could pass initial state, and then column visibility, and then pass the column ID and then true or false. So now when we reload, website is off by default.
[02:17] And when we click it, it displays the website column. To disable a column from being hideable, we can go up to the column helper and add enable hiding false. So back in our browser. This input is disabled. We can hide other columns but we can't hide the name.
[02:50] Let's go ahead and re-enable hiding for the name column. TanSeq table lets you handle the state yourself if you really wanted to. So we can import useState where it's an object and we'll default website to false. Instead of initial state, we will go state, column visibility, and then on column change. This TypeScript error is explaining that this object does not match the type that onColumnVisibilityChange expects.
[03:42] So this dispatch function and this onChange handler don't match up. We can resolve this error by using a little bit of TypeScript. Cursor knows what we want. We will import visibility state. Visibility state is X-string to Boolean, and now these types match.
[04:10] And when we go back, we have our default. I don't have any reason to pull this state out into this variable, so I'm just going to delete this code and delete this code. But I do wanna hide website, so I'm gonna keep website false. Like I've mentioned before, TanSeq table is a headless table, so we can render whatever we want to here. In our terminal, we can run npx shadcn add switch.
[05:05] Yes. Now back in our code here instead of an input we can go switch and import it from our components. And now on checked change will pass the Boolean value so we can just call this value. Now we have a nice switch component. Let's put the label on top of the switch and instead of rendering the ID, we will render the actual header name.
[05:58] Do a gap of one pixel. Then we'll go header dot, or column dot, column def dot header to string. And we'll go column.columndef.header to string. Back in our browser, we have a nice list of column selectors.
