React Table Editor

A powerful, feature-rich React table component built with TanStack Table, featuring drag & drop column reordering, advanced filtering, sorting, pagination, column pinning, and row selection capabilities.

✨ Features

• 🔄 Drag & Drop: Reorder columns with intuitive drag and drop
• 📌 Column Pinning: Pin columns to left or right for better data visibility
• 🔍 Advanced Filtering: Multiple filter types (contains, equals, starts with, etc.)
• 📊 Sorting: Multi-column sorting with visual indicators
• 📄 Pagination: Built-in pagination with customizable page sizes
• ✅ Row Selection: Single and multi-row selection with checkboxes/radio buttons
• 👁️ Column Visibility: Show/hide columns dynamically
• 📏 Column Resizing: Resize columns with smooth interactions
• 🔎 Global Search: Search across all columns simultaneously
• 🎨 Customizable: Extensive configuration options and styling
• ♿ Accessible: Built with accessibility in mind using Radix UI primitives
• 📱 Responsive: Works great on desktop and mobile devices

🚀 Installation

npm install @allejkomal/react-table-editor
# or
yarn add @allejkomal/react-table-editor
# or
pnpm add @allejkomal/react-table-editor

📦 Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom tailwindcss

🎨 Required CSS Import

Important: You must import the component styles in your application. The component uses Tailwind CSS classes, so you need Tailwind CSS configured in your project.

Option 1: With Tailwind CSS (Recommended)

If you're using Tailwind CSS in your project:

// Import the component styles
import "@allejkomal/react-table-editor/styles";

// Your other imports
import { TableEditor, ExtendedColumnDef } from "@allejkomal/react-table-editor";

Make sure you have Tailwind CSS configured in your project:

npm install tailwindcss

And include Tailwind in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Option 2: Without Tailwind CSS

If you're not using Tailwind CSS, you can still use the component, but you'll need to add the Tailwind classes manually or use a CDN:

<!-- Add Tailwind CSS from CDN -->
<script src="https://cdn.tailwindcss.com"></script>

Or install Tailwind CSS just for this component:

npm install tailwindcss
npx tailwindcss init

Then add to your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

🎯 Quick Start

import React from "react";
import "@allejkomal/react-table-editor/styles";
import { TableEditor, ExtendedColumnDef } from "@allejkomal/react-table-editor";

// Define your data type
interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  status: "active" | "inactive";
}

// Sample data
const users: User[] = [
  {
    id: "1",
    name: "John Doe",
    email: "[email protected]",
    role: "Admin",
    status: "active",
  },
  {
    id: "2",
    name: "Jane Smith",
    email: "[email protected]",
    role: "User",
    status: "active",
  },
  {
    id: "3",
    name: "Bob Johnson",
    email: "[email protected]",
    role: "User",
    status: "inactive",
  },
];

// Define columns
const columns: ExtendedColumnDef<User>[] = [
  {
    id: "name",
    header: "Name",
    accessorKey: "name",
    enableSorting: true,
    enableColumnFilter: true,
  },
  {
    id: "email",
    header: "Email",
    accessorKey: "email",
    enableSorting: true,
    enableColumnFilter: true,
  },
  {
    id: "role",
    header: "Role",
    accessorKey: "role",
    enableSorting: true,
    enableColumnFilter: true,
  },
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    enableSorting: true,
    enableColumnFilter: true,
  },
];

function App() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">User Management</h1>
      <TableEditor
        data={users}
        columns={columns}
        config={{
          enablePagination: true,
          enableSorting: true,
          enableColumnFilter: true,
          enableColumnPinning: true,
          enableColumnOrder: true,
          enableMultiRowSelection: true,
          enableGlobalFilter: true,
        }}
      />
    </div>
  );
}

export default App;

⚙️ Configuration Options

The TableEditorConfig interface provides extensive customization options:

Pagination

config={{
  enablePagination: true,
  pageSize: 10,
  pageIndex: 0,
  onPageSizeChange: (pageSize) => console.log('Page size changed:', pageSize),
  onPageIndexChange: (pageIndex) => console.log('Page index changed:', pageIndex),
}}

Row Selection

config={{
  // Single row selection
  enableSingleRowSelection: true,
  rowSelection: { '1': true },
  onRowSelectionChange: (selection) => console.log('Selection changed:', selection),

  // Multi row selection
  enableMultiRowSelection: true,
  renderMultiSelection: (row) => <CustomCheckbox row={row} />,
}}

Column Management

config={{
  // Column pinning
  enableColumnPinning: true,
  columnPinning: { left: ['name'], right: ['actions'] },
  onColumnPinningChange: (pinning) => console.log('Pinning changed:', pinning),

  // Column ordering
  enableColumnOrder: true,
  columnOrder: ['name', 'email', 'role'],
  onColumnOrderChange: (order) => console.log('Order changed:', order),

  // Column visibility
  enableColumnVisibility: true,
  initialColumnVisibility: { 'role': false },
  onColumnVisibilityChange: (visibility) => console.log('Visibility changed:', visibility),

  // Column resizing
  enableColumnResizing: true,
  columnResizeMode: 'onChange', // or 'onEnd'
  columnResizeDirection: 'ltr', // or 'rtl'
  onColumnSizingChange: (sizing) => console.log('Sizing changed:', sizing),
}}

Filtering & Sorting

