I am using react-table. In this table I have a column. In that column header and column cell I need to change my maxWidth style property to be 60 for xs to xl and 30 for xxl. Is there a way to do this inline? I would like to only make changes inside this headerProps and cellProps style object rather than creating a seperate file and linking the component to it. Im not the best at scss this project is using scss.
Here is my accessor that has the cellProps and headerProps
const columns = [
{
accessor: 'firstName',
Header: 'First Name',
Cell: firstNameFormatter
},
{
accessor: 'lastName',
Header: 'Last Name',
Cell: lastNameFormatter
},
{
accessor: 'actions',
Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
headerProps: {
className: 'bg-light',
style: {
maxWidth: 60 <--- make this maxWidth 30 only for xxl screens
}
},
Cell: actionFormatter,
sticky: 'right',
cellProps: {
className: 'bg-light',
style: {
maxWidth: 60 <---- make this maxWidth 30 only for xxl screens
}
},
}
];
There is a way, but it's not pretty. Javascript can't use the media queries that CSS offers us, so it must be worked around
Set an event listener on the resize event. On the callback function, set some state value with the computed width of the window. Then set your maxwidth on the cellProps to be this state.
Something like this:
const [maxWidth, setMaxWidth] = useState(getWidth())
function getWidth() {
const body = document.querySelector("body")
const width = parseFloat(window.getComputedStyle(body).width)
if (width > 1200) {
return 30
} else {
return 60
}
}
window.addEventListener("resize", () => setMaxWidth(getWidth()))
const columns = [
{
accessor: 'firstName',
Header: 'First Name',
Cell: firstNameFormatter
},
{
accessor: 'lastName',
Header: 'Last Name',
Cell: lastNameFormatter
},
{
accessor: 'actions',
Header: <FontAwesomeIcon icon="cog" className="fs-1 ml-2" />,
headerProps: {
className: 'bg-light',
style: {
maxWidth: maxWidth
}
},
Cell: actionFormatter,
sticky: 'right',
cellProps: {
className: 'bg-light',
style: {
maxWidth: maxWidth
}
},
}
];