smart-data-grid

A powerful, feature-rich data grid library that works across all modern frameworks. Built with performance and flexibility in mind.

✨ Features

🔍 Global Search - Search across all columns with real-time filtering
📊 Column Sorting - Click headers to sort ascending/descending, click again to remove sort
📄 Smart Pagination - Configurable page sizes with intuitive navigation
✅ Row Selection - Single/multi-row selection with "Select All" functionality
📤 Data Export - Export data to CSV, JSON, or Excel formats (all data or selected rows)
🎨 Theming - Multiple built-in themes (modern, classic, dark)
🔗 Action Columns - Button and link columns with custom click handlers
📱 Responsive Design - Works seamlessly on desktop and mobile
⚡ High Performance - Optimized rendering for large datasets
🌐 Framework Agnostic - Works with React, Angular, Vue, and vanilla JavaScript
🎯 TypeScript Support - Full type definitions included

📦 Installation

npm install smart-data-grid

🚀 Quick Start

React Example

import React, { useState } from "react";
import SmartDataGrid from "smart-data-grid/react";

const MyComponent = () => {
  const data = [
    {
      id: 1,
      name: "Alice",
      age: 25,
      email: "[email protected]",
      status: "Active",
    },
    {
      id: 2,
      name: "Bob",
      age: 30,
      email: "[email protected]",
      status: "Inactive",
    },
    {
      id: 3,
      name: "Charlie",
      age: 35,
      email: "[email protected]",
      status: "Active",
    },
  ];

  const columns = [
    { field: "name", header: "Name" },
    { field: "age", header: "Age" },
    { field: "email", header: "Email" },
    {
      field: "status",
      header: "Status",
      type: "button",
      clickFn: (row) => console.log("Status clicked:", row),
    },
    {
      field: "actions",
      header: "Actions",
      type: "link",
      clickFn: (row) => console.log("Edit:", row),
    },
  ];

  const [selectedRows, setSelectedRows] = useState([]);

  return (
    <SmartDataGrid
      dataSource={data}
      columns={columns}
      title="User Management"
      enableSelection={true}
      onSelectionChange={setSelectedRows}
      defaultSortKey="name"
      theme="modern"
      searchable={true}
      paginationOptions={[5, 10, 25, 50]}
      enableExport={true}
      exportFormats={["csv", "json", "excel"]}
      exportFileName="user-data"
    />
  );
};

📋 Props & Configuration

React Component Props

Prop	Type	Default	Description
`dataSource`	`Array<any>`	`[]`	Array of data objects to display
`columns`	`ColumnConfig[]`	`[]`	Column configuration array
`title`	`string`	`undefined`	Grid title displayed at the top
`enableSelection`	`boolean`	`false`	Enable row selection checkboxes
`onSelectionChange`	`(rows: any[]) => void`	`undefined`	Callback when selection changes
`defaultSortKey`	`string`	`undefined`	Initial column to sort by
`theme`	`'modern' \| 'classic' \| 'dark'`	`'modern'`	Visual theme
`searchable`	`boolean`	`true`	Show global search input
`paginationOptions`	`number[]`	`[10, 20, 30, 50, 100]`	Available page size options
`enableExport`	`boolean`	`false`	Enable data export functionality
`exportFormats`	`('csv' \| 'json' \| 'excel')[]`	`['csv', 'json']`	Available export formats
`exportFileName`	`string`	`'data-export'`	Base filename for exported files

Column Configuration

interface ColumnConfig {
  field: string; // Data field key
  header: string; // Column header text
  sortable?: boolean; // Column sort diable by default true
  type?: "text" | "button" | "link"; // Column type
  clickFn?: (row: any) => void; // Click handler for button/link types
  showLinkConditions?: (row: any) => boolean; // Conditional display logic
}

Web Component Attributes

Attribute	Type	Description
`data`	`string`	JSON stringified array of data
`header`	`string`	JSON stringified column configuration
`sortable`	`boolean`	Disable sorting
`pagination`	`boolean`	Enable pagination
`filter`	`boolean`	Enable global search
`theme`	`string`	Theme name ('modern', 'classic', 'dark')
`page-size`	`number`	Default page size
`enable-selection`	`boolean`	Enable row selection
`enable-export`	`boolean`	Enable data export functionality
`export-formats`	`string`	Comma-separated export formats ('csv,json,excel')

🎨 Themes

Available Themes

Modern - Clean, contemporary design with subtle shadows
Classic - Traditional table styling with borders
Dark - Dark mode optimized theme

Custom Styling

/* Override CSS custom properties */
.smart-data-grid.modern {
  --grid-bg: #ffffff;
  --grid-border: #e1e5e9;
  --header-bg: #f8f9fa;
  --row-hover: #f5f5f5;
  --primary-color: #007bff;
  --text-color: #212529;
}

