How to hide columns by default in v7?

[nbar1]

In v6 and beta versions of v7 I could define a column as hidden by default, then I could control the state of it myself. This was using the show key:

{
    Header: head => <Header title={'User'} accessor={'user.fullName'} />,
    accessor: 'user.fullName',
    show: false,
},

This no longer seems to be the case in v7. How can I define a column as hidden by default and control its state?

[tannerlinsley]

This is now a first class citizen of the internal table state at state.hiddenColumns which is an array of columns that are visible. There are also plenty of instance methods that allow you to control this as well. See "hiddenColumns" and related methods here: https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md

[goldenbearkin]

Can we have show: boolean back to Column Options instead of hacking in this way? Our use case is to make a generic DataTable by using React-Tabe. HiddenColums is considered as private api.

[jdvsch]

Hi TannerLinsle
The link is no longer available (https://github.com/tannerlinsley/react-table/blob/master/docs/api/useTable.md)... do you have a new link?

[tannerlinsley]

https://github.com/TanStack/react-table/blob/v7/docs/src/pages/docs/api/useTable.md

[nbar1]

Thanks for point that out. For anyone interested, I was able to keep my current code using show as a property by doing the following:

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    data,
    columns,
    initialState: {
        hiddenColumns: columns.map(column => {
            if (column.show === false) return column.accessor || column.id;
        }),
    },
});

[purskills]

Thank you so much. I found this answer for 4 hrs.

My code below:

initialState: {
        hiddenColumns: columns
          .filter(col => col.show === false)
          .map(col => col.accessor)
      }

[govi74]

