@manikantsharma/custom-table

Custom Table Component

A highly customizable, feature-rich table component built with MUI Joy and TypeScript. Perfect for creating data tables with sorting, pagination, selection, and custom rendering capabilities.

Features

• 🎯 TypeScript Support - Full type safety and IntelliSense
• 🎨 MUI Joy Integration - Beautiful, modern design with Joy UI components
• 🔄 Sorting - Click column headers to sort data
• 📄 Pagination - Built-in pagination with customizable page sizes
• ✅ Selection - Single or multi-row selection with bulk actions
• 🎭 Custom Rendering - Render custom components in cells
• 📱 Responsive - Mobile-friendly responsive design
• 🎛️ Highly Configurable - Extensive props for customization
• 🔧 Controlled & Uncontrolled - Works with external state management or internal state

Installation

npm install @yourname/custom-table

# Peer dependencies (if not already installed)
npm install react react-dom @mui/joy @mui/icons-material @mui/utils

Quick Start

import React from "react";
import { CustomTable, TableColumn } from "@yourname/custom-table";

interface User {
  id: number;
  name: string;
  email: string;
  status: "active" | "inactive";
}

const data: User[] = [
  { id: 1, name: "John Doe", email: "[e-mail]", status: "active" },
  { id: 2, name: "Jane Smith", email: "[e-mail]", status: "inactive" },
];

const columns: TableColumn<User>[] = [
  { id: "name", label: "Name", sortable: true },
  { id: "email", label: "Email", sortable: true },
  { id: "status", label: "Status", sortable: true },
];

function MyTable() {
  return (
    <CustomTable
      data={data}
      columns={columns}
      selectable={true}
      pagination={true}
      toolbarTitle="Users"
    />
  );
}

API Reference

CustomTable Props

| Prop | Type | Default | Description | | ------------------- | ----------------------------------- | ------------------------------- | -------------------------------- | -------------------------- | ------------ | ------------- | | data | T[] | Required | Array of data objects to display | | columns | TableColumn<T>[] | Required | Column definitions | | selectable | boolean | false | Enable row selection | | selectedIds | readonly string[] | [] | Controlled selection state | | onSelectionChange | (ids: readonly string[]) => void | - | Selection change handler | | getRowId | (row: T, index: number) => string | (row, index) => String(index) | Extract unique ID from row | | sortable | boolean | true | Enable sorting | | defaultSort | {column: keyof T, direction: 'asc' | 'desc'} | - | Initial sort configuration | | pagination | boolean | true | Enable pagination | | defaultPageSize | number | 5 | Initial page size | | pageSizeOptions | number[] | [5, 10, 25] | Available page sizes | | toolbarTitle | string | 'Data Table' | Table title in toolbar | | bulkActions | TableAction[] | - | Custom bulk actions | | loading | boolean | false | Show loading state | | emptyMessage | string | 'No data available' | Message when no data | | onRowClick | (row: T, index: number) => void | - | Row click handler | | variant | 'outlined' | 'soft' | 'solid' | 'plain' | 'outlined' | Table variant | | size | 'sm' | 'md' | 'lg' | 'md' | Table size |

TableColumn Interface

interface TableColumn<T = any> {
  id: keyof T; // Column data key
  label: string; // Column header text
  numeric?: boolean; // Right-align content
  sortable?: boolean; // Enable sorting (default: true)
  width?: string | number; // Column width
  align?: "left" | "center" | "right"; // Content alignment
  render?: (value: any, row: T, index: number) => React.ReactNode; // Custom renderer
}

TableAction Interface

interface TableAction {
  icon: React.ReactNode; // Action icon
  tooltip: string; // Tooltip text
  onClick: (selectedIds: readonly string[]) => void; // Click handler
  color?: "primary" | "neutral" | "danger" | "success" | "warning"; // Action color
  variant?: "solid" | "soft" | "outlined" | "plain"; // Action variant
}

Advanced Usage Examples

Custom Cell Rendering

const columns: TableColumn<User>[] = [
  {
    id: "status",
    label: "Status",
    render: (value: string, row: User) => (
      <Chip
        color={value === "active" ? "success" : "neutral"}
        variant="soft"
        size="sm"
      >
        {value}
      </Chip>
    ),
  },
  {
    id: "actions",
    label: "Actions",
    sortable: false,
    render: (_, row: User) => (
      <IconButton size="sm" variant="soft" onClick={() => editUser(row)}>
        <EditIcon />
      </IconButton>
    ),
  },
];

Bulk Actions

const bulkActions: TableAction[] = [
  {
    icon: <DeleteIcon />,
    tooltip: "Delete Selected",
    onClick: (selectedIds) => {
      console.log("Deleting:", selectedIds);
      // Implement bulk delete
    },
    color: "danger",
    variant: "solid",
  },
  {
    icon: <ExportIcon />,
    tooltip: "Export Selected",
    onClick: (selectedIds) => {
      console.log("Exporting:", selectedIds);
      // Implement bulk export
    },
    color: "primary",
    variant: "outlined",
  },
];

Controlled State

function ControlledTable() {
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [sortConfig, setSortConfig] = useState({
    column: "name" as keyof User,
    direction: "asc" as const,
  });

  return (
    <CustomTable
      data={users}
      columns={columns}
      selectedIds={selectedUsers}
      onSelectionChange={setSelectedUsers}
      currentPage={currentPage}
      onPageChange={setCurrentPage}
      defaultSort={sortConfig}
      onSortChange={(column, direction) => setSortConfig({ column, direction })}
    />
  );
}

Loading and Empty States

// Loading state
<CustomTable
  data={[]}
  columns={columns}
  loading={true}
  toolbarTitle="Loading Users..."
/>

// Empty state
<CustomTable
  data={[]}
  columns={columns}
  emptyMessage="No users found. Try adjusting your search criteria."
  toolbarTitle="Users"
/>

Custom Styling

<CustomTable
  data={data}
  columns={columns}
  variant="soft"
  size="lg"
  sx={{
    "& .MuiTable-root": {
      "--TableCell-headBackground": "#f0f0f0",
      "--TableCell-selectedBackground": "#e3f2fd",
    },
    "& thead th": {
      fontWeight: "bold",
      borderBottom: "2px solid #ddd",
    },
  }}
/>

TypeScript Support

The component is fully typed and supports generic types:

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}

// Full type safety
const productColumns: TableColumn<Product>[] = [
  {
    id: "name", // ✅ TypeScript knows this should be keyof Product
    label: "Product Name",
    render: (name: string, product: Product) => {
      // ✅ Proper types inferred
      return <strong>{name}</strong>;
    },
  },
];

<CustomTable<Product>
  data={products}
  columns={productColumns}
  getRowId={(product) => product.id} // ✅ TypeScript knows product type
/>;

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Dependencies

This package requires the following peer dependencies:

• react >= 16.8.0
• react-dom >= 16.8.0
• @mui/joy >= 5.0.0
• @mui/icons-material >= 5.0.0
• @mui/utils >= 5.0.0

Changelog

v1.0.0

• Initial release
• Basic table functionality
• Sorting and pagination
• Row selection
• Custom rendering
• TypeScript support