TableNex

Styling

TableNex offers flexible styling through props and meaningful CSS classes. You can use built-in options, custom CSS, or Tailwind classes (with overrides if needed). This section covers theming, including styledRows and styledColumns, with tips for light/dark modes.

Built-In Styling Props

TableNex provides two props for easy theming:

Prop
Type
Default
Description
styles
Partial<TableStyles>
{ rounded: "sm", spacing: "md", columnBorder: "none", rowBorder: "sm", fontSize: "0.9rem" }
Customizes table design with sizing and border options.
colorScheme
Partial<ColorScheme>
{ PRIMARY: "#ffffff", SECONDARY: "#f9f8fd", ACCENT: "#f9f8fd", BORDER: "#f2f2f2" }
Sets color theming for backgrounds and borders.
  1. styles
    • Type: Partial<TableStyles>
    • Default: { rounded: "sm", spacing: "md", columnBorder: "none", rowBorder: "sm", fontSize: "0.9rem" }
    • Options:
      • rounded: "none" | "sm" | "md" | "lg" | "xl" (0, 4px, 8px, 12px, 16px)
      • spacing: "none" | "sm" | "md" | "lg" | "xl" (0, 8px, 12px, 14px, 16px)
      • columnBorder/rowBorder: "none" | "sm" | "md" | "lg" | "xl" (0, 1px, 2px, 3px, 4px)
      • fontSize: e.g., "1rem"
    • Example: styles={{ rounded: "lg", spacing: "md", columnBorder: "md" }}
  2. colorScheme
    • Type: Partial<ColorScheme>
    • Default: { PRIMARY: "#ffffff", SECONDARY: "#f9f8fd", ACCENT: "#f9f8fd", BORDER: "#f2f2f2" }
    • Properties:
      • PRIMARY: Main background.
      • SECONDARY: Hover/fixed column background.
      • ACCENT: Header background.
      • BORDER: Border color.
    • Tip: For light/dark themes, use CSS variables (e.g., "var(--primary)").
    • Example: colorScheme={{ PRIMARY: "var(--primary)", BORDER: "var(--border)" }}

CSS Class Targeting

TableNex elements have descriptive class names for custom styling. Import "react-tablenex/style.css" for defaults, then override with CSS or Tailwind. Key classes include:

  • .tablenex_container: Outer wrapper.
  • .tablenex_table: Main table.
  • .tablenex_header-cell: Headers.
  • .tablenex_data-cell: Data cells.
  • .tablenex_row: Rows.
  • .tablenex_footer-row: Footer rows.
  • .tablenex_expanded-row: Expanded rows.
  • .tablenex_mobile: Mobile container (when responsive=).

Example:

Custom CSS for header cells

CSS
.tablenex_header-cell {
  background: var(--accent);
}

Styling Rows and Columns

Use styledRows and styledColumns for specific styling, with Tailwind support:

  1. styledRows
    • Type: StyledRow[]
    • Properties:
      • keyValue: Matches keyField value (e.g., 1).
      • style: React.CSSProperties (e.g., { backgroundColor: "yellow" }).
      • className: Custom class (e.g., "bg-yellow-200")—Tailwind works seamlessly.
    • Note: If Tailwind classes don’t apply due to defaults, use ! (e.g., "!bg-red-300").
    • Example: styledRows={[{ keyValue: 1, style: { color: "red" }, className: "!bg-yellow-200 text-lg" }]}
  2. styledColumns
    • Type: StyledColumn[]
    • Properties:
      • columnName: Matches accessor (e.g., "id").
      • style: React.CSSProperties (e.g., { fontWeight: "bold" }).
      • className: Custom class (e.g., "bg-blue-100")—Tailwind works out of the box.
    • Note: Use ! (e.g., "!text-center") if Tailwind styles are overridden.
    • Example: styledColumns={[{ columnName: "id", style: { color: "blue" }, className: "!bg-blue-100" }]}

Full Example

Here’s how to use TableNex with various styling props:

JavaScript
import TableNex from "react-tablenex";
import "react-tablenex/style.css";

const MyTable = () => {
  const data = [{ id: 1, name: "John" }, { id: 2, name: "Jane" }];
  return (
    <TableNex
      data={data}
      columns={[{ accessor: "id" }, "name"]}
      styles={{ rounded: "lg", spacing: "md" }}
      colorScheme={{ PRIMARY: "var(--primary)", ACCENT: "var(--accent)" }}
      styledRows={[{ keyValue: 1, className: "!bg-yellow-200 font-bold" }]}
      styledColumns={[{ columnName: "id", className: "!bg-blue-100 text-center" }]}
    />
  );
};

CSS Variables for Themes

For light/dark mode support, define variables in your CSS:

CSS variables for theming

CSS
:root {
  --primary: #ffffff;
  --accent: #ddd;
  --border: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #1a1a1a;
    --accent: #333;
    --border: #666;
  }
}

Tips

  • Use styles and colorScheme with "var(--name)" for global theming.
  • Apply styledRows and styledColumns with Tailwind via className; add ! if needed.
  • Target classes for full control or custom themes.


PreviousProps and Configuration
Next Advanced Features