{"_id":"@amiraliansaripour/data-grid","name":"@amiraliansaripour/data-grid","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amiraliansaripour/data-grid","version":"1.0.0","description":"A powerful, feature-rich React DataTable component with TypeScript support, advanced filtering, sorting, grouping, charting, and export capabilities","type":"module","main":"./dist/index.es.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./styles":"./dist/style.css"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc --noEmit && vite build","build:lib":"vite build --mode library","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","lint:fix":"eslint src --ext ts,tsx --fix","type-check":"tsc --noEmit","preview":"vite preview","prepublishOnly":"npm run build:lib","test":"jest","test:ui":"jest --watch","coverage":"jest --coverage","test:watch":"jest --watch"},"keywords":["react","datatable","table","grid","typescript","filtering","sorting","pagination","export","charts","persian","rtl","tailwind"],"author":{"name":"Amirali Ansaripour","email":"amiraliansaripor1383@gmail.com","url":"https://github.com/Amiraliansaripour"},"license":"MIT","engines":{"node":">=20.19.0","npm":">=8.0.0"},"repository":{"type":"git","url":"git+https://github.com/Amiraliansaripour/data-grid.git"},"bugs":{"url":"https://github.com/Amiraliansaripour/data-grid/issues"},"homepage":"https://github.com/Amiraliansaripour/data-grid#readme","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"framer-motion":"^11.0.0","jspdf":"^2.5.1","jspdf-autotable":"^3.8.0","lucide-react":"^0.460.0","react-icons":"^5.0.0","xlsx":"^0.18.5"},"devDependencies":{"@eslint/js":"^9.33.0","@testing-library/jest-dom":"^6.7.0","@testing-library/react":"^16.3.0","@types/jest":"^30.0.0","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@typescript-eslint/eslint-plugin":"^8.40.0","@typescript-eslint/parser":"^8.40.0","@vitejs/plugin-react":"^5.0.0","@vitest/ui":"^1.3.0","autoprefixer":"^10.4.21","babel-jest":"^30.0.5","eslint":"^9.33.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","identity-obj-proxy":"^3.0.0","jest":"^30.0.5","jest-environment-jsdom":"^30.0.5","jsdom":"^24.0.0","postcss":"^8.5.6","tailwindcss":"^3.0.0","ts-jest":"^29.4.1","typescript":"^5.3.0","vite":"^7.1.2","vite-plugin-dts":"^3.7.0","vitest":"^1.3.0"},"publishConfig":{"access":"public"},"_id":"@amiraliansaripour/data-grid@1.0.0","gitHead":"7ca3b0a38ba61e01f0aa587e0ebf5625be359f61","_nodeVersion":"20.13.1","_npmVersion":"10.8.1","dist":{"integrity":"sha512-3oSYdKpgGY0QCMMQtJBE7PIKQnbj0a/fiFejaDyMe1h0+bAEG4CM0QY06esCcA1ayJGPcSp/lNigq9N8VaYg6A==","shasum":"6373292ed337a8cc703a6927e2eb21187153e2e9","tarball":"https://registry.npmjs.org/@amiraliansaripour/data-grid/-/data-grid-1.0.0.tgz","fileCount":24,"unpackedSize":9278639,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDMMojHSw7sAlRyfEs5v72MuGZj/qijJ4Hq5NMgseBGLgIhAJFONIETSQKuBDdvPhUHIsyeDdcggK2pdZMHTSKlb0Kc"}]},"_npmUser":{"name":"amiraliansaripour","email":"amiraliansaripor1383@gmail.com"},"directories":{},"maintainers":[{"name":"amiraliansaripour","email":"amiraliansaripor1383@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/data-grid_1.0.0_1755622007148_0.5042135452835106"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-19T16:46:47.026Z","1.0.0":"2025-08-19T16:46:47.391Z","modified":"2025-08-19T16:46:47.705Z"},"maintainers":[{"name":"amiraliansaripour","email":"amiraliansaripor1383@gmail.com"}],"description":"A powerful, feature-rich React DataTable component with TypeScript support, advanced filtering, sorting, grouping, charting, and export capabilities","homepage":"https://github.com/Amiraliansaripour/data-grid#readme","keywords":["react","datatable","table","grid","typescript","filtering","sorting","pagination","export","charts","persian","rtl","tailwind"],"repository":{"type":"git","url":"git+https://github.com/Amiraliansaripour/data-grid.git"},"author":{"name":"Amirali Ansaripour","email":"amiraliansaripor1383@gmail.com","url":"https://github.com/Amiraliansaripour"},"bugs":{"url":"https://github.com/Amiraliansaripour/data-grid/issues"},"license":"MIT","readme":"# React Data Grid\r\n\r\nš **A powerful, feature-rich React DataTable component with TypeScript support**\r\n\r\nCreated by [Amirali Ansaripour](https://github.com/Amiraliansaripour)\r\n\r\n[](https://badge.fury.io/js/%40amiraliansaripour%2Fdata-grid)\r\n[](https://opensource.org/licenses/MIT)\r\n[](http://www.typescriptlang.org/)\r\n\r\n## š Overview\r\n\r\nThis library transforms complex data tables into beautiful, interactive components with advanced features like filtering, sorting, pagination, charting, and export capabilities. Built with modern React, TypeScript, and Tailwind CSS.\r\n\r\n## āØ Key Features\r\n\r\n### šÆ Core Features\r\n- **TypeScript Support** - Full type safety and IntelliSense\r\n- **Responsive Design** - Beautiful UI that works on all devices\r\n- **Dark Mode** - Built-in dark/light theme support\r\n- **Advanced Filtering** - Multiple filter types and operators\r\n- **Multi-Column Sorting** - Sort by multiple columns simultaneously\r\n- **Pagination** - Customizable pagination controls\r\n- **Search** - Global search across all columns\r\n- **Export** - Export data to Excel/PDF formats\r\n\r\n### š Advanced Features\r\n- **Chart Integration** - Ready for chart library integration\r\n- **Row Selection** - Multi-select with checkbox support\r\n- **Column Visibility** - Show/hide columns dynamically\r\n- **Data Grouping** - Group data by any column\r\n- **Statistics** - Automatic numeric column calculations\r\n- **Custom Rendering** - Custom cell renderers and formatters\r\n- **Row Actions** - Dropdown actions for each row\r\n- **Performance Optimized** - Efficient rendering with animations\r\n\r\n### š Persian/RTL Support\r\n- **Persian Language** - Full Persian UI support\r\n- **RTL Layout** - Right-to-left layout\r\n- **Persian Numbers** - Automatic Persian number formatting\r\n- **Persian Dates** - Persian date formatting\r\n\r\n## š Quick Start\r\n\r\n### Installation\r\n\r\n```bash\r\nnpm install @amiraliansaripour/data-grid\r\n```\r\n\r\n### Basic Usage\r\n\r\n```jsx\r\nimport { DataTable } from '@amiraliansaripour/data-grid';\r\nimport '@amiraliansaripour/data-grid/styles';\r\n\r\nconst columns = [\r\n { accessor: 'name', header: 'Name', sortable: true },\r\n { accessor: 'email', header: 'Email' },\r\n { accessor: 'age', header: 'Age', type: 'number' }\r\n];\r\n\r\nconst data = [\r\n { name: 'John Doe', email: 'john@example.com', age: 30 },\r\n { name: 'Jane Smith', email: 'jane@example.com', age: 25 }\r\n];\r\n\r\nfunction App() {\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n## š Documentation\r\n\r\n### Column Configuration\r\n\r\n```typescript\r\ninterface DataTableColumn {\r\n accessor: keyof T | string; // Data property key\r\n header: string; // Column header text\r\n type?: 'text' | 'number' | 'date' | 'boolean';\r\n sortable?: boolean; // Enable sorting\r\n width?: string | number; // Column width\r\n formatter?: (value: any) => string;\r\n render?: (value: any, row: T) => ReactNode;\r\n className?: string; // Custom CSS classes\r\n hidden?: boolean; // Initially hidden\r\n}\r\n```\r\n\r\n### Props\r\n\r\n```typescript\r\ninterface DataTableProps {\r\n data: T[]; // Array of data objects\r\n columns: DataTableColumn[]; // Column definitions\r\n \r\n // Search & Filter\r\n searchable?: boolean; // Enable global search\r\n searchPlaceholder?: string; // Search input placeholder\r\n \r\n // Pagination\r\n pagination?: {\r\n pageSize?: number; // Items per page\r\n showPageSizeSelector?: boolean;\r\n pageSizeOptions?: number[];\r\n };\r\n \r\n // Selection\r\n selectable?: boolean; // Enable row selection\r\n onSelectionChange?: (selectedRows: T[]) => void;\r\n \r\n // Export\r\n exportable?: boolean; // Enable export buttons\r\n \r\n // Styling\r\n className?: string; // Custom CSS classes\r\n theme?: 'light' | 'dark'; // Theme mode\r\n \r\n // Events\r\n onRowClick?: (row: T) => void; // Row click handler\r\n onSort?: (column: string, direction: 'asc' | 'desc') => void;\r\n}\r\n```\r\n\r\n## š ļø Development\r\n\r\n### Setup\r\n\r\n```bash\r\ngit clone https://github.com/Amiraliansaripour/data-grid.git\r\ncd data-grid\r\nnpm install\r\n```\r\n\r\n### Available Scripts\r\n\r\n```bash\r\nnpm run dev # Start development server\r\nnpm run build # Build for production\r\nnpm run test # Run tests\r\nnpm run lint # Run ESLint\r\nnpm run type-check # TypeScript type checking\r\n```\r\n\r\n### Project Structure\r\n\r\n```\r\nsrc/\r\nāāā components/\r\nā āāā DataTable/ # Main table component\r\nā āāā ChartModal/ # Chart visualization modal\r\nāāā hooks/ # Custom React hooks\r\nāāā types/ # TypeScript definitions\r\nāāā utils/ # Utility functions\r\nāāā index.ts # Main exports\r\n```\r\n\r\n## š¤ Contributing\r\n\r\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\r\n\r\n### Quick Contribution Steps\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n## š License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## š Acknowledgments\r\n\r\n- Built with [React](https://reactjs.org/)\r\n- Styled with [Tailwind CSS](https://tailwindcss.com/)\r\n- Icons from [Lucide React](https://lucide.dev/)\r\n- Animations by [Framer Motion](https://www.framer.com/motion/)\r\n\r\n## š Support\r\n\r\n- š§ Email: [amiraliansaripor1383@gmail.com](mailto:amiraliansaripor1383@gmail.com)\r\n- š Issues: [GitHub Issues](https://github.com/Amiraliansaripour/data-grid/issues)\r\n- š¬ Discussions: [GitHub Discussions](https://github.com/Amiraliansaripour/data-grid/discussions)\r\n\r\n---\r\n\r\nMade with ā¤ļø by [Amirali Ansaripour](https://github.com/Amiraliansaripour)\r\n","readmeFilename":"README.md","_rev":"1-f26351f19c2362dcb947174a3f16d300"}