.smart-data-grid.dark {
  --grid-bg: #1a1a1a;
  --grid-border: #404040;
  --header-bg: #2d2d2d;
  --row-hover: #333333;
  --primary-color: #4dabf7;
  --text-color: #ffffff;
}

🔧 Advanced Usage

Data Export

The grid supports exporting data in multiple formats:

// Export all filtered data or just selected rows
<SmartDataGrid
  dataSource={data}
  columns={columns}
  enableExport={true}
  exportFormats={["csv", "json", "excel"]}
  exportFileName="my-data"
/>

Export Behavior:

If rows are selected, only selected rows are exported
If no rows are selected, all filtered/sorted data is exported
Action columns (buttons/links) are automatically excluded from exports
Files are downloaded with timestamps to prevent overwrites

Supported Formats:

CSV - Comma-separated values, Excel compatible
JSON - Structured JSON format
Excel - .xls format that opens in Microsoft Excel

Action Columns

const columns = [
  { field: "name", header: "Name" },
  {
    field: "edit",
    header: "Actions",
    type: "button",
    sortable: false,
    clickFn: (row) => {
      // Handle edit action
      openEditModal(row);
    },
  },
  {
    field: "view",
    header: "View",
    type: "link",
    clickFn: (row) => {
      // Handle view action
      navigateToDetails(row.id);
    },
    showLinkConditions: (row) => row.status === "Active",
  },
];

Selection Handling

const handleSelectionChange = (selectedRows) => {
  console.log(`${selectedRows.length} rows selected`);

  // Bulk operations
  if (selectedRows.length > 1) {
    showBulkActions();
  }

  // Update UI state
  setCanDelete(selectedRows.length > 0);
};

📊 Performance

Efficient Rendering - Only renders visible rows
Optimized Sorting - Uses efficient comparison algorithms
Memory Management - Minimal memory footprint
Debounced Search - Prevents excessive filtering during typing
Virtual Scrolling - Coming in v2.0 for ultra-large datasets

🔄 Migration Guide

🧪 Examples

React with Selection

<SmartDataGrid
  dataSource={employees}
  columns={employeeColumns}
  title="Employee Directory"
  enableSelection={true}
  onSelectionChange={handleSelection}
  theme="dark"
  searchable={true}
  enableExport={true}
  exportFormats={["csv", "excel"]}
  exportFileName="employees"
/>

🛠️ Development

# Clone repository
git clone https://github.com/cvchauhan/smart-data-grid.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test

📝 Changelog

v2.2.2 (Latest)

✅ Minore bug fix

v2.2.1

✅ You can now disable sorting for specific columns by adding sortable: false
✅ Dark Theme colum selection background color issue resolved
✅ Added comprehensive data export functionality
✅ Support for CSV, JSON, and Excel export formats
✅ Smart export (selected rows or all data)
✅ Automatic exclusion of action columns from exports
✅ Customizable export filenames
✅ Fixed "Select All" to work across all pages
✅ Added indeterminate checkbox states
✅ Improved row selection persistence
✅ Enhanced visual feedback for selections
✅ Complete rewrite with modern architecture
✅ Added React component support
✅ Multi-theme support
✅ Advanced column types (button, link)
✅ Improved accessibility
✅ TypeScript definitions

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

🔗 Links

GitHub Repository: https://github.com/cvchauhan/smart-data-grid
NPM Package: https://www.npmjs.com/package/smart-data-grid
Issues: https://github.com/cvchauhan/smart-data-grid/issues

💡 Support

If you find this project helpful, please consider:

⭐ Starring the repository
🐛 Reporting bugs
💡 Suggesting new features
📖 Improving documentation

For support, email [email protected] or create an issue on GitHub.

Name		Name	Last commit message	Last commit date
Latest commit History 24 Commits
.github		.github
src		src
.gitignore		.gitignore
.npmignore		.npmignore
README.md		README.md
copy-css.js		copy-css.js
eslint.config.ts		eslint.config.ts
jest.config.js		jest.config.js
jest.setup.ts		jest.setup.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Uh oh!

cvchauhan/smart-data-grid

Folders and files

Latest commit

History

Repository files navigation

smart-data-grid

✨ Features

📦 Installation

🚀 Quick Start

React Example

📋 Props & Configuration

React Component Props

Column Configuration

Web Component Attributes

🎨 Themes

Available Themes

Custom Styling

🔧 Advanced Usage

Data Export

Action Columns

Selection Handling

📊 Performance

🔄 Migration Guide

🧪 Examples

React with Selection

🛠️ Development

📝 Changelog

v2.2.2 (Latest)

v2.2.1

🤝 Contributing

📄 License

🔗 Links

💡 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Sponsor this project

Uh oh!

Packages 0

Languages

Packages