Material-table: Add freezed columns feature.

[mbrn]

Add freezed columns feature.

[urirahimi]

Ideally freezed columns would work as they do in this demo https://devexpress.github.io/devextreme-reactive/react/grid/demos/featured/tree-data/

Where it has a fixed initial width and allows the user to drag/adjust after it is rendered

[mbrn]

no need for now.

[revskill10]

This is useful feature to have , @mbrn when will it be landed ?

[mbrn]

I opened this issue on the first days of material-table. But i am only one developer of material-table and it is my hobby project. So i can not promise a date about issues. But as you know, i resolve issues, add features day by day :)

[revskill10]

@mbrn The intended behaviour is ability to freeze header, footer, columns on the right, columns on the left. This is nessessary when our table has about 30 columns.
In my use case, i have a table with columns like day1, day2,...day31 for a month, so i want to unfreeze those columns, and freeze other columns like first_name, last_name

@mbrn Yup, i think most of serious projects started as a hobby project ;)

[mbrn]

You are right. I will add this feature asap.

[krunalsheth3]

+1 to this request.

[feleko]

+1 to this request

[MaxGorshkov]

+1 to this request

[JKrymarys]

+1 :)

[JKrymarys]

@all
Any workarounds in the meantime?

[ysmike]

+1 to this request

[PrincAm]

+1 as well :)

[omnislashbr]

+1

[joshling1919]

For anyone who needs a quick fix (not sure how good of a solution this is for all browsers), this codepen was a helpful example for how to implement this through CSS: https://codepen.io/paulobrien/pen/LBrMxa

Applying what the codepen did:

 const columns = [
    {
      title: 'Name',
      field: 'fullname',
      cellStyle: {
        backgroundColor: '#039be5',
        color: '#FFF',
        position: 'sticky',
        left: 0
      },
      headerStyle: {
        backgroundColor: '#039be5',
        position: 'sticky',
        left: 0,
        zIndex: 11
      }
    }
  ];
const Table = () => {
  return(
    <MaterialTable
        columns={columns}
        data={data}
        title={`Demo Title`}
        options={{
          headerStyle: {
            backgroundColor: '#01579b',
            color: '#FFF',
            position: 'sticky',
            top: 0
          }
        }}
    />
  );
}

[philg74]

+1 to this request.

[nisarg271]

+1 to this request.

[NickAlvesX]

+1 to this request.

[mbrn]

Hi,

I researched about this feature to find a effective way. Found a solution:

Drawing table twice and one will be absolute. But i have to make table-layout fixed when table has freezed columns.

Please check datatables solution. And give me your feedback.
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html

[gabriel-kohen-by]

@mbrn , what you had shown in the link is exactly the functionality folks are looking for.
I think that if you want to have also freeze columns on the right(maybe v2), you can work as well. You just put the dynamic table in the middle with the correct width and on the left and right of the dynamic tables you can show the frozen columns.

[codenamethanos]

Yes, the solution you mentioned is perfect. An option prop like this will do -

fixedColumns:   {
            leftColumns: 2
}

[mbrn]

This is done with 1.57.1

Please check the documentation: https://material-table.com/#/docs/features/fixed-columns

[vdh]

@mbrn Why did you hard-code a width onto every column now, even when we're not using this feature? It's even ahead of the this.props.headerStyle and columnDef.headerStyle spreads, so there's no way to fix it when it breaks a custom width style 😞