M

a

n

a

g

e

a

n

d

m

a

n

i

p

u

l

a

t

e

y

o

u

r

i

t

e

m

s

e

a

s

i

l

y

A modern, customizable React table with theming, pagination, and advanced features for an intuitive table.

$ ~ npm install nalu-table

Individual actions

Individual actions for each table item.

Pagination

Browse pages with the limit defined by you.

Style

Styling two different styles.

Minimalist

Minimalist art with dark and light theme.

"Hello world!"

"Olá mundo!"

Multilingual

Support for Portuguese and English.

Usage Example

William Silva

Send email

What are you looking for?

X1

Xps 13 Laptop

L2

Lg 27' Monitor

LM

Logitech Mechanical Keyboard

MW

Microsoft Wireless Mouse

IP

Ipad Pro 12.9

LC

Logitech C920 Webcam

SW

Sony Wh-1000xm4 Headphones

MP

Macbook Pro M2

Code

Product

Price

Stock

Action

PRD001

XPS 13 Laptop

8999.99

15

2

PRD001-S

XPS 13 - SSD 512GB

9499.99

8

PRD001-M

XPS 13 - SSD 1TB

10499.99

7

PRD002

LG 27' Monitor

2199.99

23

PRD003

Logitech Mechanica...

899.99

45

2

PRD003-BR

ABNT2 Layout

899.99

30

PRD003-US

US Layout

879.99

15

PRD004

Microsoft Wireless...

299.99

0

PRD005

iPad Pro 12.9

9899.99

8

2

PRD005-64

64GB - WiFi

9899.99

3

PRD005-256

256GB - WiFi + 5G

11899.99

5

PRD006

Logitech C920 Webc...

599.99

5

PRD007

Sony WH-1000XM4 He...

2499.99

12

PRD008

MacBook Pro M2

14999.99

0

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
  ],
  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"

;function

App

( ) {const

tableData

=

{

tabs:[ {title:'Tab',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

tableData=

"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
language	string	"en"	Table language (Only 'en' and 'pt-br' are supported)
selectedTab	string	""	Currently selected tab
activeTab	string	""	Currently active tab
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=

{tableData}

header=

true

tableData=

"crimson"

theme=

"light"

/>

Table with Custom Actions

<

NaluTable

tableData=

{tableData}

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=

{tableData}

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

/>