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:
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;
}
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
}}
/>
}