metro-sheet v1.0.0

Metro Sheets

A modern, performant spreadsheet component for React applications. Metro Sheets provides an Excel-like grid interface with features like cell selection, keyboard navigation, and virtualized rendering for handling large datasets efficiently.

Features

• 📊 Excel-like grid interface
• ⌨️ Full keyboard navigation support
• 🎯 Cell selection and range selection
• 🚀 Virtualized rendering for optimal performance
• 🔄 RTL support
• 📱 Responsive design
• 🎨 Customizable styling
• 🔌 TypeScript support

Installation

pnpm add metro-sheets

Or using npm:

npm install metro-sheets

Usage

import { MetroSheets } from 'metro-sheets';

// Example data
const data = {
  columns: [
    { id: 'A', title: 'A', width: 100 },
    { id: 'B', title: 'B', width: 100 },
    { id: 'C', title: 'C', width: 100 },
  ],
  rows: [
    {
      A: { type: 'string', value: 'Hello', formatted: 'Hello' },
      B: { type: 'number', value: 42, formatted: '42' },
      C: { type: 'boolean', value: true, formatted: 'true' },
    },
    // Add more rows as needed
  ],
};

function App() {
  return (
    <MetroSheets
      data={data}
      height="500px"
      onSelectionChange={(selection) => console.log('Selection:', selection)}
    />
  );
}

Props

Types

interface Selection {
  startRow: number;
  startCol: number;
  endRow: number;
  endCol: number;
}

interface SpreadsheetData {
  columns: Column[];
  rows: { [key: string]: CellValue }[];
}

interface Column {
  id: string;
  title: string;
  width: number;
}

interface CellValue {
  type: 'string' | 'number' | 'boolean' | 'date' | 'error' | 'empty';
  value: any;
  formula?: string;
  formatted?: string;
  style?: {
    bold?: boolean;
    italic?: boolean;
    underline?: boolean;
    color?: string;
    backgroundColor?: string;
  };
}

Contributing

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

License

MIT