Table Themes

Choose from our collection of beautiful table themes. Each theme is designed to match different design systems and use cases.

Our table component auto prepend the 'st-table' class to the table element. So, when you pass the 'border' className in the component it will be used as 'st-table-border'.

Simple

Clean and minimal table design

#	Title	Feature	Value	CTA
1	Plan A	Fast	120ms
2	Plan B	Medium	20ms	Learn More
#	Note	*	*	Data updated weekly

Class: simpleFile: simple.css

Border

Table with full borders around all cells

#	Title	Feature	Value	CTA
1	Plan A	Fast	120ms
2	Plan B	Medium	20ms	Learn More
#	Note	*	*	Data updated weekly

Class: borderFile: border.css

Stripe

Alternating row colors for better readability

#	Title	Feature	Value	CTA
1	Plan A	Fast	120ms
2	Plan B	Medium	20ms	Learn More
#	Note	*	*	Data updated weekly

Class: stripeFile: stripe.css

Tailwind

Modern Tailwind-inspired design with shadows

#	Title	Feature	Value	CTA
1	Plan A	Fast	120ms
2	Plan B	Medium	20ms	Learn More
#	Note	*	*	Data updated weekly

Class: tailwindFile: tailwind.css

Shadcn

Shadcn UI style table design

#	Title	Feature	Value	CTA
1	Plan A	Fast	120ms
2	Plan B	Medium	20ms	Learn More
#	Note	*	*	Data updated weekly

Class: shadcnFile: shadcn.css

How to Use

1. Import the CSS

You can import this CSS file in your app or layout file, or can directly add this in your global.css file.

2. Use the Theme Class

JSX
<TableCreator 
  data={table}
  className="border"
/>

3. Or Apply CSS Class Directly

You can create div with your desired class name and apply the theme class to it in Portable Text Table.

JSX
<div className="border-table">
  <table>
    {/* your table content */}
  </table>
</div>