retro-table

A reusable React + MUI data table component that generates a fully functional admin-style table with:

• ✅ Pagination
• ✅ Sorting
• ✅ Searching
• ✅ CRUD action hooks (Add, View, Edit, Delete)
• ✅ Custom actions and cell renderers
• ✅ TypeScript support

🚀 Installation

# install package
yarn add retro-table

# install required peer dependencies
yarn add @mui/material @emotion/react @emotion/styled

📦 Usage

import React from "react";
import { RetroAdminTable, RetroTableFieldType } from "retro-table";

const fields = [
  {
    key: "id",
    heading: "#",
    tableFieldType: RetroTableFieldType.SL_NO,
    formFieldType: 0,
    tableCellOption: { alignment: { header: "center", cell: "center" } }
  },
  {
    key: "name",
    heading: "Name",
    tableFieldType: RetroTableFieldType.TEXT,
    formFieldType: 0,
    shouldSearch: true,
    shouldSort: true
  },
  {
    key: "avatar",
    heading: "Avatar",
    tableFieldType: RetroTableFieldType.IMAGE,
    imageType: "avatar"
  },
  {
    key: "status",
    heading: "Status",
    tableFieldType: RetroTableFieldType.ENUM,
    options: [
      { key: "active", value: "Active" },
      { key: "inactive", value: "Inactive" }
    ]
  }
];

const data = [
  { id: 1, name: "Alice", avatar: "/a.png", status: "active" },
  { id: 2, name: "Bob", avatar: "/b.png", status: "inactive" }
];

export default function Page() {
  return (
    <RetroAdminTable
      fields={fields}
      data={data}
      loading={false}
      page={1}
      total={2}
      rowsPerPage={10}
      rowsPerPageOptions={[5, 10, 25]}
      onPageChange={(p) => console.log("page", p)}
      onRowsPerPageChange={(r) => console.log("rowsPerPage", r)}
      onSort={(field, sortType) => console.log("sort", field, sortType)}
      onSearch={(q) => console.log("search", q)}
      shouldShowViewDetails
      shouldEdit
      shouldDelete
    />
  );
}

⚙️ Props Reference

RetroTableProps

| Prop | Type | Default | Description | Example | | --------------------------- | ---------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------- | --------------------------------------------------------- | | fields | RetroTableField[] | Required | Defines the table columns. Each field specifies heading, type, search/sort options, styles. | See Field Definition | | data | object[] | [] | Array of row objects. Each object’s keys must match field.key. | [ { id:1, name:"Alice" } ] | | loading | boolean | false | Whether to show loading state. | true | | page | number | 1 | Current page number (controlled). | 1 | | total | number | 0 | Total number of rows (for pagination). | 120 | | rowsPerPage | number | 10 | Number of rows per page. | 25 | | rowsPerPageOptions | number[] | [5,10,25] | Dropdown options for rows per page. | [10, 25, 50] | | paginate | boolean | true | Enable/disable pagination controls. | false | | onPageChange | (page: number) => void | — | Callback when page changes. | (p) => setPage(p) | | onRowsPerPageChange | (rowsPerPage: number) => void | — | Callback when rows per page changes. | (n) => setRpp(n) | | onSort | (field: RetroTableField, sortType: RetroTableSortType) => void | — | Called when column is sorted. | (f, s) => console.log(f.key, s) | | onSearch | (search: any) => void | — | Called when search/filter is triggered. | (q) => console.log(q) | | shouldShowViewDetails | boolean | false | Show/hide default view details action. | true | | shouldEdit | boolean | false | Show/hide default edit action. | true | | shouldDelete | boolean | false | Show/hide default delete action. | true | | viewConfig | { shouldShow?, onView?, viewIcon? } | — | Customize per-row view behavior. | { shouldShow: (r)=>true, onView: alert } | | editConfig | { shouldShow?, onEdit?, editIcon? } | — | Customize edit action. | { onEdit: (row)=>... } | | deleteConfig | { shouldShow?, onDelete?, deleteIcon? } | — | Customize delete action. | { onDelete: (row)=>... } | | customActions | Array<{ shouldShow, onCustomAction, icon? }> | [] | Add extra buttons per row. | See example below | | cellBuilder | (field: any, data: any) => React.ReactNode | — | Global override for cell rendering. | (f, row) => <b>{row[f.key]}</b> | | error | string | — | Display error message above table. | "Failed to load data" |

Field Definition (RetroTableField)

| Field Prop | Type | Values | Description | | ------------------------------ | ---------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------- | | key | string | — | Key of data in row objects. | | heading | string | — | Column header text. | | tableFieldType | RetroTableFieldType | TEXT, IMAGE, LINK, ACTION, ENUM, CUSTOM, MAP_POINT, ARRAY, SL_NO | Controls rendering style. | | formFieldType | RetroFormFieldType | Depends on your forms | For mapping with forms. | | imageType | "avatar" \| "normal" | "avatar" or "normal" | For IMAGE type columns. | | shouldSearch | boolean | — | If true, field participates in search. | | shouldSort | boolean | — | If true, field is sortable. | | options | { key, value }[] | — | Used for ENUM fields. | | onClick | (field, data) => void | — | Custom handler when cell clicked. | | cellBuilder | (field, data) => React.ReactNode | — | Per-field custom renderer. | | mapConfig | RetroMapConfig | — | Used for map-based fields. | | tableCellOption.alignment | { header?, cell? } | "left" \| "right" \| "center" \| "justify" \| "inherit" | Alignment of header & cell. | | tableCellOption.cellStyle | SxProps<Theme> | — | Custom MUI sx for cells. | | tableCellOption.headerStyle | SxProps<Theme> | — | Custom MUI sx for headers. |

🎨 Styling

• Pass MUI sx props in tableCellOption.cellStyle and tableCellOption.headerStyle.

• Example:

  tableCellOption: {
    headerStyle: { bgcolor: "grey.200", fontWeight: "bold" },
    cellStyle: { color: "primary.main" }
  }

🔌 TypeScript Support

All types are included. Import them for strict typing:

import {
  RetroTableProps,
  RetroTableField,
  RetroTableFieldType
} from "retro-table";

⚡ Examples

Custom Cell Renderer

{
  key: "price",
  heading: "Price",
  tableFieldType: RetroTableFieldType.TEXT,
  cellBuilder: (field, row) => <strong>${row.price.toFixed(2)}</strong>
}

Custom Action

const customActions = [
  {
    shouldShow: (row) => row.status === "active",
    onCustomAction: (row) => console.log("custom action", row),
    icon: () => <MyIcon />
  }
];

⚠️ Troubleshooting

Module not found: Can't resolve 'retro-table'

• Ensure node_modules/retro-table/dist exists and package.json has correct "main", "module", "exports" entries.

• If recently republished, clear cache:

  rm -rf node_modules .next yarn.lock
  yarn install
  yarn dev