HRF
All libraries

persian-data-grid

Persian Data Grid

An enterprise data grid for React with native RTL and Jalali dates. It's built for screens where people enter data for hours: accounting voucher lines, inventory, cheques and bank statements.

npm i persian-data-grid
Live demoInstall guideGitHub
Package
persian-data-grid
License
MIT
React
17 – 19
Language
TypeScript

Why this library

Generic tables are built to display data, not to enter it. In accounting forms, people need to move between cells without a mouse, scroll thousands of rows without lag and export to Excel. Persian Data Grid provides that experience with right-to-left layout and the Jalali calendar built in from the start.

Features

  • Excel-like keyboard

    Move between cells with the arrow keys, Tab and Enter, and enter data without touching the mouse.

  • Virtual scrolling

    VirtualList renders only the rows in view, so the grid stays smooth with thousands of rows.

  • RTL and Jalali from the start

    Right-to-left layout and Jalali date cells are part of the grid itself, not a layer added on top.

  • Excel and PDF

    Export the current view to xlsx or pdf, and import data from Excel files.

  • Fast editing

    Add, duplicate and delete rows, undo and redo, quick filter, search, and multi-column sort with Shift+click.

  • Offline persistence

    Changes are stored event by event in IndexedDB.

  • Headless composition

    For full control, createERPTable gives you the grid without its default interface.

Quick start

npm i persian-data-grid

Built with

  • React
  • TypeScript
  • IndexedDB
  • VirtualList
App.tsx
import { ERPTable } from 'persian-data-grid';

<ERPTable
  store="erp"
  tableKey={pageId}
  actor={actor}
  columns={columns}
  rows={rows}
  tableHeight={420}
  multiSelectConfig={multiSelectConfig}
  onReady={setController}
/>

Another library

React Persian Range Picker

react-persian-range-picker