A customizable React data table component with sorting, filtering, and pagination features
npm install nalu-tablebash
npm install nalu-table
or
yarn add nalu-table
`
$3
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
`bash
npm install -D tailwindcss postcss autoprefixer
or
yarn add -D tailwindcss postcss autoprefixer
`
2. Initialize Tailwind CSS
`bash
npx tailwindcss init -p
`
3. Configure your tailwind.config.js
`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
`css
/ In your main CSS file /
@tailwind base;
@tailwind components;
@tailwind utilities;
`
$3
`jsx
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
`jsx
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 (
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 |
$3
| 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
$3
`jsx
header=true
variant="crimson"
theme="light"
/>
`
$3
`jsx
header=true
plusButton={() => console.log('Do something')}
addItemFunction={() => console.log('Add:', id)}
editItemFunction={(id) => console.log('Edit:', id)}
removeItemFunction={(id) => console.log('Remove:', id)}
/>
`
$3
`jsx
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
/>
`
$3
`jsx
header=true
variant="sapphire"
theme="dark"
brandLogo="path/to/your/logo.png"
/>
``