react-live-data-table 1.0.1

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "react-live-data-table",
+  "version": "1.0.1",
+  "description": "Your React component package with Tailwind",
+  "main": "src/index.js",
+  "module": "dist/index.esm.js",
+  "files": [
+    "src"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.7",
+    "@babel/preset-env": "^7.26.7",
+    "@babel/preset-react": "^7.26.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "postcss": "^8.5.1",
+    "rollup": "^3.29.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^3.4.17"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}

package/readme.md

@@ -0,0 +1,80 @@
+# React Data Grid Table
+
+A highly customizable and efficient data grid table for React. It supports features like **live pagination**, **checkbox selection**, **dynamic data loading**, **scrollable body**, and more. This component is designed to make handling tabular data easier and more interactive.
+
+---
+
+## 🚀 Installation
+
+To install the package, run one of the following commands:
+
+```bash
+npm install react-data-grid-table
+
+# React Data Grid
+
+A flexible React data grid component with support for pagination, row selection, and dynamic data handling.
+
+## Props
+
+### Required Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `dataSource` | `Array \| Function` | The data to display in the grid. Can be an array for static data or a function for server-side pagination |
+| `columns` | `Array` | Defines the columns configuration |
+
+### Optional Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `loading` | `boolean` | `false` | Shows loading state |
+| `maxHeight` | `string` | `"600px"` | Maximum height of the grid |
+| `height` | `string` | `"600px"` | Fixed height of the grid |
+| `showCheckbox` | `boolean` | `false` | Enable row selection |
+| `onSelectionChange` | `Function` | - | Callback when row selection changes |
+| `defaultLimit` | `number` | `50` | Rows per page |
+| `onRowClick` | `Function` | - | Callback when row is clicked |
+| `livePagination` | `boolean` | `false` | Enable server-side pagination |
+| `staticData` | `Array` | `null` | Static data array |
+| `emptyText` | `string` | - | Text shown when no data |
+| `rowHeights` | `number` | `40` | Height of each row |
+| `headerProps` | `object` | `{}` | Custom header properties |
+
+
+
+
+### Column Definition
+
+```typescript
+interface ColumnDefinition {
+ field: string;          // Key of the data field to display
+ headerName: string;     // Text to show in column header
+ width?: number;         // Column width in pixels
+ sortable?: boolean;     // Enable column sorting
+ render?: (value: any, rowData: Object) => React.ReactNode;  // Custom cell renderer
+
+
+## Basic Usage
+
+```jsx
+import { ReactDataTable } from 'react-data-grid';
+
+const App = () => {
+  const columns = [
+    { field: 'id', headerName: 'ID' },
+    { field: 'name', headerName: 'Name' }
+  ];
+
+  const data = [
+    { id: 1, name: 'John' },
+    { id: 2, name: 'Jane' }
+  ];
+
+  return (
+    <ReactDataTable 
+      columns={columns}
+      dataSource={data}
+    />
+  );
+};

package/src/ReactDataTable.jsx

@@ -0,0 +1,281 @@
+import React, { useEffect } from 'react';
+import "./index.css";
+
+function ReactDataTable({
+  dataSource,
+  columns,
+  loading = false,
+  maxHeight = "600px",
+  height = "600px",
+  showCheckbox = false,
+  onSelectionChange,
+  defaultLimit = 50,
+  onRowClick,
+  livePagination = false,
+  staticData = null,
+  emptyText,
+  rowHeights = 40,
+  headerProps = {} // Added default value
+}) {
+  const tableContainerRef = React.useRef(null);
+  const [data, setData] = React.useState({ pages: [], meta: { totalPages: 1 } });
+  const [isFetching, setIsFetching] = React.useState(false);
+  const [pageParam, setPageParam] = React.useState(1);
+  const [selectedRows, setSelectedRows] = React.useState({});
+
+
+  useEffect(() => {
+    setData({ pages: [], meta: { totalPages: 1 } });
+    setPageParam(1);
+
+    if (staticData) {
+      setData({
+        pages: [{
+          data: staticData,
+          meta: {
+            totalPages: 1,
+            totalCount: staticData.length
+          }
+        }],
+        meta: {
+          totalPages: 1,
+          totalCount: staticData.length
+        }
+      });
+    } else {
+      loadInitialData();
+    }
+  }, [dataSource, staticData]);
+
+  const loadInitialData = async () => {
+    if (!dataSource) return;
+
+    try {
+      const initialData = await dataSource({ skip: 0, limit: defaultLimit });
+      setData({
+        pages: [initialData],
+        meta: initialData.meta
+      });
+      setPageParam(1);
+    } catch (error) {
+      console.error('Error loading initial data:', error);
+    }
+  };
+
+  const fetchNextPage = async () => {
+    if (isFetching || !livePagination || staticData) return;
+
+    setIsFetching(true);
+    try {
+      const nextData = await dataSource({
+        skip: pageParam * defaultLimit,
+        limit: defaultLimit
+      });
+      setData(prev => ({
+        pages: [...prev.pages, nextData],
+        meta: nextData.meta
+      }));
+      setPageParam(prev => prev + 1);
+    } catch (error) {
+      console.error('Error fetching next page:', error);
+    } finally {
+      setIsFetching(false);
+    }
+  };
+
+  const handleSelectAll = (checked, flatData) => {
+    if (checked) {
+      const newSelected = {};
+      flatData.forEach(row => {
+        newSelected[row.id] = { ...row };
+      });
+      setSelectedRows(newSelected);
+      onSelectionChange?.({
+        data: flatData,
+        selected: true,
+        originalData: flatData,
+        unselected: null
+      });
+    } else {
+      setSelectedRows({});
+      onSelectionChange?.({
+        data: [],
+        selected: {},
+        originalData: data.pages.data
+      });
+    }
+  };
+
+  const handleSelectRow = (checked, row, flatData) => {
+    const rowId = row.id;
+    if (checked) {
+      setSelectedRows(prev => ({
+        ...prev,
+        [rowId]: { ...row }
+      }));
+      onSelectionChange?.({
+        data: { ...row },
+        selected: { ...selectedRows, [rowId]: { ...row } },
+        [rowId]: { ...row },
+        originalData: [...flatData]
+      });
+    } else {
+      const updatedSelectedRows = { ...selectedRows };
+      delete updatedSelectedRows[rowId];
+
+      setSelectedRows(updatedSelectedRows);
+      onSelectionChange?.({
+        data: { ...row },
+        selected: { ...updatedSelectedRows },
+        originalData: [...flatData]
+      });
+    }
+  };
+
+  const handleRowClick = (row, index, flatData) => {
+    onRowClick?.({
+      data: { ...row },
+      dataSourceArray: flatData,
+      rowIndex: index
+    });
+  };
+
+  const handleScroll = (containerRefElement) => {
+    if (containerRefElement) {
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      if (
+        scrollHeight - scrollTop - clientHeight < 500 &&
+        !isFetching &&
+        pageParam < data.meta.totalPages
+      ) {
+        fetchNextPage();
+      }
+    }
+  };
+
+  useEffect(() => {
+    handleScroll(tableContainerRef.current);
+  }, [data]);
+
+  const flatData = data.pages.flatMap(page => page.data);
+
+  const checkboxColumn = {
+    id: 'select',
+    size: 50,
+    minWidth: 50,
+    textAlign: "center",
+    header: ({ data }) => (
+      <div className="flex items-center justify-center h-[40px]">
+        <input
+          type="checkbox"
+          checked={Object.keys(selectedRows).length > 0 && data.every(row => selectedRows[row.id])}
+          onChange={(e) => handleSelectAll(e.target.checked, flatData)}
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center h-[40px]">
+        <input
+          type="checkbox"
+          checked={!!selectedRows[row.id]}
+          onChange={(e) => handleSelectRow(e.target.checked, row, flatData)}
+        />
+      </div>
+    ),
+  };
+
+  const enhancedColumns = showCheckbox ? [checkboxColumn, ...columns] : columns;
+
+  return (
+    <div className="bg-white relative w-full">
+      {loading && <div className="absolute inset-0 bg-white/50 z-20 flex items-center justify-center">
+        <div role="status" className="p-2">
+          <svg
+            aria-hidden="true"
+            className="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-green-500"
+            viewBox="0 0 100 101"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908Z"
+              fill="#555e68"
+            />
+          </svg>
+        </div>
+      </div>}
+      {flatData.length === 0 && !loading ? (
+        <div className="flex items-center justify-center" style={{ height }}>
+          <div className="text-gray-500">
+            {emptyText || 'No data available'}
+          </div>
+        </div>
+      ) : (
+        <div className="overflow-hidden">
+          <div
+            ref={tableContainerRef}
+            className="overflow-auto w-full"
+            style={{ maxHeight, height }}
+            onScroll={(e) => handleScroll(e.currentTarget)}
+          >
+            <table className="w-full border-collapse">
+              <thead
+                className="sticky top-0 z-1 bg-blue-300"
+                style={{ ...headerProps.style }}
+              >
+                <tr>
+                  {enhancedColumns.map(column => (
+                    <th
+                      key={column.accessorKey || column.id}
+                      className="text-left font-normal h-[40px]"
+                      style={{
+                        width: column.size,
+                        minWidth: column.minWidth,
+                        textAlign: column.textAlign,
+                      }}
+                    >
+                      {typeof column.header === 'function' ? column.header({ data: flatData }) : column.header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {flatData.length > 0 ? (
+                  flatData.map((row, index) => (
+                    <tr
+                      key={row.id}
+                      className={`border-t border-x border-gray-200 hover:bg-[#dee1f2] h-[${rowHeights}px] ${selectedRows[row.id] ? 'bg-[#dee1f2]' : ''}`}
+                      onClick={() => handleRowClick(row, index, flatData)}
+                    >
+                      {enhancedColumns.map(column => (
+                        <td
+                          key={column.accessorKey || column.id}
+                          className={`text-left font-normal border-r ${column?.cellProps?.className || ''}`}
+                          style={{
+                            minWidth: `${column.minWidth}px`,
+                            textAlign: column?.textAlign,
+                            ...column?.cellProps?.style,
+                          }}
+                        >
+                          {typeof column.cell === 'function' ? column.cell({ row }) : null}
+                        </td>
+                      ))}
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={enhancedColumns.length} className="text-center py-4">
+                      {emptyText || 'No data available'}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ReactDataTable;

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.js

@@ -0,0 +1 @@
+export { default as ReactDataTable } from './ReactDataTable.jsx';