Advanced Table




Advanced Table

Default (Required Props)

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 AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, the kit has three required props:

id

A unique id is required to allow the table functionality to work properly. Without it, certain functions like the action bar, expand/collapse caching, or selectable rows will not be able to properly reference the correct table.

You must also set table_id when using subcomponents like table_header or table_body.

table_data

table_data accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row.

For a visual of the data structure needed for table_data, see here.

column_definitions

Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. column_definitions in the AdvancedTable kit is an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:

  • accessor: this is the key from your data for the value you want rendered in that column
  • label: this is what will be rendered as the column header label

There is also one optional item that is only required if the table has nested data:

  • cellAccessors: This is an array of strings that represent keys from your data object. This is only required for the first column in case of nested data. If you have nested data, the AdvancedTable needs to know what to render in that first column for nested items. This array represents the nested data in the order you want it rendered.
Loading State

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 optional loading prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.

SubRow Headers

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

subrow_headers is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.

enable_toggle_expansion is an additional optional prop that can be used in conjunction with the subRowHeaders prop. enable_toggle_expansion is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.

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.

Table Props

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

This kit uses the Table kit under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional table_props prop. This prop must be an object that contains valid Table props. For a full list of Table props, see here.

This doc example showcases the use of two table props, including how to render the vertical borders between columns.

Sticky Header

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 table_props prop can also be used to render a sticky header for the Advanced Table.

This doc example showcases how to set a sticky header for a nonresponsive table (see the responsive prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.

Sticky Header for Responsive Table

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

Create a sticky header that works for responsive Advanced Tables by setting sticky: true via table_props and giving the AdvancedTable a max_height using our Max Height global prop.

NOTE: This behavior requires a max_height to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.

Expand the table above to see this in action.

A sticky header on a nonresponsive table is demonstrated in the "Sticky Header" doc example above.

Pinned Rows

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
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
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
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

Use the pinned_rows prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.

NOTE:

  • Sticky header required: Pinned rows must be used with sticky: true via table_props (works with both responsive and non-responsive tables)
  • Row ids required: 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.
  • pinned_rows takes a hash with a top key containing an array of row ids, as shown in the code snippet below.
  • For expandable rows, use the parent id in pinned_rows[:top]; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
Enable Sorting

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

Optionally enable sorting by passing sort_menu to any column_definition(s). Sort options are determined by an array of item objects passed to the sort_menu prop.


Disclaimer

This example uses a custom sort method that may need to be modified or replaced within your project.

Responsive Tables

Not Responsive

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

Responsive as Default

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 responsive prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set responsive="none".

Custom Components for Cells

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students

2021

Low
20
10
51%
19
3
33%
19

Q1

Low
2
35
32%
36
15
52%
36

January

Low
16
20
11%
28
13
47%
28

10

High
34
28
97%
17
20
15%
17

20

High
43
23
66%
9
26
47%
9

February

Low
20
41
95%
43
26
83%
43

15

Low
19
35
69%
23
8
75%
23

2022

High
25
17
75%
32
5
45%
32

Q1

Low
2
35
32%
36
15
52%
36

January

Low
16
20
11%
28
13
47%
28

15

High
34
28
97%
17
20
15%
17

25

High
43
23
66%
9
26
47%
9

May

Low
20
41
95%
43
26
83%
43

2

Low
19
35
69%
23
8
75%
23

2023

Low
10
15
65%
29
4
49%
29

Q1

Low
2
35
32%
36
15
52%
36

March

Low
16
20
11%
28
13
47%
28

10

High
34
28
97%
17
20
15%
17

11

High
43
23
66%
9
26
47%
9

April

Low
20
41
95%
43
26
83%
43

15

Low
19
35
69%
23
8
75%
23

The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional custom_renderer item within each column_definitions. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire row object. The row object provides all data for the current row.

See here for more indepth information on column_definitions are how to use them.

See here for the structure of the table_data used.

Custom Header Cell

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 optional header item can be used within column_definitions to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.

Custom Header 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

The optional header item within column_definitions can also be used with multi headers as seen here.

Multi-Header Columns

Enrollment Data
Performance Data
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

Use a nested columns array in your columnDefinitions to create multiple header rows. Any column with columns is treated as a grouped header, and its child columns are displayed beneath it.

Multi-Header Columns (Multiple Levels)

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

Multiple levels of column headers can also be rendered as seen here.

Multi-Header Columns with Vertical Borders

Enrollment Data
Performance Data
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

Table with No Subrows or Expansion

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
2022
25
17
75%
5
45%
32
2023
10
15
65%
4
49%
29
2024
15
34
32%
6
67%
65

Selectable Rows

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

selectable_rows is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows.

When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well.

The data attribute data-selected-rows on the parent pb_advanced_table div will update dynamically with each selection to show an array of ids corresponding to the current selection.

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.

Selectable Rows (No Subrows)

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
2022
25
17
75%
5
45%
32
2023
10
15
65%
4
49%
29
2024
15
34
32%
6
67%
65

selectable_rows can also be used with tables without nested row data. Set enable_toggle_expansion: none to adjust the Advanced Table styling to fit a table without subrows.

The data attribute data-selected-rows on the parent pb_advanced_table div will update dynamically with each selection to show an array of ids corresponding to the current selection.

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.

Selectable Rows (With Actions)

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
2022
25
17
75%
5
45%
32
2023
10
15
65%
4
49%
29
2024
15
34
32%
6
67%
65

Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to actions will be rendered on the right of the actionsBar.

You can utilize script tags with your actions to provide your buttons with any clickable events needed.

Selectable Rows (No Actions Bar)

Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
2022
25
17
75%
5
45%
32
2023
10
15
65%
4
49%
29
2024
15
34
32%
6
67%
65

show_actions_bar is an optional prop that renders the header at the top showing the row count. This is set to true by default but can be toggled off by setting it to false

Advanced Table Scrollbar None

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

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.

Inline Row Loading

Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)
Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Loading
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
Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered
Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Loading
2022
25
17
75%
5
45%
32
Loading
2023
10
15
65%
4
49%
29
Loading
Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered
Year
New Enrollments
Scheduled Meetings
Attendance Rate
Completed Classes
Class Completion Rate
Graduated Students
2021
20
10
51%
3
33%
19
Loading
2022
25
17
75%
5
45%
32
Loading
2023
10
15
65%
4
49%
29
Loading

inline_row_loading

By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the inline_row_loading prop.

When inline_row_loading is set to true:

  • Expansion controls are rendered for rows with empty children arrays (you must pass children: [] to any row that will have children loaded later)
  • When such a row is expanded, an inline loading indicator appears until the child data is loaded
  • This enables lazy-loading patterns without one-off hacks

In the first table above, row "2021" has an empty children array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.

This prop is set to false by default.

persist_toggle_expansion_button

The persist_toggle_expansion_button is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty children arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.

In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without persist_toggle_expansion_button in place. The third Advanced Table shows the toggle all button due to persist_toggle_expansion_button.

This prop is set to false by default and should only be used in conjunction with inline_row_loading.

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