Mui-datatables: columns moving when clicking the column header for sorting

[nuel77]

When I click on the table headers (which toggles ascending and descending sort) the table columns move, is it the expected behavior or a bug, I have recreated the issue in the code sandbox I'm sharing, try clicking on the last column...
clicking on the first column resets the change for some reason...
https://codesandbox.io/s/hidden-firefly-wt5m1?file=/src/App.js

[patorjk]

Hmm, I think it would be preferable if they were more static. I'll investigate this further though and see if there's a way to minimize that behavior.

[wdh2100]

In my opinion, it seems to be the right behavior even though it seems strange.

Because it is correct to display the table based on the data currently being viewed.

If you want to calculate the size of each column based on the total data, it seems to require more complexity.

However, it's a little strange in the sample you showed.

If you want to fix the columns witdh of the table, use the method below.

import React from "react";
import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme= () =>
    createMuiTheme({
        overrides: {
            MUIDataTableHeadCell: {
                root: {
                    '&:first-child': {
                        width: '5%',
                    },
                    '&:nth-child(2)': {
                        width: '15%',
                    },
                    '&:nth-child(3)': {
                        width: '70%',
                    },
                    '&:last-child': {
                        width: '10%',
                    },
                },
            },
        },
    });

class BodyCellExample extends React.Component {

  render() {

    return (
      <MuiThemeProvider theme={theme}>
        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
      </MuiThemeProvider>
    );

  }
}

[valcanas]

Hi I have the same issue, with moving columns, I understand this should be the right behavior, but users don´t like it.
I tried the above method, but I´m getting this error:

Type '{ MUIDataTableHeadCell: { root: {}; }; }' is not assignable to type 'Overrides'.
Object literal may only specify known properties, and 'MUIDataTableHeadCell' does not exist in type 'Overrides'.ts(2322)

"@material-ui/core": "^4.9.0",
"@material-ui/icons": "^4.5.1",
"mui-datatables": "^3.4.1",

[ariel-upstream]

Try to add that to the overrides styles:

  MuiTableSortLabel: {
    root: {
      width: "0.5rem",
    },
  },