My React Table Package

@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
• 🚀 Features
• 📥 Installation
• 🛠 Usage
• 📂 File Structure
• 📜 License
• 📋 Changelog

🚀 Features

• 📦 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.

📥 Installation

Install the package via npm:

npm install @neukoio/react-table

🛠 Usage

Here's a basic example of how to use the react-table-neuko-io package:

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}
          columnDefs={columnDefs}
          isMoreData={nextToken !== null} // `true` if there's more data to load
          onLoadMore={handleLoadMore} // Function to load more data
        />
    </div>  
  );  
};  

export default App;  

📂 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  

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

📋 Changelog

[1.0.1] - 2024-12-03

• Add license and table of content in README.md

[1.0.0] - 2024-12-03

• Initial release of the package.
• Added basic table functionality with responsive columns.