Hide columns by default in V8

[Schmell]

I read this discussion abut hiding columns in v7
The docs suggest that there is a initialState.hiddenColumns in the use(Framework)Table , but this is throwing, saying that hiddenColumns does not exist
Maybe i am putting it in the wrong spot or not writing it right

[KevinVandy]

initialState.columnVisibility in V8

[wiskani]

I don't know about that, but in the initial state of columnVisibility you can set the visibility of each column using its id. In version 7 it could be done in the definition of the columns but here it seems better to me since later you can change the visibility state more easily if you need it

[kndshein]

Background: I'm pretty new to TS, and very new to this library.
Somehow initialState.columnVisibility didn't do jack. My first inclination was to try what @Schmell did, but I hit a type error:

 Type 'Dispatch<SetStateAction<{ is_verified: boolean; is_disabled: boolean; }>>' is not assignable to type 'OnChangeFn<VisibilityState>'.

By setting <VisibilityState> on my useState, the type lords became happy, and it worked!
Rendering {JSON.stringify(table.getState().columnVisibility, null, 2) like in the example is quite helpful.

[KevinVandy]

Yep, if you manage column visibility in both state and initialState, state overwrites.

[KevinVandy]

^ Which means that you might just have to initialize the columnVisibility state, instead of using the initialState prop. Doesn't mean that you can't still have columns initially hidden if managing the full state.

[maik-emanoel]

Ok. Is there a way if i can pass it to column def directly? Like show or enable hiding true?

I wanted to do the same thing, did you find some way to do that?

[timurbesli]

On V8, You can use setColumnVisibility to change the visibility state like this.
setColumnVisibility({ "headerId": true, "name": true, "price": false, })
I created a saved hide/show effect on typescript. hope its helpful.

const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});

const table = useReactTable({
    columns: columns,
    data: data,
    state: {
      columnVisibility: columnVisibility,
    },

    getCoreRowModel: getCoreRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
  });
  

useEffect(() => {
    if (localStorage.getItem("visibleColumnIds") === null) {
      const columIds = table.getAllColumns().map((column) => column.id);
      localStorage.setItem("visibleColumnIds", JSON.stringify(columIds));
    }
    const allHideableColumnIds = table
      .getAllColumns()
      .filter((column) => column.getCanHide())
      .map((column) => column.id);
    const savedColumnIds: string[] = JSON.parse(localStorage.getItem("visibleColumnIds") || "[]") as string[];
    const initialColumnVisibility: VisibilityState = allHideableColumnIds.reduce((visibilityState, columnId) => {
      visibilityState[columnId] = savedColumnIds.includes(columnId);
      return visibilityState;
    }, {} as VisibilityState);

    setColumnVisibility(initialColumnVisibility);
  }, []);

[Ericokim]

