Nalu Table

A modern, customizable React table component with built-in themes, pagination, and advanced features. Perfect for creating beautiful and functional data tables in your React applications.

Features

• 🎨 Theme variants (Sapphire & Crimson)
• 🌗 Light and dark mode
• 📱 Responsive design
• ⚡ Pagination
• 🔄 Dynamic sorting
• ✨ Row selection
• 📑 Tab system
• 🎯 Custom actions
• 🖼️ Custom logo support

Installation

1. Install the package

npm install nalu-table
# or
yarn add nalu-table

2. Tailwind CSS Requirement

This component requires Tailwind CSS to be installed and configured in your project. If you haven't already set up Tailwind CSS, follow these steps:

1. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer

2. Initialize Tailwind CSS

npx tailwindcss init -p

3. Configure your tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/nalu-table/**/*.{js,jsx}", // Add this line to include nalu-table components
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add Tailwind's directives to your CSS

/* In your main CSS file */
@tailwind base;
@tailwind components;
@tailwind utilities;

3. Start using the component

import NaluTable from "nalu-table";
import "nalu-table/dist/style.css"; //Recommended for best visual experience

// Your component code

⚠️ Important: The table component will not be styled correctly if Tailwind CSS is not properly installed and configured in your project.

Quick Start

import NaluTable from "nalu-table";
import "nalu-table/dist/style.css"; //Recommended for best visual experience


function App() {
 const tableData = {
    tabs: [
      { title: 'Tab 1', quantity: 10, checked: true, special: true },
      { title: 'Tab 2', quantity: 20, checked: false }, special: false}
    ],
    tableInfo: {
      columns: [
        { header: 'Name', ref: 'name', alignment: 'left', ordering: true },
        { header: 'Price', ref: 'price', alignment: 'right', ordering: true },
      ],
      items: [
        { id: 1, name: 'Item 1', price: 10.99 },
        { id: 2, name: 'Item 2', price: 20.99 },
      ],
    },
  };

  return (
    <NaluTable
      tableData={tableData}
      header=true
      variant="sapphire"
      theme="light"
    />
  );
}

Props

| Prop | Type | Default | Description | | ----------------- | --------- | ---------------------------- | --------------------------------------------------- | | tableData | array | [] | Required. Array of data to display in the table | | header | boolean | true | Search header visibility | | plusButton | boolean | true | Custom add button component | | totalItems | number | 0 | Total number of items for pagination | | itemsPerPage | number | 10 | Number of items per page | | currentPageProp | number | 1 | Current page number | | loading | boolean | false | Loading state of the table | | size | string | "default" | Table size variant | | variant | string | "sapphire" | Visual variant of the table | | theme | string | "light" | Color theme ("light" or "dark") | | modalTitle | string | "" | Title for the modal | | selectedTab | string | "" | Currently selected tab | | activeTab | string | "" | Currently active tab | | language | string | "en" | Table language (only 'en' and 'pt-br'') | | minWidth | number | 1200 | Minimum content width (ScrollBar) | | brandlogo | string | "https://placehold.co/400" | URL for the logo image |

Event Handlers

| Prop | Type | Default | Description | | ----------------------- | ---------- | ---------- | --------------------------------- | | addItemFunction | function | () => {} | Handler for adding new items | | viewItemFunction | function | () => {} | Handler for viewing items | | editItemFunction | function | () => {} | Handler for editing items | | removeItemFunction | function | () => {} | Handler for removing items | | handlePageChange | function | () => {} | Handler for page changes | | handleTabChange | function | () => {} | Handler for tab changes | | handleSelectionChange | function | null | Handler for row selection changes | | handleSaveTabs | function | () => {} | Handler for saving tab changes |

Examples

Basic Table

<NaluTable
  tableData={data}
  header=true
  variant="crimson"
  theme="light"
/>

Table with Custom Actions

<NaluTable
  tableData={data}
  header=true
  plusButton={() => console.log('Do something')}
  addItemFunction={() => console.log('Add:', id)}
  editItemFunction={(id) => console.log('Edit:', id)}
  removeItemFunction={(id) => console.log('Remove:', id)}
/>

Paginated Table with Selection

<NaluTable
  tableData={data}
  header=true
  totalItems={100}
  itemsPerPage={20}
  handlePageChange={(page) => console.log('Page:', page)}
  handleSelectionChange={(selected) => console.log('Selected:', selected)} // returns an array of items selected in the checkbox
/>

Custom Themed Table

<NaluTable
  tableData={data}
  header=true
  variant="sapphire"
  theme="dark"
  brandLogo="path/to/your/logo.png"
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © William Silva