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

BETA VERSION
This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.





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 two required props:

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.


Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
xxl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

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

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

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

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

classname

string

dark

boolean

id

string

data

hashprop

aria

hashprop

html_options

hashprop

children

proc
Props Type Values Default

table_data

array

column_definitions

array

enable_toggle_expansion

enum
all
header
none
header