@your-org/smartgrid

Reusable config-driven data grid library — AG Grid ke upar ek simple abstraction layer.

Install

npm install @your-org/smartgrid

Peer Dependencies (pehle se install honi chahiye)

npm install react react-dom ag-grid-community ag-grid-react

Quick Start

import { SmartGrid } from '@your-org/smartgrid';
import '@your-org/smartgrid/dist/style.css';  // ← CSS import zaruri hai

function MyPage() {
  const data = [
    { id: 1, name: 'Aarav', status: 'Active', amount: 84500 },
    { id: 2, name: 'Priya', status: 'Pending', amount: 62000 },
  ];

  return (
    <SmartGrid
      data={data}
      columns={[
        { field: 'id',     header: 'ID', width: 60 },
        { header: 'User',  template: 'userCompact' },
        { field: 'status', header: 'Status', template: 'statusBadge' },
        { field: 'amount', header: 'Amount',
          valueFormatter: (p) => `₹ ${p.value?.toLocaleString('en-IN')}` },
      ]}
      plugins={['filtering', 'export', 'editing']}
      title="My Grid"
      height={500}
    />
  );
}

Built-in Templates

| Template | Shows | |----------------|------------------------------| | userCompact | Avatar + Name + Email + Role | | userWithBank | Name + Account + IFSC | | statusBadge | Color-coded status pill |

Plugins

| Plugin | Feature | |------------------|-------------------------------| | filtering | Search box + column filters | | export | CSV + Excel download | | editing | Inline cell editing | | columnControls | Show/hide columns dropdown | | roleBased | Role-based column visibility |

Custom Template

import { registerTemplate } from '@your-org/smartgrid';

registerTemplate('priority', ({ data }) => (
  <span style={{ color: data.priority === 'High' ? 'red' : 'gray' }}>
    {data.priority as string}
  </span>
));

Versioning

Semantic Versioning follow karte hain:

• 1.0.x — Bug fixes
• 1.x.0 — New features (backward compatible)
• x.0.0 — Breaking changes

Changelog

See CHANGELOG.md

License

MIT