Have the ability to have row gap with x pixels

[martinianol]

What problem does this feature solve?

Row Gap between rows.

rsuite-table is fantastic and I use it all the time. Thanks for such a fine product.

However, I see there is a small flaw that could be easy to implement:
When creating a table there is no way of creating a gap between the rows.
I tried margins, paddings, adding an empty element with certain height, you name it and nothing seems to work. If I'm being a fool here, pls do say how could this be achieved.

As I understand rstuite-table places each row calculating with a transform: translate(0px, rowHeight) in CSS
So, I believe it might be "easy" to implement to have a property rowGap?:number that adds this number to the transformation.

Here are some screenshots and videos of how I manually did it with the chrome inspector's tools.

Video as it comes out from rsuite-table
rowHeight: 60px
https://github.com/rsuite/rsuite-table/assets/78988545/03796d84-0788-4cd1-94a2-630b628965fb

Request feature:
rowHeight: 60px
rowGap: 16px

rsuite-gap.mp4

What does the proposed API look like?

[martinianol]

Hi,

I solved this issue with renderRow passing a TableRow component with childrens.

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

I gave the table a rowHeight of 64px as prop
I gave the TableRow height: 100% and max-height: 48px. This will limit the height of the visual row to 48px even though the table row has a 64px
margin-top: 4px
margin-bottom: 12px

So visually you have a 48px row with a 16px gap between each other

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

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

const TableRow = styled.div`
  margin: 4px 12px 12px 4px; //margins on right and left are for the box shadows to be seen. make sure to add it to the row header for alignment
  height: 100%;
  max-height: 48px;
  background-color:  white
  box-shadow: 0px 3px 6px 0.08
  transition: box-shadow 0.05s linear 0s;
  :hover {
    box-shadow: 0px 3px 6px 0.25
  }
`;

[martinianol]

For comment above Im closing this one