fixedHeader is true but header still moves

[slimandslam]

Issue Check list

• [X] Agree to the Code of Conduct
• [X ] Read the README
• [X ] You are using React 16.8.0+
• [X ] You installed styled-components
• [X ] Include relevant code

VIDEO IS ATTACHED BELOW SHOWING THE BEHAVIOUR

https://user-images.githubusercontent.com/229575/193338911-ad3d9a80-e103-4d35-ad86-73fe37087b25.mov

Describe the bug

fixedHeader is set to true. Changing fixedHeaderScrollHeight (or even removing it) does not seem to have any effect When I scroll the table, near the bottom/middle, the header starts to scroll up with the table and disappears. Tested on latest MacOS Firefox and Chrome

Expected behavior

I expected the header to remain fixed.

Code Sandbox, Screenshots, or Relevant Code

const fileTableStyles = {
  table: {
    style: {
      height: "430px",
    },
  },
  header: {
    style: {
      minHeight: "56px",
      fontSize: "36px",
      fontWeight: "bold",
      color: "#0275d8",
    },
  },
  headRow: {
    style: {
      borderTopStyle: "solid",
      borderTopWidth: "1px",
    },
  },
  headCells: {
    style: {
      fontSize: "20px",
      fontWeight: "bold",
    },
  },
  cells: {
    style: {
      fontSize: "16px",
    },
  },
};

<DataTable
      title={<><OverlayTrigger trigger={["hover", "focus", "click"]} rootClose defaultShow={false} placement="top-end" overlay={updateTooltip}><img style={{ cursor: "pointer" }} onClick={() => UpdateTable("browser")} src={refresh} alt="refresh" /></OverlayTrigger>
       <span>&nbsp;&nbsp;Your CSV Files</span></>}
      columns={columns}
      data={tableData}
      noDataComponent={<div>To begin, upload a file</div>}
      customStyles={fileTableStyles}
      fixedHeader={true}
      defaultSortFieldId="4"
      defaultSortAsc={false}
    />

Versions (please complete the following information)

MacOSX 12.6 Chrome 106.0.5249.61 "styled-components": "5.3.3" "react": "17.0.2", "react-data-table-component": "7.5.3",

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[slimandslam]

It's definitely not stale. It's well-documented and clear. It needs resolution. Thanks for botting tho. :-)

[itouoti12]

I solved the problem by adding overflow: 'auto' to the table’s style.

As shown below

const fileTableStyles = {
  table: {
    style: {
      height: "430px",
      overflow: "auto"
    },
  },
}