🚀 Mui TanTable

A table component based on TanStack Table and Material‑UI (MUI) designed for feature-rich, high-performance, and accessible lists and tables. ✨

Status: 🛠️ development — core functionality implemented (virtualization, cell selection, keyboard shortcuts, list view, expandable search).

Repository: 🔗 https://github.com/testx1011/mui-tantable

📚 Documentation

• CONTRIBUTING
• CODE OF CONDUCT
• SECURITY
• CHANGELOG

Quick Install (clone from GitHub)

git clone https://github.com/testx1011/mui-tantable.git
cd mui-tantable
npm install
# or use pnpm if you prefer
# pnpm install

Install from npm

npm install mui-tantable
# or with yarn
yarn add mui-tantable

🎯 Goal

• Provide a highly customizable and efficient table for React applications with MUI styling.
• Offer Data Grid features (filtering, sorting, pagination, selection, virtualization, and list view).

✨ Key Features

• ⚙️ Flexible Rendering: Columns defined with ColumnDef and custom renderers.
• ⚡️ Virtualization: Supports @tanstack/react-virtual for thousands of rows.
• 📋 List View: enableListView + renderListViewItem to present data in a single-column list view style (inspired by MUI X List View).
• 🔘 Cell & Row Selection: Visual cell selection and multi-row selection.
• ⌨️ Keyboard Shortcuts: Ctrl+C copies cell/row content in tabular format compatible with Excel/Sheets.
• 🔎 Expandable Search: Search UI with animation MUI Data Grid quick filter style.
• ✍️ In-cell / In-row Editing: Support for cell-by-cell or row-by-row editing modes (configurable).
• 🧭 Toolbar: Search, column visibility, export (CSV/Excel/JSON), density options, and view switcher (grid/list).

📁 Project Structure (summary)

• src/components/TanTable.tsx — main component.
• src/components/TableToolbar.tsx — toolbar (search, export, density, view switcher).
• src/components/ExpandableSearch.tsx — expandable search.
• src/components/cells/* — cell renderers (text, number, date, avatar...).
• src/components/filters/* — built-in filters.
• src/utils/* — exporters, formatters, and utilities.
• stories/TanTable.stories.tsx — Storybook stories with examples (includes ListView, Virtualization).

Requirements

• Node.js 18+ (recommended).
• Dependencies managed in package.json.

🧰 Installation (local development)

# clone the repo
git clone https://github.com/testx1011/mui-tantable.git
cd mui-tantable

# install dependencies
npm install

# start storybook (if configured)
npm run storybook

# or build the package
npm run build

⚡ Basic Usage Minimal example with TanTable:

import React from "react";
import { TanTable } from "mui-tantable";

const columns = [
  { accessorKey: "id", header: "ID" },
  { accessorKey: "name", header: "Name", cellType: "text" },
  { accessorKey: "email", header: "Email", cellType: "link" },
];

const data = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
];

export default function App() {
  return (
    <TanTable
      data={data}
      columns={columns}
      enableVirtualization={true}
      enableRowSelection={true}
      toolbarConfig={{ title: "My Table" }}
    />
  );
}

Enable List View

<TanTable
  data={data}
  columns={columns}
  enableListView={true}
  renderListViewItem={(row) => (
    <div style={{ padding: 12, display: "flex", alignItems: "center" }}>
      <img
        src={row.original.avatar}
        alt="avatar"
        style={{ width: 40, height: 40, borderRadius: 20 }}
      />
      <div style={{ marginLeft: 12 }}>
        <div>{row.original.name}</div>
        <div style={{ color: "#666" }}>{row.original.email}</div>
      </div>
    </div>
  )}
/>

🛠️ Useful Commands

• npm run build — compiles the library (uses tsup).
• npm run dev — (if defined) local development.
• npm run storybook — opens Storybook with interactive examples.

Development and Testing

• Keep typescript and eslint clean (if configured).
• Run npm run build after type or export changes.

🙌 Quick Contribution Guide See CONTRIBUTING for complete details: from cloning the repo to PR workflow and code standards.

• Open an issue to discuss large changes.
• Create small, focused PRs; include the objective and Storybook demos when possible.

🔮 Suggested Next Steps

• Add badges (build, coverage, npm) to README.md.
• Document ColumnDef API and cellType in detail.
• Add integration examples (Next.js, CRA, Vite).

☕ Support

If you find this project useful, you can buy me a coffee!