Width:"fit-content" is not working in react-data-table-component

Question

I am using the react-data-table-component library to build tables. One of my tables has a very long title and I would like to wrap it. I tried multiple CSS properties in my browser console and figured width:"fit-content" is yielding the result I desire.

I am passing custom styles to my react-data-table through which we can style header as per our will.

import React, { useContext } from "react";
import DataTable from "react-data-table-component";
import Card from "@material-ui/core/Card";
import "./Tables.css";

import { MyContext } from "../../../../Context/MyProvider";


const columns = [
    {
        name: "Sl.No",
        selector: "Sl No",
    },
    {
        name: "Fiscal variables",
        selector: "Fiscal Variables",
    },
    {
        name: "Projection as per MTFP 2018-22",
        selector: "Projection as per MTFP 2018 22",
        wrap: true
    },
    {
        name: "Actuals 2019-20",
        selector: "Actuals 2019 20",
        wrap: true
    }
];


const customStyles = {
    header: {
        style: {
            fontSize: '22px',
            color: '#fff',
            backgroundColor: '#ff6359',
            minHeight: '56px',
            textAlign: "center",
            width: "fit-content"
        },
    }
};

const Table = () => {

    const ctx = useContext(MyContext)

    return (
        <div className="App">
            <Card>
                <DataTable
                    title="Table 2.27: Department wise profile of incomplete projects which are more than one crore as on 31 March 2020(` in crore)"
                    columns={columns}
                    data={ctx.reportData.Tables.Table}
                    customStyles={customStyles}
                />
            </Card>
        </div>
    );
}

export default Table;

In the snippet above rest of the CSS properties are working fine, except the width property.

what I am getting vs how I want it

what am I missing and why the width property is not working?

Answer 1

You just need to instead move the width attribute to the column object, like so...

const columns = [
    ...
    {
        name: "Fiscal variables",
        selector: "Fiscal Variables",
        width: "fit-content",
    },
    ...
];