Dynamic Table

DynamicTable

Reusable typed table component used across modules for read-only display, row click handling, loading states, and optional row selection.

Current Props

import React from "react";
import type { Column } from "@/components/BusinessTable";

interface DynamicTableProps<T> {
    title?: string;
    data: T[];
    columns: Column<T>[];
    rowKey: keyof T;
    onSelect?: (id: string) => void;
    actions?: React.ReactNode;
    loading?: boolean;
    enableRowSelection?: boolean;
    onRowSelection?: (selectedIds: (string | number)[]) => void;
    /** @deprecated Use `actions` instead. */
    headerActions?: React.ReactNode;
}

Prop	Type	Description
title	string	Optional header title
data	T[]	Rows to render
columns	Column<T>[]	Column definitions
rowKey	keyof T	Field used to derive row id
onSelect	(id: string) => void	Row click callback
actions	ReactNode	Header actions (preferred)
loading	boolean	Shows loading row in table head
enableRowSelection	boolean	Enables checkbox selection
onRowSelection	(selectedIds: (string | number)[]) => void	Emits selected row ids
headerActions	ReactNode	Deprecated alias for actions

Usage

import { DynamicTable, type Column } from "@/components/DynamicTable";

type Team = {
    id: number;
    name: string;
    status: "active" | "inactive";
};

const columns: Column<Team>[] = [
    { key: "name", label: "Name" },
    { key: "status", label: "Status" },
];

<DynamicTable<Team>
    title="Teams"
    data={teams}
    columns={columns}
    rowKey="id"
    loading={isLoading}
    onSelect={(id) => openTeam(id)}
    actions={<button onClick={openCreate}>Create Team</button>}
/>;