Advanced Table

Styling

Summary
Uses Icons
Javascript Enhanced
Collapsible Trail

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

collapsible_trail is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

Row Styling

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

The row_styling prop can be used in conjunction with row ids to control certain styling options on individual rows. It is an object that has several optional key/value pairs, this doc example highlights the following:

  • background_color : use this to control the background color of the row
  • font_color: use this to control font color for each row if needed, for example if using a darker background color.
  • expand_button_color: use this to control the color of the expand icon if needed, for example if using a darker background color.

NOTE: Each object within the table_data Array must contain a unique id in order to attach an id to all Rows for this to function.

Padding Control using Row Styling

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

row_styling can also be used to control padding on all cells in a given row via the use of the cell_padding key/value pair as shown here. cell_padding lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

Column Styling

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

The column_styling prop is an optional item that can be used within column_definitions as shown in the code snippet below. It is an object that has several optional key/value pairs, this doc example highlights the following:

1) header_alignment: This will allow you to control alignment of header content which is set to right aligned by default. you can set this to left, right or center.

2) cell_alignment: This will allow you to control alignment of content within all cells in the given column. This is set to right aligned by default. you can set this to left, right or center.

3) font_color: This will allow you to control the font color for a given column.

column_styling can be used within the column_definition of all the columns or some of them, as shown. Each column has its own individual control in this way.

Column Styling with Multiple Headers

Enrollment Data
Performance Data
Enrollment Stats
Completion Metrics
Attendance
Year
New Enrollments
Scheduled Meetings
Completed Classes
Class Completion Rate
Attendance Rate
Scheduled Meetings
2021
20
10
3
33%
51%
10
Q1
2
35
15
52%
32%
35
January
16
20
13
47%
11%
20
10
34
28
20
15%
97%
28
20
43
23
26
47%
66%
23
February
20
41
26
83%
95%
41
15
19
35
8
75%
69%
35
2022
25
17
5
45%
75%
17
Q1
2
35
15
52%
32%
35
January
16
20
13
47%
11%
20
15
34
28
20
15%
97%
28
25
43
23
26
47%
66%
23
May
20
41
26
83%
95%
41
2
19
35
8
75%
69%
35
2023
10
15
4
49%
65%
15
Q1
2
35
15
52%
32%
35
March
16
20
13
47%
11%
20
10
34
28
20
15%
97%
28
11
43
23
26
47%
66%
23
April
20
41
26
83%
95%
41
15
19
35
8
75%
69%
35

column_styling can also be used with the multi column logic. When used in this way, column_styling must be used within the leaf column's column_definition as shown.

Padding Control using Column Styling

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

column_styling can also be used to control padding on all cells in a given column via the use of the cell_padding key/value pair. cell_padding lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

Column Styling Background Color

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

column_styling can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:

1) cell_background_color: use this to control the background color of all cells in the given column
2) font_color: use this to control font color for all cells in the given column if needed, for example if using a darker background color
3) header_background_color: use this to control the background color of the column header
4) header_font_color: use this to control font color for the header in the given column if needed, for example if using a darker background color.

Column Styling Individual Cell Background Color

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
20
43
23
66%
26
47%
9
February
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23
2022
25
17
75%
5
45%
32
Q1
2
35
32%
15
52%
36
January
16
20
11%
13
47%
28
15
34
28
97%
20
15%
17
25
43
23
66%
26
47%
9
May
20
41
95%
26
83%
43
2
19
35
69%
8
75%
23
2023
10
15
65%
4
49%
29
Q1
2
35
32%
15
52%
36
March
16
20
11%
13
47%
28
10
34
28
97%
20
15%
17
11
43
23
66%
26
47%
9
April
20
41
95%
26
83%
43
15
19
35
69%
8
75%
23

column_styling can also be used to control the background color on individual cells in a given column as shown here.

Column Group Border Color

