TableNex

TypeScript Support

TableNex is fully typed with TypeScript, making it ideal for type-safe projects. This section explains how to use its built-in types for a seamless development experience.

Built-In Types

TableNex exports all necessary interfaces from its module. Import them to define props and data structures.

Type
Description
TableProps
Main component props.
TableColumn
Column definitions (replaces TableCell).
StyledRow
Row styling options.
StyledColumn
Column styling options.
ExpandedRow
Expanded row content.
FooterRow
Footer row structure.
TableStyles
Styling options for table design.
ColorScheme
Color scheme options for theming.

Basic Usage with TypeScript

Define your data and props with types for full IDE support.

TypeScript
import TableNex, {
  TableProps,
  TableColumn,
} from "react-tablenex";
import "react-tablenex/style.css";

interface User {
  id: number;
  name: string;
  age: number;
}

const TypedTable: React.FC = () => {
  const data: User[] = [
    { id: 1, name: "John", age: 28 },
    { id: 2, name: "Jane", age: 34 },
  ];
  const columns: TableColumn[] = [
    { accessor: "id", header: "ID", width: "80px" },
    { accessor: "name", header: "Name" },
    { accessor: "age", header: "Age" },
  ];

  const props: TableProps = {
    data,
    columns,
    keyField: "id",
  };

  return <TableNex {...props} />;
};

Advanced Example

Use types for complex features like custom rendering and styling.

TypeScript
import TableNex, {
  TableProps,
  TableColumn,
  StyledRow,
  ExpandedRow,
} from "react-tablenex";
import "react-tablenex/style.css";

interface Order {
  orderId: string;
  customer: string;
  total: number;
}

const AdvancedTypedTable: React.FC = () => {
  const data: Order[] = [
    { orderId: "#1001", customer: "John", total: 500 },
    { orderId: "#1002", customer: "Jane", total: 700 },
  ];
  const columns: TableColumn[] = [
    { accessor: "orderId", header: "Order ID", width: "100px" },
    { accessor: "customer", header: "Customer" },
    {
      accessor: "total",
      header: "Total",
      render: (value) => `$${value}`,
    },
  ];
  const styledRows: StyledRow[] = [
    { keyValue: "#1001", className: "!bg-green-100" },
  ];
  const expandedRows: ExpandedRow[] = [
    { afterRowKey: "#1001", element: <div>Details for #1001</div> },
  ];

  const props: TableProps = {
    data,
    columns,
    keyField: "orderId",
    styledRows,
    expandedRows,
    responsive: true,
  };

  return <TableNex {...props} />;
};

Tips

  • Type Safety: Define your data interface (e.g., User, Order) to match data.
  • Custom Rendering: Use render: (value: React.ReactNode, row: Record<string, React.ReactNode>) => React.ReactNode for typed custom cells.
  • Importing: Use import type { TableProps } from "react-tablenex" for type-only imports if preferred.
  • Errors: TypeScript catches mismatches (e.g., wrong keyField) at compile time.


PreviousAdvanced Features
Next Troubleshooting