Support Fixed Columns?

[serv]

Is there a support for fixed columns?

Fixed columns are useful when you have a very large horizontally spanning table and you want to have some columns on the left or the right fixed for easier viewing.

It would be awesome if there was a prop for columns like fixed, that takes in a string value of "left" or "right" or null. And have the specified columns be fixed on the left side or the right side.

[gregnb]

Are you watching me? I better check for you in my closet. Hah, all jokes aside I literally just pushed up part one to this. So far it’s enabled for the header itself and I’ll add something for the individual columns. It’ll be an enum property something like

fixed: (‘left’, ‘right’)

[serv]

That's a great news. Closing this issue as it is in progress now. Thanks.

[danielo515]

Was this implemented ? I didn't saw any reference

[saurabh8nitrr]

Any update on this?

[iamvishalbisht]

Any update on fixing first column even with createMuiTheme ?

[k3nd477]

I'm interested in this functionality too. Updates?

[pellejacobs]

As a workaround, you can manually set the proper position: sticky css to the table cells and the header. It's not pretty but works:

import { TableCell } from "@material-ui/core";

const style = {
  position: "sticky",
  left: 0,
  background: "white",
  zIndex: 101
};

const columns = [
  {
    name: "Name",
    options: {
      customHeadRender: () => (
        <TableCell key="name" style={{ ...style, top: 0, zIndex: 102 }}>
          Name
        </TableCell>
      ),
      setCellProps: () => ({ style })
    }
  },
  "Title",
  "Location"
];

POC codesandbox for reference: https://codesandbox.io/s/rrr9zw4pwo

[JordanRoth]

Looks like that works for a single stickied column, but not multiple.

+1 for stickied column functionality.

[krunalsheth3]

That's a great news. Closing this issue as it is in progress now. Thanks. Do you know if we got the fixed columns checked in as well ?

[kaydeniz]

As a workaround, you can manually set the proper position: sticky css to the table cells and the header. It's not pretty but works:

import { TableCell } from "@material-ui/core";

const style = {
  position: "sticky",
  left: 0,
  background: "white",
  zIndex: 101
};

const columns = [
  {
    name: "Name",
    options: {
      customHeadRender: () => (
        <TableCell key="name" style={{ ...style, top: 0, zIndex: 102 }}>
          Name
        </TableCell>
      ),
      setCellProps: () => ({ style })
    }
  },
  "Title",
  "Location"
];

POC codesandbox for reference: https://codesandbox.io/s/rrr9zw4pwo

I implemented this code to my project and it works well, but I want to give different background color for odd and even rows, how can I do that?

[Kadle11]

Please Refer to #201 for striped rows.

Also for the newer release, setting style is sufficient for fixing the columns.

  setCellProps: () => ({ style: {
             position: "sticky",
             left: 0,
             background: "white",
             zIndex: 101
  }}),
  setCellHeaderProps: () => ({ style: {
              position: "sticky",
              left: 0,
              top: 0, //Incase Header is Fixed
              background: "blue",
              zIndex: 102
  }})

[hew4r]

Is there an example of more than one fixed column?

[alextrastero]

Since I've set the width of each "sticky" column I can do this:

    min-width: 200px;

    &:nth-child(1) {
      left: 0;
    }
    &:nth-child(2) {
      left: 200px;
    }
    &:nth-child(3) {
      left: 400px;
    }

Note: this is using emotion/styled

[cristiandaulisio]

any news on this?