mui-lipat 📱↔️💻

A Smart Auto-Collapsing Table Component for Material-UI

"lipat" means "fold" in Filipino/Tagalog - perfectly describing what this component does: it folds your table columns automatically based on available space.

Status: ✅ Production Ready - 95% Feature Complete - 143 Tests Passing

✨ Features

Core Auto-Collapse

• 🎯 Zero Configuration: Works out of the box with sensible defaults
• 📏 Container-Aware: Responds to actual container size, not viewport
• 🔢 Priority-Based: Control which columns collapse first
• 🎨 Expandable Details: Click to view collapsed columns in a detail panel
• ⚡ Smooth Animations: Polished expand/collapse with reduced motion support

Data Features

• 🔍 Sorting: Single and multi-column sorting
• 🎯 Filtering: Column filters and global quick search
• 📄 Pagination: Client-side, server-side, infinite scroll
• ☑️ Selection: Checkbox selection with single/multi modes

Column Management

• 📐 Resizing: Drag to resize columns
• 🔀 Reordering: Drag and drop to reorder columns
• 💾 Persistence: Save state to localStorage

Developer Experience

• 📘 TypeScript: Full type definitions
• 🎨 MUI Integration: Seamless Material-UI theming
• ♿ Accessible: WCAG 2.1 AA compliant
• 🌍 RTL Support: Right-to-left language support
• 🎣 Hooks API: Headless mode for complete control
• 🧩 Extensible: Slot system for customization

🚀 Quick Start

Installation

npm install mui-lipat
# or
yarn add mui-lipat
# or
pnpm add mui-lipat

Peer Dependencies

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Basic Usage

import { LipatTable } from 'mui-lipat';

const columns = [
  { field: 'name', headerName: 'Name', priority: 1 },        // Always visible
  { field: 'email', headerName: 'Email', priority: 2 },      // High priority
  { field: 'phone', headerName: 'Phone', priority: 3 },      // Medium priority
  { field: 'address', headerName: 'Address', priority: 4 },  // Lower priority
  { field: 'id', headerName: 'ID', priority: 5 },            // Collapse first
];

const data = [
  { id: 1, name: 'Alice', email: '[email protected]', phone: '123-456-7890', address: '123 Main St' },
  { id: 2, name: 'Bob', email: '[email protected]', phone: '098-765-4321', address: '456 Oak Ave' },
];

function MyTable() {
  return (
    <LipatTable
      columns={columns}
      rows={data}
      getRowId={(row) => row.id}
    />
  );
}

📖 Key Concepts

Priority System

Control which columns collapse first by setting the priority property:

{
  field: 'name',
  headerName: 'Name',
  priority: 1,  // Lower number = higher priority = collapses last
}

| Priority | Behavior | Use Case | |----------|----------|----------| | 1 | Collapses last | Primary identifier (Name, Title) | | 2-3 | High priority | Important data (Status, Price) | | 4-6 | Medium priority | Secondary data (Date, Category) | | 7-10 | Low priority | Supporting data (ID, Metadata) | | -Infinity | Never collapses | Critical data that must always show | | Infinity | Always collapsed | Data only in detail view |

How It Works

1. Measures actual container width using ResizeObserver
2. Calculates required width for each column
3. Sorts columns by priority (highest first)
4. Shows as many columns as fit
5. Collapses remaining columns to detail panel
6. Adapts automatically on resize

🎨 Advanced Examples

With Sorting and Filtering

<LipatTable
  columns={columns}
  rows={data}
  sortable
  filterable
  quickFilter
  defaultSortModel={[{ field: 'name', sort: 'asc' }]}
/>

With Pagination

<LipatTable
  columns={columns}
  rows={data}
  pagination
  pageSize={25}
  pageSizeOptions={[10, 25, 50, 100]}
/>

With Row Selection

const [selected, setSelected] = useState([]);

<LipatTable
  columns={columns}
  rows={data}
  checkboxSelection
  selectionModel={selected}
  onSelectionModelChange={setSelected}
/>

With Custom Renderers

const columns = [
  {
    field: 'status',
    headerName: 'Status',
    renderCell: (params) => (
      <Chip
        label={params.value}
        color={params.value === 'active' ? 'success' : 'default'}
      />
    ),
  },
];

Headless Mode

import { useLipatTable } from 'mui-lipat';

function MyCustomTable() {
  const {
    visibleColumns,
    collapsedColumns,
    processedRows,
    expandedRows,
    toggleRowExpansion,
  } = useLipatTable({
    columns,
    rows: data,
  });

  // Build your own UI using the hook data
  return (
    <div>
      {/* Your custom implementation */}
    </div>
  );
}

📚 Documentation

• API Reference - Complete API documentation
• Architecture - System design and architecture
• Design System - Visual design and theming
• Specifications - Technical specifications
• Roadmap - Development roadmap
• Contributing - Contribution guidelines

🧪 Examples

See the examples directory for complete working examples:

• Basic auto-collapse
• With pagination
• With row selection
• With sorting and filtering
• Custom themes
• And more...

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📝 License

MIT © aminfathullah

🙏 Acknowledgments

• Inspired by MUI DataGrid
• Built with Material-UI
• Powered by React and TypeScript

📊 Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

🔗 Links

• npm Package
• GitHub Repository
• Issue Tracker
• Changelog

Made with ❤️ and TypeScript