@neukoio/react-table 0.0.3 → 1.0.0

package/README.md

@@ -1,13 +1,13 @@
 
 # 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.  
 
 ---
 
 ## 🚀 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 +19,7 @@
 Install the package via npm:  
 
 ```bash  
-npm install react-table-neuko-io  
+npm install @neukoio/react-table
 ```  
 
 ---
@@ -29,19 +29,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 +126,13 @@ 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  
-
-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.0",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",