TableNex

Props and Configuration

TableNex provides props to customize your table. This section lists all props, their types (from TypeScript definitions), defaults, and explanations.

Props Overview

Prop
Type
Default
Description
data
Record<string, React.ReactNode>[]
Required
Row data (e.g., [{ id: 1, name: "John Doe" }]).
columns
TableColumn[]
[]
Column definitions (e.g., [{ accessor: "id", width: "80px" }]).
keyField
string | { keyId: string; isVisible: boolean }
{ keyId: "id", isVisible: true }
Unique row identifier. Can be a string (e.g., "id" or "orderId") or an object with `id` (the key) and `isVisible` (whether to show the column). See details below.
fixedColumns
string[]
[]
Columns to pin (e.g., ["id", "name"]).
styledRows
StyledRow[]
[]
Styles rows by key (e.g., [{ keyValue: 1, style: { ... } }]).
styledColumns
StyledColumn[]
[]
Styles columns (e.g., [{ columnName: "id", style: { ... } }]).
responsive
boolean
false
Enables mobile view (e.g., true).
styles
Partial<TableStyles>
See below
Customizes design (e.g., { rounded: "lg" }).
footer
FooterRow[]
[]
Footer rows (e.g., [{ cells: [{ content: "Sum" }] }]).
expandedRows
ExpandedRow[]
[]
Adds content below rows (e.g., [{ afterRowKey: 1, element: <div>...</div> }]).
noDataMessage
React.ReactNode
"No data found"
Text when table is empty (e.g., "Nothing here!").
colorScheme
Partial<ColorScheme>
See below
Custom colors (e.g., { PRIMARY: "#fff" }).

Default Values

  • - styles: { rounded: "sm", spacing: "md", columnBorder: "none", rowBorder: "sm", fontSize: "0.9rem" }
  • - colorScheme: { PRIMARY: "#ffffff", SECONDARY: "#f9f8fd", ACCENT: "#f9f8fd", BORDER: "#f2f2f2" }

Key Prop Details

  1. data
    • Type: Record<string, React.ReactNode>[]
    • Example: [{ id: 1, name: "John Doe", details: <div>Info</div> }]
  2. columns
    • Type: TableColumn[]
    • Properties:
      • accessor: string (e.g., "id")
      • header: React.ReactNode (e.g., Name)
      • width: string (e.g., "80px")
      • style: React.CSSProperties (e.g., { color: "blue" })
      • className: string (e.g., "header-class")
      • render: (value, row) => React.ReactNode (e.g., (val) => <b>{val}</b>)
    • Example: { accessor: "name", header: "Name", width: "200px" }
  3. keyField
    • Type: string | { keyId: string; isVisible: boolean }
    • Default: { keyId: "id", isVisible: true }
    • Purpose: Tells TableNex which column has unique values to identify rows and whether to display it.
    • How It Works:
      • Default { keyId: "id", isVisible: true }: Uses id values (e.g., 1, 2) for styledRows (keyValue) and expandedRows (afterRowKey), with the column visible.
      • Legacy String (e.g., "orderId"): If data=[{ orderId: "#234234", ... }], set keyField="orderId". Then keyValue: "#234234" styles that row, afterRowKey: "#234234" expands it, and the column is visible by default.
      • Object (e.g., { keyId: "name", isVisible: false }): If keyField={ keyId: "name", isVisible: false }, afterRowKey: "John Doe" targets that row, and the name column is hidden.
    • Tip: Choose a column with unique values (like IDs) for reliable styling, expanding, and sorting. Use the object format to control visibility.
  4. fixedColumns
    • Type: string[]
    • Example: ["id", "name", "age", "salary"]
  5. styledRows
    • Type: StyledRow[]
    • Properties:
      • keyValue: string | number (e.g., 1)
      • style: React.CSSProperties (e.g., { backgroundColor: "yellow" })
      • className: string (e.g., "highlight")
    • Example: [{ keyValue: 1, style: { backgroundColor: "yellow" }, className: "row-style" }]
  6. styledColumns
    • Type: StyledColumn[]
    • Properties:
      • columnName: string (e.g., "id")
      • style: React.CSSProperties (e.g., { backgroundColor: "yellow" })
      • className: string (e.g., "col-style")
    • Example: [{ columnName: "id", style: { backgroundColor: "yellow" }, className: "id-col" }]
  7. responsive
    • Type: boolean
    • Example: true
  8. styles
    • Type: Partial<TableStyles>
    • Properties:
      • rounded/spacing/columnBorder/rowBorder: "none" | "sm" | "md" | "lg" | "xl"
      • fontSize: string (e.g., "1rem")
    • Example: { rounded: "lg", spacing: "md", columnBorder: "md", rowBorder: "md" }
  9. footer
    • Type: FooterRow[]
    • Properties:
      • cells: Array of { content: React.ReactNode, colSpan?: number, className?: string, style?: React.CSSProperties }
      • className: string (e.g., "footer-row")
      • style: React.CSSProperties (e.g., { fontSize: "14px" })
    • Example: [{ cells: [{ content: "Sum", colSpan: 6, style: { fontWeight: "bold" }, className: "sum-cell" }, { content: "$252,000" }], className: "footer-row" }]
  10. expandedRows
    • Type: ExpandedRow[]
    • Properties:
      • afterRowKey: string | number (e.g., 1)
      • element: React.ReactNode (e.g.,
        Info
        )
    • Example: [{ afterRowKey: 1, element: <div>Details</div> }]

Usage Example

Here's how to use TableNex with various props:

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

const MyTable = () => {
  const data = [{ orderId: "#234234", name: "John" }];
  return (
    <TableNex
      data={data}
      columns={[{ accessor: "orderId", width: "80px" }, "name"]}
      keyField="orderId"
      responsive={true}
      styles={{ rounded: "lg", spacing: "md", columnBorder: "md",  rowBorder: "md" }}
      footer={[{ cells: [{ content: "Total", className: "total" }] }]}
      expandedRows={[{ afterRowKey: "#234234", element: <div>Details</div> }]}
    />
  );
};

Note on keyField and Column Targeting

  • - keyField: Defaults to "id". Set it to a unique column (e.g., "orderId") to target rows for styledRows (keyValue) and expandedRows (afterRowKey). Use a column with distinct values for consistency.
  • - Case-Insensitive: Column names (e.g., accessor, fixedColumns, columnName) ignore case. "Id" and "id" both work.


PreviousInstallation
Next Styling