0

I just want to change the styling for the different density modes like "compact" and "comfortable" in the <MaterialReactTable /> table component. This is using the material-react-table npm library by Material UI.

Jeremy Bernier
  • 1,746
  • 1
  • 17
  • 17

1 Answers1

0
import React, { useMemo } from 'react';
import { MaterialReactTable } from 'material-react-table';
import { data } from './makeData';

const Example = () => {
  const columns = useMemo(
    //column definitions...
    [],
  );

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      enableDensityToggle={false}
      initialState={{ density: 'compact' }}
    />
  );
};

export default Example;

You can use something like this, also detail are available in below link<

https://www.material-react-table.com/docs/guides/density-toggle

Sanu Kumar
  • 86
  • 7
  • How do I add CSS though for a specific density? Like say if I wanted to set different padding values for "compact" and "comfortable" – Jeremy Bernier Aug 28 '23 at 07:43
  • Try using this. `const specialCSS = ""` `
    ` Link: https://github.com/mbrn/material-table/issues/290 options={{ cellStyle: { padding: '0.3em'}, headerStyle: { padding: '0.3em'}, }}     – Sanu Kumar Aug 29 '23 at 01:55