Making a compact/dense Table

[troypoulter]

I'm using the Table component and I'm trying to make it more compact/dense by ideally:

• Reducing the height to only cover the text and a smaller margin.
• Potentially make the font smaller.

I think using TableRowClassNameHandler is the go but am unsure of how best to implement it and I didn't see it used in one of the examples for reference.

[harshcut]

If you want to make everything smaller, try scale.

<Table data={data} scale={0.5}>
  <Table.Column prop="property" label="property" />
  <Table.Column prop="description" label="description" />
  <Table.Column prop="type" label="type" />
  <Table.Column prop="default" label="default" />
</Table>

[troypoulter]

Thank you for the workaround!

[troypoulter]

On a similar topic with using scale to reduce the whole table which works well, what if I wanted to make the rows narrower so they don't have as much white space above and below (red arrows).

I see in the docs there is props to change the width of the column and thinking I could use rowClassName prop but is there a simple way to reduce that white space so it can be more dense, without needing to reduce the text size.

[harshcut]

Apply min-height property for .thread-box and .cell. This worked for me in Next.js.

:global(.thead-box) {
  min-height: 1rem !important;
}

:global(.cell) {
  min-height: 1rem !important;
}

[troypoulter]

Is there a way to only apply that to tables I specify? I'm still new to this type of styling so unsure how best to set it for some tables and not all. Thank you for the continued support!! 🎉

[harshcut]

That should be easy. Try separating them into different components. Create a wrapper component for each Table for which you want a different style.