0

I have problem with collapsible table in react, when the table in collapsed mode it has gap between row. How to remove the gap?

I am using Material-React-Table

enter image description here

I want it to be like this

enter image description here

CollapsibleTableMain

 <div>
  <MaterialReactTable
    columns={columns}
    data={data}
    renderDetailPanel={({ row }) => (
      <Box
        sx={{
          display: 'grid',
          margin: 'auto',
          gridTemplateColumns: '1fr 1fr',
          width: '100%'
        }}
      >
        <CollapsibleTable id={row.id} />
      </Box>
    )}
    enableExpanding
  />
</div>

Collapsible Table

 <div>
  <MaterialReactTable
    columns={columns}
    data={data}
  />
</div>

Thank you in advanced

Nicky Apriliani
  • 321
  • 4
  • 25
  • there should be something wrong with your css – cantdocpp Aug 16 '23 at 04:23
  • What's this `CollapsibleTable` component? – 0xts Aug 16 '23 at 04:34
  • I am using Material-React-Table component https://www.material-react-table.com/docs/examples/advanced – Nicky Apriliani Aug 16 '23 at 04:54
  • Found no ``CollapsibleTable`` component in the link attached , if it is custom made can you show us the code for it . most likely the issue is with it . – Chakib Salah Aug 16 '23 at 05:03
  • Have you checked if there is any conflicting CSS for table styling? Material React Table dismounts children in the detail panel, so the `CollapsibleTable` component can't be the culprit. It may be some styling from your theme or somewhere causing this issue. – Dewaun Ayers Aug 16 '23 at 05:13
  • @DewaunAyers i just using component and didn't use any table styling, I had put my children panel in my question. – Nicky Apriliani Aug 16 '23 at 06:02

0 Answers0