---
title: "Hide Columns by Default with ProTable"
date: 2023-02-22T16:28:41.000Z
author: Z.SHINCHVEN
tags: [ProComponents, Ant Design, Ant Design Pro, React]
canonical: https://atlassc.net/2023/02/23/hide-columns-by-default-with-pro-table
---
[ProComponents](https://procomponents.ant.design/) is a set of enterprise-class UI components based on Ant Design and React, it provides a lot of useful components and features out of the box.

I've enjoyed building data table UI with [ProTable](https://procomponents.ant.design/components/table) which provides a lot of useful features like [Controlled table settings columns](https://procomponents.ant.design/en-US/components/table?current=1&pageSize=5#controlled-table-settings-columns) for you to implement `hide some columns by default` feature within a few lines of codes.

Here's the code snippet:

## Generate Columns Control States with Given Array of Column Names

```tsx
import type {ColumnsState} from '@ant-design/pro-components';

export const makeDefaultColumnsState = (columnsToHide: string[]) => {
  const columnsState: Record<string, ColumnsState> = {};
  columnsToHide.forEach((column) => {
    // Hide the column by default
    columnsState[column] = {show: false};
  });
  return columnsState;
}
```

## Use the Generated Columns States

```tsx
const columnsToHide = ['column1', 'column2'];

const MyTable = () => {
  // initialize and store the columns states for future changes
  const [columnsStateMap, setColumnsStateMap] = useState<ColumnsState>(makeDefaultColumnsState(columnsToHide));

  return <ProTable
    columnsState={{
      value: columnsStateMap,
      onChange: setColumnsStateMap, // handle the columns states changes
    }}
  />
}
```