@neukoio/react-table 0.0.2

package/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-transform-runtime"]
+  }

package/README.md

@@ -0,0 +1,52 @@
+# My React Table Package
+
+**`react-table-neuko-io`** is a lightweight, customizable, and reusable table component designed for React applications. Built with React and styled using Tailwind CSS, this package simplifies the creation of interactive and visually appealing tables.
+
+---
+
+## Features
+
+- 📦 **Reusable Components**: Comes with a `Table` and `Button` component out of the box.
+- 🎨 **Tailwind CSS Styling**: Fully styled and customizable using Tailwind CSS.
+- 🛠 **Ease of Use**: Simple API for quick integration.
+- ⚡ **Responsive Design**: Adapts to all screen sizes seamlessly.
+
+---
+
+## Installation
+
+Install the package via npm:
+
+```bash
+npm install react-table-neuko-io
+```
+---
+## File Structure
+
+Here’s the structure of the package:
+
+react-table-neuko-io/
+├── src/
+│   ├── index.js          # Entry point for the components
+│   ├── Table.js          # Table component
+│   ├── Button.js         # Button component
+│   ├── styles.css        # Tailwind CSS styles
+│   └── useWindowSize.js  # Custom hook for handling responsive design
+├── dist/                 # Transpiled output
+├── package.json          # Package configuration
+├── .babelrc              # Babel configuration
+├── tailwind.config.js    # Tailwind configuration
+├── postcss.config.js     # PostCSS configuration
+└── README.md             # Documentation
+
+
+---
+## Development
+If you'd like to contribute or make changes to the package, follow these steps:
+
+Clone the repository:
+
+---
+## License
+This project is licensed under the MIT License. See the LICENSE file for more details.
+

