Documentation

Everything you need to know about your CRM Interface's features, architecture, and usage.

Overview

CRM Interface is a unified CRM interface designed for Ritual Foundation. It combines the power of @tanstack/react-table with a polished, modern UI to deliver a seamless developer and user experience.

Performance First

Virtual scrolling for rows and columns ensures 60fps performance even with millions of records.

Flexible Layout

Pin columns, resize headers, and toggle visibility to create the perfect view for your data.

Data Rich

Built-in support for sorting, filtering, editing, and exporting data in multiple formats.

Core Features

Sorting

Multi-column sorting with support for string, number, date, and boolean types. Click headers to toggle ascending/descending order.

Filtering

Advanced filtering with operators like "contains", "equals", "starts with", and more. Global search across all visible columns.

Inline Editing

Double-click or press Enter to edit cells directly. Includes undo/redo support for all data changes.

Selection & Bulk Actions

Row selection with checkbox support. Perform bulk operations like delete, duplicate, or edit on selected rows.

Import / Export

Import data from CSV files or paste directly from clipboard. Export filtered or selected data to CSV and JSON.

Keyboard Navigation

Full keyboard support for navigation, selection, and editing. Excel-like shortcuts for efficiency.

Keyboard Shortcuts

Action	Shortcut
Undo	Ctrl + Z
Redo	Ctrl + Y
Edit Cell	Enter or F2
Copy Cell	Ctrl + C
Paste Cell	Ctrl + V
Navigate	Arrow Keys
Delete Cell Content	Delete or Backspace
Cancel Edit	Escape

Supported Data Types

CRM Interface automatically detects data types to provide appropriate formatting and sorting logic.

string

Default text content. Supports standard sorting and filtering.

number

Numeric values. Right-aligned with locale-aware formatting.

date

Date objects or strings. Formatted as readable dates.

boolean

True/false values. Rendered as Yes/No with icons.

url

Web links. Rendered as clickable anchor tags.

Email addresses. Rendered as mailto links.

Basic Usage

import { DataGrid } from '@/components/v-grid/data-grid'

export default function MyPage() {
  const handleStateChange = (state) => {
    console.log('Table state updated:', state)
  }

  return (
    <div className="h-[600px]">
      <DataGrid
        onStateChange={handleStateChange}
      />
    </div>
  )
}

The DataGrid component is self-contained and manages its own internal state for data, sorting, and filtering. Use the onStateChange prop to listen for updates or control the table externally.