Hide Columns by Default with ProTable

ProComponents 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 which provides a lot of useful features like 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
Wrap|Copy
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
Wrap|Copy
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
    }}
  />
}