package/dist/Table.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+require("./styles.css");
+var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
+var _solid = require("@heroicons/react/20/solid");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Table = function Table(_ref) {
+  var data = _ref.data,
+    columnDefs = _ref.columnDefs,
+    _ref$isMoreData = _ref.isMoreData,
+    isMoreData = _ref$isMoreData === void 0 ? false : _ref$isMoreData,
+    _ref$onLoadMore = _ref.onLoadMore,
+    onLoadMore = _ref$onLoadMore === void 0 ? function () {} : _ref$onLoadMore;
+  var width = (0, _useWindowSize["default"])();
+
+  // Get the appropriate column definitions based on the screen size
+  var getColumnDefs = function getColumnDefs() {
+    if (width >= 640 && width <= 768) return columnDefs.sm || columnDefs["default"];
+    if (width >= 769 && width <= 1024) return columnDefs.md || columnDefs["default"];
+    if (width >= 1025 && width <= 1280) return columnDefs.lg || columnDefs["default"];
+    if (width >= 1281 && width <= 1536) return columnDefs.xl || columnDefs["default"];
+    if (width >= 1537) return columnDefs.xxl || columnDefs["default"];
+    return columnDefs["default"];
+  };
+  var currentColumnDefs = getColumnDefs();
+
+  // Pagination state
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentPage = _useState2[0],
+    setCurrentPage = _useState2[1];
+  var _useState3 = (0, _react.useState)(10),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    itemsPerPage = _useState4[0],
+    setItemsPerPage = _useState4[1]; // State for results per page
+
+  var handleResultsPerPageChange = function handleResultsPerPageChange(value) {
+    setItemsPerPage(value);
+    setCurrentPage(1); // Reset to the first page when items per page changes
+  };
+
+  // Get the data for the current page
+  var startIndex = (currentPage - 1) * itemsPerPage;
+  var currentData = data.slice(startIndex, startIndex + itemsPerPage);
+  var totalPages = Math.ceil(data.length / itemsPerPage);
+
+  // Handle next page logic
+  var handleNextPage = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(currentPage === totalPages && isMoreData)) {
+              _context.next = 3;
+              break;
+            }
+            _context.next = 3;
+            return onLoadMore();
+          case 3:
+            // Increase page number after data is loaded (or if data was already loaded)
+            setCurrentPage(function (prevPage) {
+              return Math.min(prevPage + 1, totalPages + (isMoreData ? 1 : 0));
+            });
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleNextPage() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // Handle previous page logic
+  var handlePreviousPage = function handlePreviousPage() {
+    setCurrentPage(function (prevPage) {
+      return Math.max(prevPage - 1, 1);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "px-4 sm:px-6 lg:px-8"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-8 flow-root"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg"
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    className: "min-w-full divide-y divide-gray-300"
+  }, /*#__PURE__*/_react["default"].createElement("thead", {
+    className: "bg-gray-50"
+  }, /*#__PURE__*/_react["default"].createElement("tr", null, currentColumnDefs.map(function (col, index) {
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: index,
+      className: "".concat(col.style)
+    }, col.name);
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", {
+    className: "divide-y divide-gray-200 bg-white"
+  }, currentData.map(function (row, rowIndex) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: rowIndex
+    }, currentColumnDefs.map(function (column, colIndex) {
+      return /*#__PURE__*/_react["default"].createElement("td", {
+        key: "cell-".concat(rowIndex, "-").concat(colIndex),
+        className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+      }, column.row ? column.row(row) : row[column.accessorKey]);
+    }));
+  }))))))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "flex items-center"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "results-per-page",
+    className: "mr-3 text-sm text-gray-700"
+  }, "Results per page:"), /*#__PURE__*/_react["default"].createElement("select", {
+    id: "results-per-page",
+    name: "results-per-page",
+    value: itemsPerPage,
+    onChange: function onChange(e) {
+      return handleResultsPerPageChange(Number(e.target.value));
+    },
+    className: "block w-24 rounded-md border-gray-300 bg-white py-2 pl-3 pr-10 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+  }, /*#__PURE__*/_react["default"].createElement("option", {
+    value: "10"
+  }, "10"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "20"
+  }, "20"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "50"
+  }, "50"), /*#__PURE__*/_react["default"].createElement("option", {
+    value: "100"
+  }, "100"))), /*#__PURE__*/_react["default"].createElement("nav", {
+    "aria-label": "Pagination",
+    className: "isolate inline-flex -space-x-px rounded-md shadow-sm"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: handlePreviousPage,
+    className: "relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium ".concat(currentPage === 1 ? 'text-gray-300 bg-gray-50 cursor-not-allowed' : 'text-gray-700 bg-white hover:bg-gray-100'),
+    disabled: currentPage === 1
+  }, /*#__PURE__*/_react["default"].createElement(_solid.ChevronLeftIcon, {
+    "aria-hidden": "true",
+    className: "w-5 h-5"
+  })), (0, _toConsumableArray2["default"])(Array(totalPages)).map(function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: index,
+      onClick: function onClick() {
+        return setCurrentPage(index + 1);
+      },
+      className: "relative inline-flex items-center px-4 py-2 text-sm font-medium ".concat(currentPage === index + 1 ? 'bg-indigo-600 text-white' : 'text-gray-700 bg-white hover:bg-gray-100')
+    }, index + 1);
+  }), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: handleNextPage,
+    className: "relative inline-flex items-center rounded-r-md px-3 py-2 text-sm font-medium ".concat(currentPage === totalPages && !isMoreData ? 'text-gray-300 bg-gray-50 cursor-not-allowed' : 'text-gray-700 bg-white hover:bg-gray-100'),
+    disabled: currentPage === totalPages && !isMoreData
+  }, /*#__PURE__*/_react["default"].createElement(_solid.ChevronRightIcon, {
+    "aria-hidden": "true",
+    className: "w-5 h-5"
+  }))))));
+};
+var _default = exports["default"] = Table;

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _Table["default"];
+  }
+});
+var _Table = _interopRequireDefault(require("./Table"));

package/dist/styles.css

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

package/dist/useWindowSize.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useWindowSize = function useWindowSize() {
+  var _useState = (0, _react.useState)(window.innerWidth),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1]; // Initial value is window.innerWidth
+
+  (0, _react.useEffect)(function () {
+    var handleResize = function handleResize() {
+      return setWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return width; // Return width directly
+};
+var _default = exports["default"] = useWindowSize;

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@neukoio/react-table",
+  "version": "0.0.2",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src --out-dir dist --copy-files"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@heroicons/react": "^2.1.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.9",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "tailwindcss": "^3.2.4"
+  }
+}

