Row Gap

[martinianol]

This is an issue I came across and took me a while to solve it so I'm sharing this with the community in case any one stumbles across it.

rstuite-table does not allow for row gap between rows. It just creates them one after each other

In order to solve this issue renderRow has to be used with a couple of tweaks.

Say we want a 48px row height (this is the visual content) and a row gap of 16px.

Firstly, rowHeight has to be set in Table with 64. hover should be set to false if not when hovering the whole 64px will be highlighted instead of the 48px of content we want.

Secondly, in renderRow, the component we pass needs to be set with a max-height of 48px

import { Table } from "rsuite-table";
const HEADER_HEIGHT = 40;
const ROW_HEIGHT = 64;

const renderRow = (children: ReactNode, rowData: any) => {
  if (!rowData) return children;

  return (
    <TableRow>
        {children}
    </TableRow>
  );
};


return (
  <Table
      data={documents}
      fillHeight
      headerHeight={HEADER_HEIGHT}
      hover={false}
      rowHeight={ROW_HEIGHT}
      renderRow={renderRow}
  >
    {renderTable}
 </Table>
)

const TableRow = styled.div`
  margin: 4px 12px 12px 4px; // SET ROW GAP, left and right margins are there for the box-shadows to be seen
  height: 100%;
  max-height: 48px; // THIS IS THE KEY TO MAKE IT WORK
  background-color:  white;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.08);
  transition: box-shadow 0.05s linear 0s;
  :hover {
    box-shadow: 0px 3px 6px rgba(0,0,0,0.25)  
   }
`;

Screen.Recording.2023-09-14.at.10.49.33.mov