How to Properly Add a Border to a Table Using TanStack React Table

[heronlancellot]

Hey yo everyone,

I wanted to share a quick tip on adding borders to a Table when working with TanStack React Table, as I encountered some challenges that might help others.

If you’re trying to add a border with Tailwind CSS (e.g., border, border-radius), you may find that it doesn’t work as expected. This is due to how styles cascade and how Table (or its child elements) might handle overflow or conflicting CSS rules.

To ensure the border displays correctly, you can use inline styles like this:

<Table
  style={{
    borderRadius: "6px", // To apply rounded corners
    borderColor: "var(--color-lightDark)", // Specify the border color
    borderWidth: "1px", // Define the border width
    overflow: "hidden", // Ensures rounded corners apply correctly
  }}
>
</Table>

A few important notes:

Use style for Border Properties: Applying border styles through Tailwind classes like border, border-lightDark, etc., might not work as expected, depending on your table's structure or library-specific behavior.
overflow: hidden is Essential: This ensures the border-radius works properly, especially if the table content overflows its container.
This approach should work consistently and ensures that borders and rounded corners are applied as intended.

I hope this helps other developers who might run into similar issues! Feel free to share any other tips or feedback.