package/src/Table.js

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import './styles.css';
+import useWindowSize from './useWindowSize';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
+
+const Table = ({ data, columnDefs, isMoreData = false, onLoadMore = () => {} }) => {
+  const width = useWindowSize();
+
+  // Get the appropriate column definitions based on the screen size
+  const getColumnDefs = () => {
+    if (width >= 640 && width <= 768) return columnDefs.sm || columnDefs.default;
+    if (width >= 769 && width <= 1024) return columnDefs.md || columnDefs.default;
+    if (width >= 1025 && width <= 1280) return columnDefs.lg || columnDefs.default;
+    if (width >= 1281 && width <= 1536) return columnDefs.xl || columnDefs.default;
+    if (width >= 1537) return columnDefs.xxl || columnDefs.default;
+    return columnDefs.default;
+  };
+
+  const currentColumnDefs = getColumnDefs();
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useState(10); // State for results per page
+
+  const handleResultsPerPageChange = (value) => {
+    setItemsPerPage(value);
+    setCurrentPage(1); // Reset to the first page when items per page changes
+  };
+
+  // Get the data for the current page
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const currentData = data.slice(startIndex, startIndex + itemsPerPage);
+
+  const totalPages = Math.ceil(data.length / itemsPerPage);
+
+  // Handle next page logic
+  const handleNextPage = async () => {
+    if (currentPage === totalPages && isMoreData) {
+      // Fetch more data when on the last page
+      await onLoadMore(); // Fetch more data
+    }
+    // Increase page number after data is loaded (or if data was already loaded)
+    setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages + (isMoreData ? 1 : 0)));
+  };
+
+  // Handle previous page logic
+  const handlePreviousPage = () => {
+    setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
+  };
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead className="bg-gray-50">
+                  <tr>
+                    {currentColumnDefs.map((col, index) => (
+                      <th key={index} className={`${col.style}`}>
+                        {col.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 bg-white">
+                  {currentData.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                      {currentColumnDefs.map((column, colIndex) => (
+                        <td
+                          key={`cell-${rowIndex}-${colIndex}`}
+                          className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+                        >
+                          {column.row ? column.row(row) : row[column.accessorKey]}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Pagination Section */}
+      <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
+        <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+          <div className="flex items-center">
+            <label htmlFor="results-per-page" className="mr-3 text-sm text-gray-700">
+              Results per page:
+            </label>
+            <select
+              id="results-per-page"
+              name="results-per-page"
+              value={itemsPerPage}
+              onChange={(e) => handleResultsPerPageChange(Number(e.target.value))}
+              className="block w-24 rounded-md border-gray-300 bg-white py-2 pl-3 pr-10 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            >
+              <option value="10">10</option>
+              <option value="20">20</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+            </select>
+          </div>
+
+          <nav aria-label="Pagination" className="isolate inline-flex -space-x-px rounded-md shadow-sm">
+            <button
+              onClick={handlePreviousPage}
+              className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-medium ${currentPage === 1
+                ? 'text-gray-300 bg-gray-50 cursor-not-allowed'
+                : 'text-gray-700 bg-white hover:bg-gray-100'
+                }`}
+              disabled={currentPage === 1}
+            >
+              <ChevronLeftIcon aria-hidden="true" className="w-5 h-5" />
+            </button>
+
+            {[...Array(totalPages)].map((_, index) => (
+              <button
+                key={index}
+                onClick={() => setCurrentPage(index + 1)}
+                className={`relative inline-flex items-center px-4 py-2 text-sm font-medium ${currentPage === index + 1
+                  ? 'bg-indigo-600 text-white'
+                  : 'text-gray-700 bg-white hover:bg-gray-100'
+                  }`}
+              >
+                {index + 1}
+              </button>
+            ))}
+
+            <button
+              onClick={handleNextPage}
+              className={`relative inline-flex items-center rounded-r-md px-3 py-2 text-sm font-medium ${currentPage === totalPages && !isMoreData
+                ? 'text-gray-300 bg-gray-50 cursor-not-allowed'
+                : 'text-gray-700 bg-white hover:bg-gray-100'
+                }`}
+              disabled={currentPage === totalPages && !isMoreData}
+            >
+              <ChevronRightIcon aria-hidden="true" className="w-5 h-5" />
+            </button>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/src/index.js

@@ -0,0 +1,2 @@
+// index.js
+export { default as Table } from './Table';

package/src/styles.css

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

package/src/useWindowSize.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+  const [width, setWidth] = useState(window.innerWidth); // Initial value is window.innerWidth
+
+  useEffect(() => {
+    const handleResize = () => setWidth(window.innerWidth);
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return width; // Return width directly
+};
+
+export default useWindowSize;