These doesnt work with typescript and col.show doesnt exists anymore :(

[goldenbearkin]

Try this if use typescript
hiddenColumns: columns.filter((col: any) => col.show === false).map(col => col.id || col.accessor) as any,

[at-webdev]

Below code works with Typescript,

initialState: {
hiddenColumns:["accesorName"]
}

[ghost]

Is there any practical example of this in action? Codesandbox or Code example?

Atm Im using React-Table as

App.js

<Table
          columns={coworkerColumn}
          serverData={data}
        />

Columns.js

export const coworkerColumn = () => [
  {
    accessor: "picture",
    maxWidth: 70,
    Cell: ({ value }) => <Cells.value={value} />,
  },

Table.js

export const MyTable = ({
  loading,
  infinite,
  placeholder,
  pageSizeMode,
  ...props
}) => {
  const { searchInput } = useSelector((state) => state.coworker);
  const instance = useTable(
    {
      ...props,
    },
    useColumns,
    useRows,
    useFilters,
    useSortBy,
    useExpanded,
    usePagination,
    useFlexLayout,
    
  );

  const {
    serverData,
    getTableProps,
    headerGroups,
    rows,
    getRowProps,
    pageOptions,
    page,
    state: [{ pageIndex, pageSize, sortBy, filters }],
    prepareRow,
    previousPage,
    gotoPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    initialState: {
      hiddenColumns: columns.filter(col => col.show === false).map(col => col.accessor)
    }
  } = instance;

[ghost]

You might ask, why i use this incredible complex type of React-Table.
Answer is: To get access to "infinite scroll" version that is available on this codesandbox -> https://codesandbox.io/s/react-table-v7-sandbox-veigk

[p-somers]

I'm in a similar boat. I've added the columnid for the column I want to hide to the initialState, but it still shows up. @tannerlinsley ?

[hungdev]

@stephyswe you have to put hiddenColumns in useTable

  const instance = useTable(
    {
      columns,
      data: data || [zeroStateData],
      defaultColumn,
      disableMultiSort: true,
      initialState: {
        pageSize: (paginationOptions && paginationOptions.pageSize) || 25,
        hiddenColumns: columns.filter(column => !column?.isVisible).map(column => column.accessor)
      },
    },
  );

[hungdev]

in another way you can use useEffect to update hiddenColumns

  const instance = useTable(
    {
      columns,
      data: data || [zeroStateData],
      defaultColumn,
      disableMultiSort: true,
      initialState: {
        pageSize: (paginationOptions && paginationOptions.pageSize) || 25,
        hiddenColumns: columns.filter(column => !column?.isVisible).map(column => column.accessor)
      },
    },
    ...hooks
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page, // Instead of using 'rows', we'll use page, which has only the rows for the active page
    gotoPage,
    setPageSize,
    setAllFilters,
    selectedFlatRows,
    rows,
    filteredFlatRows,
    setColumnOrder,
    visibleColumns,
    state: { filters },
    setHiddenColumns,
  } = instance;

  useEffect(() => {   // set hidden column
    setHiddenColumns(
      columns.filter(column => !column?.isVisible).map(column => column.accessor)
    );
  }, [setHiddenColumns, columns]);

[zachary]

what is the useStates([])?

[ID4181]

{ columns, data, defaultColumn, initialState: { hiddenColumns: ["accessor"] // array of columns you want to hide }, }

[jdvsch]

Thanks for your quick response... but the link takes me to an invalid page... see attachment (image) [image: image.png] El jue, 12 may 2022 a las 12:00, Tanner Linsley ***@***.***>) escribió:

…

https://github.com/tannerlinsley/react-table/blob/v7/docs/api/useTable.md — Reply to this email directly, view it on GitHub <#1971 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASMMV3WW4V2L3TZNU5KA62TVJU2MTANCNFSM4LFJP46Q> . You are receiving this because you commented.Message ID: ***@***.***>

[jdvsch]

ty so much El jue, 12 may 2022 a las 12:02, Tanner Linsley ***@***.***>) escribió:

…

https://github.com/TanStack/react-table/blob/v7/docs/src/pages/docs/api/useTable.md — Reply to this email directly, view it on GitHub <#1971 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASMMV3TFCZW6WC4RURW6HZ3VJU2STANCNFSM4LFJP46Q> . You are receiving this because you commented.Message ID: ***@***.***>

[MarianoPrz]

Hi hiddenColumns isn't anymore at initial state, now instead its a record named 'columnVisibility', here an example, in this case i wanted to hide a column named 'factura':

[tijmenvangurp]

I know the question says v7 but stumbled on this looking for the v8 tanstack table solution this is another way to do the same

import {
  getCoreRowModel,
  useReactTable,
  VisibilityState,
} from '@tanstack/react-table'

 const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
    GenderIdentity: false,
  })

  // and then add the state to the state object
  
   const table = useReactTable({
    data,
    columns,
    state: {
      columnVisibility,
    },
   getCoreRowModel: getCoreRowModel(),
	})

[micahkatz]

I have it working in v8

const table = useReactTable({
        data,
        columns,
        ...,
        enableHiding: true,
        initialState: {
         columnVisibility: {
            'your-column-name': false
         }
        }
    });

[liambowers]

My take on it involved specifying a hidden columns array:

export const hiddenColumns = ['foo', 'bah']

In my case, I kept it with my column definitions.

Then I used it like so:

const table = useReactTable({
        data,
        columns,
        ...
        initialState: {
            columnVisibility: hiddenColumns.reduce(
                (acc: Record<string, boolean>, item) => {
                    acc[item] = false
                    return acc
                },
                {}
            )
        }
    })

This is obviously Typescript so remove the definitions if not needed.

[RaviRamDhali]

Using Ver 8:

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.

const columns = useMemo(
....
{
        header: "Case Number",
        accessorKey: "caseNumber",
        visible: false,
},

then

const tableInstance: any = useReactTable({
...
initialState: {
        columnVisibility: GetInVisibleColumn(finalColumnDef),

function GetInVisibleColumn(finalColumnDef: any) {

  let inVisibleColumns = finalColumnDef.filter(
    (col: { visible: boolean }) => col.visible === false
  );
  
  const removedColumn = {} as Record<string, boolean>;
  for (const item of inVisibleColumns) {
    removedColumn[item.accessorKey] = false;
  }

  return removedColumn;
}

[anondawg21]

why