Hiding columns

[skmills]

Is there a way to hide columns?

[amrelhady]

I don't think there is, couldn't find any Column property for it. I've tried two approaches.

1. Filter out the Column, something like this:

// update state
function hideColumn(column: string) {
    setState({...state, hiddenColumns: [...state.hiddenColumns, column]})
}

// component renders again after state change
const columns = useMemo(() => AllColumns.filter(c => state.hiddenColumns.indexOf(c.key) < 0), state.hiddenColumns)

...

<DataGrid columns={columns} .../>

2. CSS. Not a good solution. But if you want, you can set the cellClass Column property, and then alter the visibility with styles. (display, visibility, width/height, ...). Something along those lines:

Column = {..., cellClass: 'my-column-id'};

const hiddenClassList = state.hiddenColumns.map(c => 'hide-' + c).join(' ');

...

<div className={"grid " + hiddenClassList }
   <DataGrid columns={columns} .../>

.grid.hide-my-column-id .my-column-id { display: none }

[skmills]

The first option worked great. Thank you. I'm including the code I used using hooks for reference.

const [hiddenColumns, setHiddenColumns] = useState([]);

// update state
function hideColumn(column) {
    setHiddenColumns([...hiddenColumns, column])
}

function showColumn(column) {
    setHiddenColumns(hiddenColumns.filter(c => c !== column))
}

const columns = useMemo(() => { return AllColumns.filter(c => hiddenColumns.indexOf(c.key) < 0) }, [hiddenColumns])

...

<DataGrid columns={columns} .../>