TableNex

Advanced Features

TableNex offers advanced features to level up your table. This section explains how to use fixedColumns, expandedRows, and footer for a more dynamic and polished display.

Advanced Features Overview

Prop
Type
Description
fixedColumns
string[]
List column accessor names to pin (e.g., ["id", "name"]). Keeps specific columns visible while scrolling horizontally.
expandedRows
ExpandedRow[]
Shows extra content below specific rows (e.g., details, sub-tables).
footer
FooterRow[]
Adds summary or additional rows at the table’s bottom.

Feature Details

  1. fixedColumns
    • Type: string[]
    • Usage: List column accessor names to pin (e.g., ["id", "name"]).
    • Example: fixedColumns={["id", "name"]}
    • Result: "id" and "name" columns stay fixed as you scroll sideways.
  2. expandedRows
    • Type: ExpandedRow[]
    • Properties:
      • afterRowKey: string | number (matches keyField value, e.g., 1).
      • element: React.ReactNode (content to display, e.g., <div>Details</div>).
    • Usage: expandedRows={[{ afterRowKey: 1, element: <div className="p-2">More info for ID 1</div> }]}
    • Result: Extra content appears below the row where id: 1 (if keyField="id").
  3. footer
    • Type: FooterRow[]
    • Properties:
      • cells: Array of { content: React.ReactNode, colSpan?: number, className?: string, style?: React.CSSProperties }
      • className: Row class (e.g., "footer-row").
      • style: Row styles (e.g., { fontSize: "14px" }).
    • Usage: footer={[{ cells: [{ content: "Total", colSpan: 2, className: "font-bold" }, { content: "$1000" }], className: "bg-gray-100" }]}
    • Result: A footer row with "Total" spanning 2 columns and "$1000" next to it.

Full Example

Here’s how to use TableNex with advanced features:

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

const MyTable = () => {
  const data = [
    { id: 1, name: "John", amount: 500 },
    { id: 2, name: "Jane", amount: 500 }
  ];
  const columns = [{ accessor: "id" }, "name", "amount"];
  return (
    <TableNex
      data={data}
      columns={columns}
      fixedColumns={["id"]}
      expandedRows={[
        { afterRowKey: 1, element: <div className="p-2">John’s details</div> }
      ]}
      footer={[
        {
          cells: [
            { content: "Total", colSpan: 2, className: "font-bold" },
            { content: "$1000" }
          ]
        }
      ]}
    />
  );
};

Tips

  • Fixed Columns: Ideal for wide tables; use with key columns.
  • Expanded Rows: Match afterRowKey to keyField for accuracy.
  • Footer: Use colSpan and styles for clean summaries.


PreviousStyling
Next TypeScript Support