Customizing Data Grids in React: Why Simple Table Makes Styling Easy

StylingCSSData Grids

Learn how Simple Table solves styling struggles and makes it easy to create a data grid that fits your app perfectly with CSS variables and customizable themes.

The Styling Challenge

One of the biggest frustrations when working with data grids is trying to customize their appearance. Most libraries either provide no styling at all, leaving you to build everything from scratch, or they come with such heavily opinionated styles that customizing them becomes a nightmare of CSS overrides and !important declarations.

Simple Table takes a different approach: it provides beautiful default styles that are easy to customize using standard CSS and Tailwind classes.

CSS Customization Made Simple

Here's how easy it is to customize Simple Table with regular CSS:

1. Basic Table Styling

/* Custom table styling */
.simple-table {
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Header styling */
.simple-table-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

/* Row styling */
.simple-table-row:nth-child(even) {
  background-color: #f8fafc;
}

.simple-table-row:hover {
  background-color: #e2e8f0;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

2. Cell-Specific Styling

/* Target specific columns */
.simple-table-cell[data-column="status"] {
  text-align: center;
  font-weight: bold;
}

.simple-table-cell[data-column="price"] {
  color: #059669;
  font-family: 'Monaco', monospace;
}

/* Selected cell styling */
.simple-table-cell.selected {
  background-color: #3b82f6;
  color: white;
  box-shadow: inset 0 0 0 2px #1d4ed8;
}

3. Dark Mode Support

/* Dark mode styling */
@media (prefers-color-scheme: dark) {
  .simple-table {
    background-color: #1f2937;
    color: #f9fafb;
  }

  .simple-table-row:nth-child(even) {
    background-color: #374151;
  }

  .simple-table-row:hover {
    background-color: #4b5563;
  }
}

Tailwind CSS Integration

Simple Table works seamlessly with Tailwind CSS. You can apply utility classes directly to customize the appearance:

import { SimpleTable } from "simple-table-core";

<SimpleTable
  defaultHeaders={headers}
  rows={data}
  className="rounded-xl shadow-2xl border-2 border-indigo-200"
  headerClassName="bg-gradient-to-r from-purple-500 to-pink-500 text-white"
  rowClassName="hover:bg-blue-50 transition-colors duration-200"
  cellClassName="border-b border-gray-100 px-4 py-3"
  theme="light"
/>
Pro Tip

You can mix and match CSS classes and Tailwind utilities for maximum flexibility. Simple Table's class-based approach means you have complete control over styling.

Why Easy Styling Matters

When data grid styling is easy, it means:

  • • Faster development cycles with less time fighting CSS
  • • Better consistency with your existing design system
  • • More time to focus on functionality rather than appearance
  • • Easier maintenance as your application evolves

Simple Table's approach to styling reflects our core philosophy: powerful functionality should come with sensible defaults, and customization should feel natural, not like a battle.

Try It Yourself

Want to see how easy styling can be? Try our interactive Theme Builder to create custom themes visually and see the results in real-time.

Ready to style your data grids the easy way?

Custom Theme GuideCustom Icons Guide

Experience the power of easy styling

Simple Table makes customizing data grids as easy as writing regular CSS. No complex overrides, no fighting with existing styles.

View on NPMBack to Home