Add freezed columns feature. about material-table HOT 23 CLOSED

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

from material-table.

This is done with 1.57.1

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

from material-table.

You are right. I will add this feature asap.

from material-table.

+1 to this request

from material-table.

+1 to this request.

from material-table.

+1 :)

from material-table.

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

from material-table.

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

from material-table.

@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 😞

from material-table.

no need for now.

from material-table.

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

from material-table.

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 :)

from material-table.

@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 ;)

from material-table.

+1 to this request

from material-table.

@ALL
Any workarounds in the meantime?

from material-table.

+1 to this request

from material-table.

+1 as well :)

from material-table.

+1

from material-table.

+1 to this request.

from material-table.

+1 to this request.

from material-table.

+1 to this request.

from material-table.

@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.

from material-table.

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

fixedColumns:   {
            leftColumns: 2
}

from material-table.