@neukoio/react-table 0.0.2 → 0.0.3

package/README.md

@@ -1,52 +1,100 @@
-# 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.
+# 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
+## 🚀 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.
+- 📦 **Reusable Components**: Includes `Table` and `Button` components 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 seamlessly to all screen sizes.  
 
 ---
 
-## Installation
+## 📥 Installation  
+
+Install the package via npm:  
 
-Install the package via npm:
+```bash  
+npm install react-table-neuko-io  
+```  
 
-```bash
-npm install react-table-neuko-io
-```
 ---
-## File Structure
 
-Here’s the structure of the package:
+## 🛠 Usage  
+
+Here's a basic example of how to use the `react-table-neuko-io` package:  
+
+```jsx  
+import React from "react";  
+import { Table, Button } from "react-table-neuko-io";  
 
-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
+const App = () => {  
+  const data = [  
+    { name: "John Doe", email: "john@example.com", role: "Admin" },  
+    { name: "Jane Smith", email: "jane@example.com", role: "User" },  
+  ];  
 
+  return (  
+    <div className="container mx-auto">  
+      <Table data={data} columns={["name", "email", "role"]} />  
+      <Button onClick={() => alert("Button clicked!")}>Click Me</Button>  
+    </div>  
+  );  
+};  
+
+export default App;  
+```  
 
 ---
-## Development
-If you'd like to contribute or make changes to the package, follow these steps:
 
-Clone the repository:
+## 📂 File Structure  
+
+Here’s the structure of the package:  
+
+```plaintext  
+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  
+```  
 
 ---
-## License
-This project is licensed under the MIT License. See the LICENSE file for more details.
 
+## 🧑‍💻 Development  
+
+If you'd like to contribute or make changes to the package, follow these steps:  
+
+1. Clone the repository:  
+   ```bash  
+   git clone https://github.com/your-repo/react-table-neuko-io.git  
+   ```  
+
+2. Install dependencies:  
+   ```bash  
+   cd react-table-neuko-io  
+   npm install  
+   ```  
+
+3. Run the development server:  
+   ```bash  
+   npm start  
+   ```  
+
+---
+
+## 📜 License  
+
+This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.  

package/dist/Table.js

@@ -107,20 +107,26 @@ var Table = function Table(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("tr", null, currentColumnDefs.map(function (col, index) {
     return /*#__PURE__*/_react["default"].createElement("th", {
       key: index,
-      className: "".concat(col.style)
+      className: "".concat(col.style, " align-middle text-center whitespace-nowrap")
     }, col.name);
   }))), /*#__PURE__*/_react["default"].createElement("tbody", {
     className: "divide-y divide-gray-200 bg-white"
-  }, currentData.map(function (row, rowIndex) {
+  }, currentData.length > 0 ? 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"
+        className: "px-6 py-4 align-middle  whitespace-nowrap text-sm font-medium text-gray-900"
       }, column.row ? column.row(row) : row[column.accessorKey]);
     }));
-  }))))))), /*#__PURE__*/_react["default"].createElement("div", {
+  }) :
+  /*#__PURE__*/
+  // Render this row if there's no data
+  _react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: currentColumnDefs.length,
+    className: "px-6 py-4 text-center text-sm text-gray-500"
+  }, "No data available.")))))))), data.length > 0 && /*#__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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neukoio/react-table",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Table.js

@@ -58,25 +58,37 @@ const Table = ({ data, columnDefs, isMoreData = false, onLoadMore = () => {} })
                 <thead className="bg-gray-50">
                   <tr>
                     {currentColumnDefs.map((col, index) => (
-                      <th key={index} className={`${col.style}`}>
+                      <th key={index} className={`${col.style} align-middle text-center whitespace-nowrap`}>
                         {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>
-                      ))}
+                  {currentData.length > 0 ? (
+                    currentData.map((row, rowIndex) => (
+                      <tr key={rowIndex}>
+                        {currentColumnDefs.map((column, colIndex) => (
+                          <td
+                            key={`cell-${rowIndex}-${colIndex}`}
+                            className="px-6 py-4 align-middle  whitespace-nowrap text-sm font-medium text-gray-900"
+                          >
+                            {column.row ? column.row(row) : row[column.accessorKey]}
+                          </td>
+                        ))}
+                      </tr>
+                    ))
+                  ) : (
+                    // Render this row if there's no data
+                    <tr>
+                      <td
+                        colSpan={currentColumnDefs.length}
+                        className="px-6 py-4 text-center text-sm text-gray-500"
+                      >
+                        No data available.
+                      </td>
                     </tr>
-                  ))}
+                  )}
                 </tbody>
               </table>
             </div>
@@ -85,64 +97,69 @@ const Table = ({ data, columnDefs, isMoreData = false, onLoadMore = () => {} })
       </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>
+      {data.length > 0 && (
+        <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>
 
-            {[...Array(totalPages)].map((_, index) => (
+            <nav aria-label="Pagination" className="isolate inline-flex -space-x-px rounded-md shadow-sm">
               <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'
-                  }`}
+                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}
               >
-                {index + 1}
+                <ChevronLeftIcon aria-hidden="true" className="w-5 h-5" />
               </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'
+              {[...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>
+                disabled={currentPage === totalPages && !isMoreData}
+              >
+                <ChevronRightIcon aria-hidden="true" className="w-5 h-5" />
+              </button>
+            </nav>
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };