Customizing Your React Table Look with Simple Table's Themes

The Styling Challenge in React Tables

Let's be honest—customizing the look of React data tables has traditionally been a nightmare. You've probably experienced the frustration of trying to override deeply nested CSS, fighting with `!important` declarations, or dealing with component libraries that make simple styling changes feel impossible.

Simple Table changes this completely. Built from the ground up with customization in mind, it provides multiple powerful ways to make your tables look exactly how you want them to look, without the usual headaches.

What Makes Simple Table Different

• CSS Variables: Complete control with modern CSS custom properties
• Unique Class Names: Every HTML element has a specific, targetable class
• Built-in Themes: Professional themes ready to use out of the box
• Custom Renderers: Complete control over how cells and headers look

Built-in Themes: Professional Looks in Seconds

Simple Table comes with 5 carefully crafted themes that you can apply instantly. Each theme is designed to work well in different contexts and design systems. Click on any theme below to see it in action:

Light Theme

Clean, minimal design perfect for most applications. Great contrast and readability.

Dark Theme

Modern dark interface, easy on the eyes for extended use or night mode applications.

Sky Theme

Crisp blue accents perfect for business applications and dashboards.

Violet Theme

Vibrant purple gradients for creative applications and modern interfaces.

Neutral Theme

Subtle, professional styling that blends seamlessly with any design system.

CSS Variables: Total Customization Control

Simple Table uses CSS custom properties (variables) for all styling, giving you unprecedented control over appearance. You can override any aspect of the table's look by simply defining new values for these variables.

Create Your Own Custom Theme

Here's how easy it is to create a completely custom theme using CSS variables:

React TSX

Copy

