Table and filter columns different in MUI Data Grid

Question

In the Student Details column, I want to stack data values from three columns: Name, Major, and Year. Is it possible to do this while still maintaining the ability to filter by the individual columns? See image for an example where I want to filter by the Name and Major columns.

If not, is there another data grid library that would allow me to do this?

Answer 1

Yes, You can achieve this in MUI Datagrid. You can create a column which is hidden by default. But you can still filter rows by hidden columns. Check the steps below👇

1. Create a column with field: "year".

2. Hide the column in datagrid:

   <DataGrid
       columnVisibilityModel={{ year: false,}}
       //other props
   />
   

3. Now if you open the filters, you will find this hidden column option in the list of filters.