Hi @timurbesli following your example above, I made some tweaks see the code below;

  const [columnVisibility, setColumnVisibility] = React.useState({});

  const columns = React.useMemo(
    () => [
      {
        accessorKey: 'firstName',
        enableHiding: false,
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        enableHiding: false,
        header: 'Last Name',
      },
      {
        accessorKey: 'address',
        enableHiding: true,
        show: false,     // Use this state to hide/show your column `show: true || false`
        header: 'Address',
      `},`
    ],
    [],
  );

//  This will check if all the columns has `show: false` .
  React.useEffect(() => {
    const columnIds = columns.map((col) => col.id);
    const initialColumnVisibility = columns
      .filter((col) => col.show === false)
      .map((col) => col.id)
      .reduce((visibilityState, columnId) => {
        visibilityState[columnId] = !columnIds.includes(columnId);
        return visibilityState;
      }, {});

    setColumnVisibility(initialColumnVisibility);
  }, []);

[LucasJantschChitolina]

This was very helpful, thanks a lot!

[7sne]

In the v8 it can be easily done just by providing the default values for the columnVisibility state.

    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({
        'column-name-to-hide-by-default': false,
    })

   // (...)

    const table = useReactTable({
        // (...)
        state: {
            sorting,
            columnVisibility, // <-- State.
            columnFilters,
        },
       onColumnVisibilityChange: setColumnVisibility, // <-- To manipulate visibility state.
    })

[jschuur]

In the v8 it can be easily done just by providing the default values for the columnVisibility state.

Is there another way to pass in multiple data properties for a row that are rendered inside a inside single cell without defining them as columns that are always hidden?

Concrete example: I have a site name and url value. My name column shows the name with a hyperlink to the URL. I never want to list the url property as its own column. I just want to pass it in with my table data and reference later in a row.getValue('url').

The only way I don't get a app-index.js:31 [Table] Column with id 'url' does not exist. error is if I add this to my ColumnDef and add a VisiblityState that includes url: false:

{
  accessorKey: 'url',
},

It works, it just feels like I am abusing the concept of a 'column' that I never intended on displaying as such.

See also #4893

[alangshur]

Was also trying to figure this out and the solution for me was to use row.original.url instead of row.getValue('url') to reference the original data. Hope that helps!

[ahaseebcontractken]

This worked like magic! Thanks.

[benakram4]

Was also trying to figure this out and the solution for me was to use row.original.url instead of row.getValue('url') to reference the original data. Hope that helps!

Best solution by far! Thanks!

[ZeldOcarina]

It's even simpler by using an effect and just hiding the columns you want to be hidden:

React.useEffect(() => {
    table.setColumnVisibility({
      locationId: false,
      leadType: false,
      source: false,
    });
  }, [table]);

[navid-asgharzadeh]

 const table = useReactTable({
       data,
       columns,
       state: {
           columnVisibility: {
               id: false //replace `id` with your column identifier
           }
       }
   });

[RaviRamDhali]

Using Ver 8:

#1971 (comment)

Function GetInVisibleColumn() takes an array of finalColumnDef and filters out the columns that have the visible property set to false. It then creates a new object (removedColumn) where the keys are the accessorKey properties of the invisible columns, and the values are set to false.

[nivethan-me]

Use initialState.columnVisibility in v8 if you want to reset the columns

  const table = useReactTable({
    data: data,
    columns: columns,
    enableColumnResizing: true,
    enableHiding: true,
    // set false to non default columns here so reset button hides them
    initialState: { columnVisibility: { customer: false } },
    columnResizeMode: "onChange",
    getCoreRowModel: getCoreRowModel(),
    debugTable: true,
    debugHeaders: true,
    debugColumns: true,
  });

          {table.getAllLeafColumns().map((column) => {
          return (
            <div key={column.id} className="px-1">
              <label>
                <input
                  {...{
                    type: "checkbox",
                    checked: column.getIsVisible(),
                    onChange: column.getToggleVisibilityHandler(),
                  }}
                />{" "}
                {column.id}
              </label>
            </div>
          );
        })}
      </div>
      <button onClick={() => table.resetColumnVisibility()}>reset</button>

[salihayazdir]

If you want to manage the initial visibility in column definition:

Extend the column meta to add hidden key

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData extends RowData, TValue> {
    hidden?: boolean;
  }
}

{
    accessorKey: 'materialName',
    accessorFn: (row) => row.material.name,
    meta: {
      hidden: true,
    },
...
  },

Add the columns you marked with hidden in the initial column visibility state

const table = useReactTable({
  data,
  columns,
  ...
  onColumnVisibilityChange: setColumnVisibility,
  state: {
    columnVisibility,
  },
});

 const initialVisibility = columns.reduce((acc, column) => {
    if (column.meta?.hidden && (column as any)?.accessorKey) {
      acc[(column as any).accessorKey as string] = false;
    }
    return acc;
  }, {} as VisibilityState);

  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(initialVisibility);

I had to use any for the column definition because typescript didnt want me to use accessorKey. I dont know why.

[riteshreg]

This works for me

` const [rowSelection, setRowSelection] = React.useState({});

const [columnVisibility, setColumnVisibility] =
React.useState({
CompanyName: false,
});

const [columnFilters, setColumnFilters] = React.useState(
[],
);
const [sorting, setSorting] = React.useState([]);

const [filtering, setFiltering] = React.useState("");

const table = useReactTable({
data,
columns,
state: {
globalFilter: filtering,
sorting,
columnVisibility,
rowSelection,
columnFilters,
},`