config={{
  // Global search
  enableGlobalFilter: true,
  globalFilter: 'search term',
  globalFilterFn: 'includesString', // or custom function
  onGlobalFilterChange: (filter) => console.log('Global filter:', filter),

  // Column filtering
  enableColumnFilter: true,
  columnFilters: [{ id: 'name', value: { type: 'contains', value: 'John' } }],
  onColumnFiltersChange: (filters) => console.log('Column filters:', filters),

  // Sorting
  enableSorting: true,
  sorting: [{ id: 'name', desc: false }],
  onSortingChange: (sorting) => console.log('Sorting changed:', sorting),
}}

🎨 Column Definition

The ExtendedColumnDef interface extends TanStack Table's ColumnDef with additional properties:

interface ExtendedColumnDef<TData, TValue = unknown>
  extends ColumnDef<TData, TValue> {
  headerAlign?: "left" | "center" | "right";
  cellAlign?: "left" | "center" | "right";
  enablePinning?: boolean;
  enableSorting?: boolean;
  enableResizing?: boolean;
  enableHiding?: boolean;
  enableColumnFilter?: boolean;
}

Example Column Definitions

const columns: ExtendedColumnDef<User>[] = [
  {
    id: "name",
    header: "Full Name",
    accessorKey: "name",
    headerAlign: "left",
    cellAlign: "left",
    enableSorting: true,
    enableColumnFilter: true,
    enablePinning: true,
    enableResizing: true,
    enableHiding: true,
  },
  {
    id: "email",
    header: "Email Address",
    accessorKey: "email",
    headerAlign: "center",
    cellAlign: "center",
    enableSorting: true,
    enableColumnFilter: true,
    cell: ({ getValue }) => (
      <a
        href={`mailto:${getValue()}`}
        className="text-blue-600 hover:underline"
      >
        {getValue()}
      </a>
    ),
  },
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    headerAlign: "center",
    cellAlign: "center",
    enableSorting: true,
    enableColumnFilter: true,
    cell: ({ getValue }) => {
      const status = getValue() as string;
      return (
        <span
          className={`px-2 py-1 rounded-full text-xs ${
            status === "active"
              ? "bg-green-100 text-green-800"
              : "bg-red-100 text-red-800"
          }`}
        >
          {status}
        </span>
      );
    },
  },
];

🔍 Filter Types

The table supports various filter types:

• contains - Contains the search term
• equals - Exact match
• startsWith - Starts with the search term
• endsWith - Ends with the search term
• notEquals - Does not equal
• notContains - Does not contain
• isEmpty - Is empty or null
• isNotEmpty - Is not empty

🎨 Styling

The component uses Tailwind CSS for styling. You need Tailwind CSS configured in your project for the component to display correctly.

Customization Options

You can customize the appearance by:

1. CSS Variables: Override CSS custom properties for theming
2. Tailwind Config: Extend your Tailwind configuration to match your design system
3. Custom Classes: Apply additional classes to override default styles

CSS Variables

The component includes CSS custom properties that you can override:

:root {
  --rt-background: 0 0% 100%;
  --rt-foreground: 222.2 84% 4.9%;
  --rt-primary: 222.2 47.4% 11.2%;
  --rt-primary-foreground: 210 40% 98%;
  --rt-secondary: 210 40% 96%;
  --rt-secondary-foreground: 222.2 84% 4.9%;
  --rt-border: 214.3 31.8% 91.4%;
  --rt-radius: 0.5rem;
}

.dark {
  --rt-background: 222.2 84% 4.9%;
  --rt-foreground: 210 40% 98%;
  --rt-primary: 210 40% 98%;
  --rt-primary-foreground: 222.2 47.4% 11.2%;
  --rt-secondary: 217.2 32.6% 17.5%;
  --rt-secondary-foreground: 210 40% 98%;
  --rt-border: 217.2 32.6% 17.5%;
}

Tailwind Configuration

If you want to customize the component's appearance, you can extend your Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--rt-background))',
        foreground: 'hsl(var(--rt-foreground))',
        primary: {
          DEFAULT: 'hsl(var(--rt-primary))',
          foreground: 'hsl(var(--rt-primary-foreground))',
        },
        // ... other colors
      },
    },
  },
}

📱 Responsive Design

The table is responsive and works well on different screen sizes:

• Desktop: Full feature set with all interactions
• Tablet: Touch-friendly interactions with optimized spacing
• Mobile: Horizontal scrolling with essential features

♿ Accessibility

Built with accessibility in mind:

• Keyboard Navigation: Full keyboard support for all interactions
• Screen Readers: Proper ARIA labels and descriptions
• Focus Management: Clear focus indicators and logical tab order
• Color Contrast: Meets WCAG guidelines for color contrast

🧪 TypeScript Support

Full TypeScript support with comprehensive type definitions:

import type {
  TableEditorConfig,
  ExtendedColumnDef,
} from "@allejkomal/react-table-editor";

📚 Documentation

• API Documentation - Complete API reference with all interfaces and types
• Examples - Usage examples and code snippets
• Configuration Options - Detailed configuration guide
• Basic Usage Example - Complete working example

🔧 Development

Prerequisites

• Node.js 18+
• npm/yarn/pnpm

Setup

git clone https://github.com/allejkomal/react-table-editor.git
cd react-table-editor
npm install

Development Commands

# Start development server
npm run dev

# Build the package
npm run build

# Start local development with HMR
npm start

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you have any questions or need help, please:

1. Check the Issues page
2. Create a new issue if your question isn't answered
3. Contact the maintainer

🙏 Acknowledgments

• TanStack Table for the excellent table foundation
• Radix UI for accessible UI primitives
• DnD Kit for drag and drop functionality
• Lucide React for beautiful icons

Made with ❤️ by Allej Komal