@neukoio/react-table 0.0.3 → 1.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 Wan Ilhami <pagami.zonda26@gmail.com> (https://github.com/wan-ilhami)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,13 +1,25 @@
 
 # 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.  
+**`@neukoio/react-table`** 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.  
+
+---
+
+## 📖 Table of Contents  
+
+- [My React Table Package](#my-react-table-package)  
+- [🚀 Features](#-features)  
+- [📥 Installation](#-installation)  
+- [🛠 Usage](#-usage)  
+- [📂 File Structure](#-file-structure)  
+- [📜 License](#-license)  
+- [📋 Changelog](#-changelog) 
 
 ---
 
 ## 🚀 Features  
 
-- 📦 **Reusable Components**: Includes `Table` and `Button` components out of the box.  
+- 📦 **Reusable Components**: Includes `Table` 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.  
@@ -19,7 +31,7 @@
 Install the package via npm:  
 
 ```bash  
-npm install react-table-neuko-io  
+npm install @neukoio/react-table
 ```  
 
 ---
@@ -29,19 +41,72 @@ npm install react-table-neuko-io
 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";  
-
-const App = () => {  
-  const data = [  
-    { name: "John Doe", email: "john@example.com", role: "Admin" },  
-    { name: "Jane Smith", email: "jane@example.com", role: "User" },  
-  ];  
+import React, { useState } from "react";  
+import { Table } from "@neukoio/react-table";  
+
+const App = () => {
+    const [data, setData] = useState(['']);
+    const [nextToken, setNextToken] = useState(1); // Token to check if more data is available
+    // Simulated function to load more data
+  const handleLoadMore = async () => {
+    // Simulating fetching data for the next "page"
+    const newEntries = //fetch the data here
+
+    // Update data and increment nextToken
+    setData((prevData) => [...prevData, ...newEntries]);
+    setNextToken(newEntries.length > 0 ? 'newToken' : null);
+  };
+
+    const columnDefs = {
+    default: [
+      {
+        accessorKey: 'row1',
+        name: 'Row 1',
+        style: 'px-3 py-3.5 text-left text-sm font-semibold text-gray-900',
+        row: (row) => {
+          return <td className="px-3 py-4 text-sm text-gray-500 leading-loose">
+            <p>{row.row1.email}</p>
+            <p>{row.row1.nophone}</p>
+          </td>
+        },
+      },
+      //you can add more the header for table based on you want
+    ],
+    sm: [
+      {
+        accessorKey: 'row1',
+        name: 'Row 1',
+        style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
+        row: (row) => {
+          return <td className="px-3 py-4 text-xs text-gray-500 leading-loose">
+            <p>{row.row1.email}</p>
+            <p>{row.row1.nophone}</p>
+          </td>
+        },
+      },
+     //you can add more the header for table based on you want
+    ],
+    md: [
+      {
+        accessorKey: 'row1',
+        name: 'Row 1',
+        style: 'px-3 py-3.5 text-left text-xs font-semibold text-gray-900',
+        row: (row) => {
+          return <td className="px-3 py-4 text-xs text-gray-500">{row.row1.email}</td>
+        },
+      },
+      //you can add more the header for table based on you want
+    ],
+  } 
 
   return (  
     <div className="container mx-auto">  
-      <Table data={data} columns={["name", "email", "role"]} />  
-      <Button onClick={() => alert("Button clicked!")}>Click Me</Button>  
+      <Table
+          data={data}
+          columnDefs={columnDefs}
+          isMoreData={nextToken !== null} // `true` if there's more data to load
+          onLoadMore={handleLoadMore} // Function to load more data
+        />
     </div>  
   );  
 };  
@@ -73,28 +138,16 @@ react-table-neuko-io/
 
 ---
 
-## 🧑‍💻 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  
-   ```  
+## 📜 License  
 
-3. Run the development server:  
-   ```bash  
-   npm start  
-   ```  
+This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.  
 
 ---
+## 📋 Changelog
 
-## 📜 License  
+### [1.0.1] - 2024-12-03  
+- Add license and table of content in README.md
 
-This project is licensed under the **MIT License**. See the [LICENSE](./LICENSE) file for details.  
+### [1.0.0] - 2024-12-03  
+- Initial release of the package.  
+- Added basic table functionality with responsive columns.  

package/package.json

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