UltraKit · Widget #19

Data Table

6 Table Styles × Live Search × Column Filter × Sortable Columns

5 Table Style3 Responsive Mode7 Toggles

Section 01

Table Style

5 options for table style — all shown live below.

1

Style 1: Classic Borderedtable_style = style-1

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

2

Style 2: Striped Rowstable_style = style-2

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

3

Style 3: Dark Headertable_style = style-3

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

4

Style 4: Minimal / Borderlesstable_style = style-4

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

5

Style 5: Gradient Headertable_style = style-5

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

Section 02

Responsive Mode

3 options for responsive mode — all shown live below.

1

Mode 1: Horizontal Scrollresponsive_mode = scroll

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

2

Mode 2: Stacked Cards (mobile)responsive_mode = stack

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

3

Mode 3: Hide Overflow Columnsresponsive_mode = hide

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

Section 03

Show & Hide Options

Switch parts of the widget on or off.

1

Live Search Bar — Offshow_search = off

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

2

Column Dropdown Filter — Offshow_column_filter = off

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

3

Pagination — Offshow_pagination = off

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

4

Show "Showing X of Y" Info — Offshow_info = off

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

5

CSV Export Button — Onshow_export = yes

All columns # Name Department Status Salary

Export CSV

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100

6

Show Row Numbers — Onshow_row_numbers = yes

All columns # Name Department Status Salary

#	#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	1	John Smith	Engineering	Active	$8,400
2	2	Maria Garcia	Marketing	Active	$6,200
3	3	David Lee	Design	On Leave	$7,800
4	4	Priya Sharma	Engineering	Active	$9,100
5	5	James Walker	Sales	Inactive	$5,600
6	6	Amara Osei	HR	Active	$6,900
7	7	Carlos Rivera	Finance	Active	$7,300
8	8	Yuki Tanaka	Engineering	On Leave	$8,700
9	9	Laura Martinez	Marketing	Active	$6,500
10	10	Michael Chen	Design	Active	$7,100

7

Hide On Desktop — Onhide_desktop = hidden-desktop

All columns # Name Department Status Salary

#	Name ⇅	Department ⇅	Status ⇅	Salary ⇅
1	John Smith	Engineering	Active	$8,400
2	Maria Garcia	Marketing	Active	$6,200
3	David Lee	Design	On Leave	$7,800
4	Priya Sharma	Engineering	Active	$9,100
5	James Walker	Sales	Inactive	$5,600
6	Amara Osei	HR	Active	$6,900
7	Carlos Rivera	Finance	Active	$7,300
8	Yuki Tanaka	Engineering	On Leave	$8,700
9	Laura Martinez	Marketing	Active	$6,500
10	Michael Chen	Design	Active	$7,100