1/* Define your custom theme */
2.theme-custom {
3/* Primary Colors */
4--st-primary-color: #8b5cf6;
5--st-secondary-color: #a78bfa;
6--st-accent-color: #c4b5fd;
7
8/* Background Colors */
9--st-background-color: #faf5ff;
10--st-header-background-color: linear-gradient(135deg, #8b5cf6, #a855f7);
11--st-row-background-color: #ffffff;
12--st-odd-row-background-color: #f8fafc;
13--st-hover-row-background-color: #ede9fe;
14
15/* Text Colors */
16--st-text-color: #374151;
17--st-header-text-color: #ffffff;
18--st-muted-text-color: #6b7280;
19
20/* Border and Effects */
21--st-border-color: #e5e7eb;
22--st-selected-cell-background-color: #a855f7;
23--st-selected-cell-border-color: #7c3aed;
24
25/* Interactive Elements */
26--st-scrollbar-thumb-color: #8b5cf6;
27--st-resize-handle-color: #a855f7;
28}

Pro Tip: Live Theme Development

Want to experiment with themes visually? Try our interactive Theme Builder to create and preview custom themes in real-time:

Unique Class Names: Precision Styling

Every HTML element in Simple Table has a unique, semantic class name. This means you can target any specific part of the table with surgical precision—no more fighting with overly specific selectors or hunting through component internals.

Table Structure Classes

.simple-table - Main table container
.simple-table-header - Header row
.simple-table-header-cell - Individual header cells
.simple-table-body - Table body
.simple-table-row - Data rows

Cell and State Classes

.simple-table-cell - Individual data cells
.selected - Selected cells/rows
.sortable - Sortable headers
.resizing - Columns being resized
.pinned-left - Left-pinned columns

Cell Renderers: Complete Control Over Cell Content

Sometimes CSS isn't enough—you need complete control over how cells are rendered. Simple Table's cell renderers let you replace the default cell content with any React component, giving you unlimited flexibility.

Creating Custom Cell Renderers

Cell renderers are React components that receive the cell data and can render anything you want:

React TSX

Copy

1const headers = [
2{
3accessor: "email",
4label: "Email",
5width: 200,
6type: "string",
7cellRenderer: ({ row }) => (
8  <div className="flex items-center">
9    <span className="text-gray-400 mr-2">✉</span>
10    <a href={`mailto:${row.email}`} className="text-blue-600 hover:underline">
11      {row.email}
12    </a>
13  </div>
14),
15},
16{
17accessor: "status",
18label: "Status",
19width: 120,
20type: "string",
21cellRenderer: ({ row }) => {
22  const status = row.status;
23  const color = status === "active" ? "green" : 
24               status === "inactive" ? "red" : "yellow";
25  const icon = status === "active" ? "✓" : 
26              status === "inactive" ? "✕" : "!";
27
28  return (
29    <div className={`flex items-center text-${color}-500 capitalize`}>
30      <span className="mr-1 font-bold">{icon}</span>
31      {status}
32    </div>
33  );
34},
35},
36{
37accessor: "progress",
38label: "Progress",
39width: 150,
40type: "number",
41cellRenderer: ({ row }) => {
42  const progress = row.progress;
43  const color = progress < 30 ? "red" : 
44               progress < 70 ? "yellow" : "green";
45
46  return (
47    <div className="w-full">
48      <div className="text-xs mb-1">{progress}%</div>
49      <div className="w-full bg-gray-200 rounded-full h-2.5">
50        <div
51          className={`bg-${color}-500 h-2.5 rounded-full`}
52          style={{ width: `${progress}%` }}
53        />
54      </div>
55    </div>
56  );
57},
58},
59];

Cell Renderer Use Cases

• Interactive buttons and controls
• Progress bars and data visualizations
• Status badges and icons
• Formatted numbers and dates
• Links and clickable elements
• Rich content with images and media

Header Renderers: Interactive and Beautiful Headers

Just like cell renderers, header renderers give you complete control over how column headers look and behave. Create interactive headers with custom sorting indicators, filters, or any other functionality you need.

Building Interactive Headers

The demo above shows interactive headers with custom sorting indicators and hover effects:

React TSX

Copy

1const createHeaderRenderer = (key, label) => {
2return ({ header }) => (
3<div
4  style={{
5    display: "flex",
6    alignItems: "center",
7    justifyContent: "space-between",
8    cursor: "pointer",
9    fontWeight: 600,
10    fontSize: "14px",
11    padding: "4px 0",
12    transition: "all 0.2s ease",
13  }}
14  onClick={() => handleSort(key)}
15  onMouseEnter={(e) => {
16    e.currentTarget.style.color = "#6366f1";
17    e.currentTarget.style.transform = "translateY(-1px)";
18  }}
19  onMouseLeave={(e) => {
20    e.currentTarget.style.color = "#374151";
21    e.currentTarget.style.transform = "translateY(0)";
22  }}
23>
24  <span>{label}</span>
25  <span style={{ fontSize: "12px", opacity: 0.7 }}>
26    {getSortIndicator(key)}
27  </span>
28</div>
29);
30};
31
32const headers = [
33{
34accessor: "name",
35label: "Star Name",
36width: 200,
37type: "string",
38headerRenderer: createHeaderRenderer("name", "Star Name"),
39},
40// ... more headers
41];

Header Renderer Ideas

• Custom sorting indicators with animations
• Inline filter inputs and dropdowns
• Column-specific action buttons
• Help tooltips and documentation links
• Data type indicators and formatting hints
• Responsive headers that adapt to screen size

Best Practices for Table Customization

Styling Strategy

✓Start with built-in themes, then customize with CSS variables
✓Use unique class names for precise targeting
✓Test your styles across different screen sizes
✓Consider accessibility and color contrast

Custom Renderers

✓Keep renderers lightweight for better performance
✓Use memo for complex renderers to prevent re-renders
✓Maintain consistent styling across custom components
✓Handle loading and error states gracefully

Make Your Tables Truly Yours

Simple Table's approach to customization represents a fundamental shift in how React data grids should work. Instead of fighting against the library to achieve your desired look, you get powerful, intuitive tools that make customization a joy rather than a chore.

Whether you need a quick theme change, precise CSS control, or completely custom cell rendering, Simple Table has you covered. The combination of CSS variables, unique class names, and custom renderers gives you the flexibility to create tables that perfectly match your application's design—without sacrificing performance or functionality.

Ready to Transform Your React Tables?

Start building beautiful, customizable tables with Simple Table's powerful theming system. Join thousands of developers already using Simple Table.

Get Started View on NPM