setCellHeaderProps not working

[d120717]

Version mui-datatables:4.1.2

import React from "react"; import ReactDOM from "react-dom"; import MUIDataTable from "mui-datatables";

const table = (): JSX.Element => { const columns = [ { name: "Name", options: { filter: true, setCellProps: () => ({ style: { whiteSpace: "nowrap", position: "sticky", left: "0", background: "gray", zIndex: 95, }, setCellHeaderProps: () => ({ style: { whiteSpace: "nowrap", position: "sticky", left: 0, background: "red", zIndex: 111, }, }), }), }, }, { name: "Title", options: { filter: true, setCellProps: () => ({ style: { whiteSpace: "nowrap", position: "sticky", left: "0", background: "gray", zIndex: 95, }, setCellHeaderProps: () => ({ style: { whiteSpace: "nowrap", position: "sticky", left: 0, background: "red", zIndex: 111, }, }), }), }, }, { name: "Location", options: { filter: false, setCellProps: () => ({ style: { whiteSpace: "nowrap" } }), }, }, { name: "Age", options: { filter: true, }, }, { name: "Salary", options: { filter: true, sort: false, }, }, { name: "Salary1", options: { filter: true, sort: false, }, }, { name: "Salary2", options: { filter: true, sort: false, }, }, { name: "Phone Number", options: { filter: true, sort: false, setCellProps: () => ({ style: { whiteSpace: "nowrap" } }), }, }, ];

const data = [ [ "Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", "$100,000", "$100,000", "555-5555", ], ];

const options = { filter: true, filterType: "dropdown", responsive: "standard", fixedHeader: true, fixedSelectColumn: false, tableBodyHeight: "400px", };

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

export default table;

top is my code,

but i use setCellHeaderProps in my code with red color and not working

[kitaroar]

I have problem with header background too I found that stickyHeader was the culprit. I saw it is enabled by default.

Try putting

fixedHeader: false,

in options

If you need fixedHeader in your table you can use custom styling for changing background

[d120717]

thanks for reply. buy i try it fixedHeader: false, setCellHeaderProps still not working.

or have another method to custom header?

[kitaroar]

You wrong close some brackets in your code

Try this code

{
    name: 'Title',
    options: {
        filter: true,
        setCellProps: () => ({
            style: {
                whiteSpace: 'nowrap',
                position: 'sticky',
                left: '0',
                background: 'gray',
                zIndex: 95,
            },
        }),
        setCellHeaderProps: () => ({
            style: {
                whiteSpace: 'nowrap',
                position: 'sticky',
                left: 0,
                background: 'red',
                zIndex: 111,
            },
        }),
    },
},