Advanced Table

The AdvancedTable component from Bungas UI.

Default

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

With Sticky Columns

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

Loading

	ID	Name	Email	Role	Department	Status	Last Login

Rows per page1-0 of 0

With Selection

Selected: 0 row(s)

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

Without Pagination

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13

Custom Items Per Page

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13

Rows per page1-5 of 8

Installation

npm install @bungas/ui

Import

import { AdvancedTable } from "@bungas/ui"

Usage

import { AdvancedTable } from "@bungas/ui"
 
export function Example() {
  return <AdvancedTable />
}

Props

Examples

Default

Default

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

With Sticky Columns

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

Loading

	ID	Name	Email	Role	Department	Status	Last Login

Rows per page1-0 of 0

With Selection

Selected: 0 row(s)

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13
	6	Diana Lee	diana@example.com	User	Design	Active	2024-01-12
	7	Edward Kim	edward@example.com	Manager	Sales	Active	2024-01-11
	8	Fiona Chen	fiona@example.com	User	Marketing	Inactive	2024-01-08

Rows per page1-8 of 8

Without Pagination

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13

Custom Items Per Page

	ID	Name	Email	Role	Department	Status	Last Login
	1	John Doe	john@example.com	Admin	Engineering	Active	2024-01-15
	2	Jane Smith	jane@example.com	User	Design	Active	2024-01-14
	3	Bob Johnson	bob@example.com	Manager	Engineering	Inactive	2024-01-10
	4	Alice Brown	alice@example.com	User	Marketing	Active	2024-01-15
	5	Charlie Wilson	charlie@example.com	Admin	Engineering	Active	2024-01-13

Rows per page1-5 of 8