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
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 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 columnlabel
: this is what will be rendered as the column header labelThere 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.<% column_definitions = [ { accessor: "year", label: "Year", cellAccessors: ["quarter", "month", "day"], }, { accessor: "newEnrollments", label: "New Enrollments", }, { accessor: "scheduledMeetings", label: "Scheduled Meetings", }, { accessor: "attendanceRate", label: "Attendance Rate", }, { accessor: "completedClasses", label: "Completed Classes", }, { accessor: "classCompletionRate", label: "Class Completion Rate", }, { accessor: "graduatedStudents", label: "Graduated Students", } ] %> <%= pb_rails("advanced_table", props: {table_data: @table_data, column_definitions: column_definitions}) %>
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 exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.
<% column_definitions = [ { accessor: "year", label: "Year", cellAccessors: ["quarter", "month", "day"], }, { accessor: "newEnrollments", label: "New Enrollments", }, { accessor: "scheduledMeetings", label: "Scheduled Meetings", }, { accessor: "attendanceRate", label: "Attendance Rate", }, { accessor: "completedClasses", label: "Completed Classes", }, { accessor: "classCompletionRate", label: "Class Completion Rate", }, { accessor: "graduatedStudents", label: "Graduated Students", } ] subrow_headers = ["Quarter", "Month", "Day"] %> <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %> <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %> <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %> <% end %>
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.
This example uses a custom sort method that may need to be modified or replaced within your project.
<%# Example sort method for demonstration purposes %> <% if params["sort"] %> <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %> <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %> <% @table_data.sort! do |a, b| value_a = a[sort_param] value_b = b[sort_param] value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/) value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/) sort_direction * (value_a <=> value_b) end %> <% end %> <% column_definitions = [ { accessor: "year", label: "Year", cellAccessors: ["quarter", "month", "day"], sort_menu: [ { item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" }, { item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" } ], }, { accessor: "newEnrollments", label: "New Enrollments", }, { accessor: "scheduledMeetings", label: "Scheduled Meetings", }, { accessor: "attendanceRate", label: "Attendance Rate", }, { accessor: "completedClasses", label: "Completed Classes", }, { accessor: "classCompletionRate", label: "Class Completion Rate", }, { accessor: "graduatedStudents", label: "Graduated Students", } ] subrow_headers = ["Quarter", "Month", "Day"] %> <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %> <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %> <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %> <% end %>
Props | Type | Values |
---|---|---|
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%
|
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
|
vertical_align |
array
|
baseline
super
top
middle
bottom
sub
text-top
text-bottom
|
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
|