Enrollment Data
Performance Data
Enrollment Stats
Completion Metrics
Attendance
Year
New Enrollments
Scheduled Meetings
Completed Classes
Class Completion Rate
Attendance Rate
Scheduled Meetings
2021
20
10
3
33%
51%
10
Q1
2
35
15
52%
32%
35
January
16
20
13
47%
11%
20
10
34
28
20
15%
97%
28
20
43
23
26
47%
66%
23
February
20
41
26
83%
95%
41
15
19
35
8
75%
69%
35
2022
25
17
5
45%
75%
17
Q1
2
35
15
52%
32%
35
January
16
20
13
47%
11%
20
15
34
28
20
15%
97%
28
25
43
23
26
47%
66%
23
May
20
41
26
83%
95%
41
2
19
35
8
75%
69%
35
2023
10
15
4
49%
65%
15
Q1
2
35
15
52%
32%
35
March
16
20
13
47%
11%
20
10
34
28
20
15%
97%
28
11
43
23
26
47%
66%
23
April
20
41
26
83%
95%
41
15
19
35
8
75%
69%
35

The borders of column groups can be set to a different color using the column_group_border_color prop. In order for these borders to be visible, this prop must be used with table_props and vertical_border set to true.

The available colors for the border are Playbook's Text Colors, which can be found here.



Available Props

Props Type Values

gap
array
none
xxs
xs
sm
md
lg
xl

max_width
array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

min_width
array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

width
array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

z_index
array
1
2
3
4
5
6
7
8
9
10
max

number_spacing
array
tabular

shadow
array
none
deep
deeper
deepest

line_height
array
tightest
tighter
tight
normal
loose
looser
loosest

display
array
block
inline_block
inline
flex
inline_flex
none
grid

cursor
array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction
array
row
column
rowReverse
columnReverse

flex_wrap
array
wrap
nowrap
wrapReverse

justify_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self
array
auto
start
end
center
stretch

align_items
array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content
array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self
array
auto
start
end
center
stretch
baseline

flex
array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow
array
1
0

flex_shrink
array
1
0

order
array
1
2
3
4
5
6
7
8
9
10
11
12

position
array
relative
absolute
fixed
sticky

hover
array

border_radius
array
none
xs
sm
md
lg
xl
rounded

text_align
array
start
end
left
right
center
justify
justify-all
match-parent

overflow
array
visible
hidden
scroll
auto

truncate
array
1
2
3
4
5

left
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom
array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

vertical_align
array
baseline
super
top
middle
bottom
sub
text-top
text-bottom

height
array
auto
xs
sm
md
lg
xl
xxl
xxxl

min_height
array
auto
xs
sm
md
lg
xl
xxl
xxxl

overflow_x
array
visible
hidden
scroll
auto

overflow_y
array
visible
hidden
scroll
auto

classname
string

dark
boolean

column_gap
string

row_gap
string

margin
array
none
xxs
xs
sm
md
lg
xl

margin_bottom
array
none
xxs
xs
sm
md
lg
xl

margin_left
array
none
xxs
xs
sm
md
lg
xl

margin_right
array
none
xxs
xs
sm
md
lg
xl

margin_top
array
none
xxs
xs
sm
md
lg
xl

margin_x
array
none
xxs
xs
sm
md
lg
xl

margin_y
array
none
xxs
xs
sm
md
lg
xl

padding
array
none
xxs
xs
sm
md
lg
xl

padding_bottom
array
none
xxs
xs
sm
md
lg
xl

padding_left
array
none
xxs
xs
sm
md
lg
xl

padding_right
array
none
xxs
xs
sm
md
lg
xl

padding_top
array
none
xxs
xs
sm
md
lg
xl

padding_x
array
none
xxs
xs
sm
md
lg
xl

padding_y
array
none
xxs
xs
sm
md
lg
xl

group_hover
boolean

id
string

data
hashprop

aria
hashprop

html_options
hashprop

children
proc

style
hashprop
Props Type Values Default

max_height
enum
auto
xs
sm
md
lg
xl
xxl
xxxl
auto

table_data
array

column_definitions
array

column_group_border_color
enum
text_lt_default
text_lt_light
text_lt_lighter
text_dk_default
text_dk_light
text_dk_lighter
none
none

enable_toggle_expansion
enum
all
header
none
header

loading
boolean
false

responsive
enum
none
scroll
scroll

table_props
hashprop

selectable_rows
boolean
false

show_actions_bar
boolean
true

actions
array

scroll_bar_none
boolean
false

row_styling
array

inline_row_loading
boolean
false

persist_toggle_expansion_button
boolean
false

pinned_rows
hashprop

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.
Contribute on GitHub
Power Logo
As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power
Open Positions
About Power

Connect

Github
Connect Chat
© 2026-27, ALL RIGHTS RESERVED