playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023 → 13.16.0.pre.alpha.PLAY11641991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +12 -14
  3. data/app/pb_kits/playbook/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  6. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  7. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  8. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  9. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  10. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  11. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
  13. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
  14. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
  19. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  21. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  22. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  24. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  25. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
  26. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
  27. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  28. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  29. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
  30. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  31. data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
  32. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  33. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  34. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
  36. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  37. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  38. data/dist/menu.yml +1 -4
  39. data/dist/playbook-rails.js +6 -14
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +2 -28
  42. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
  43. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -59
  44. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
  45. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
  46. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
  47. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
  48. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
  49. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
  50. data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -133
  51. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
  52. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
  53. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
  54. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
  55. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
  56. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
  57. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
  58. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
  59. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
  60. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
  62. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
  63. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
  64. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -5
  65. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
  66. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
  67. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
@@ -1,51 +0,0 @@
1
- import React, { useContext } from "react"
2
- import { HeaderGroup } from "@tanstack/react-table"
3
- import AdvancedTableContext from "../Context/AdvancedTableContext"
4
- import { TableHeaderCell } from "../Components/TableHeaderCell"
5
- import { DataType } from "../Utilities/types"
6
-
7
- type TableHeaderProps = {
8
- children?: React.ReactNode | React.ReactNode[]
9
- enableSorting?: boolean
10
- headerId?: string
11
- sortIcon?: string | string[]
12
- }
13
-
14
- export const TableHeader = ({
15
- children,
16
- enableSorting = false,
17
- headerId,
18
- sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
19
- }: TableHeaderProps) => {
20
- const {
21
- enableToggleExpansion,
22
- handleExpandOrCollapse,
23
- loading,
24
- table,
25
- } = useContext(AdvancedTableContext)
26
-
27
- return (
28
- <>
29
- <thead>
30
- {/* Get the header groups (only one in this example) */}
31
- {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
32
- <tr key={`${headerGroup.id}-headerGroup`}>
33
- {headerGroup.headers.map(header => (
34
- <TableHeaderCell
35
- enableSorting={enableSorting}
36
- enableToggleExpansion={enableToggleExpansion}
37
- handleExpandOrCollapse={handleExpandOrCollapse}
38
- header={header}
39
- headerChildren={children}
40
- headerId={headerId}
41
- key={`${header.id}-header`}
42
- loading={loading}
43
- sortIcon={sortIcon}
44
- />
45
- ))}
46
- </tr>
47
- ))}
48
- </thead>
49
- </>
50
- )
51
- }
@@ -1,5 +0,0 @@
1
- //Checking browser. Using this to add classname and css for browser specific issues with table borders
2
- export const isChrome = () => {
3
- const userAgent = navigator.userAgent.toLowerCase()
4
- return userAgent.includes("chrome") && !userAgent.includes("edg")
5
- }
@@ -1,63 +0,0 @@
1
- import { RowModel } from "@tanstack/react-table"
2
- import { DataType, ExpandedStateObject } from "./types"
3
-
4
- const filterExpandableRows = (expandedState: Record<string, boolean>) => {
5
- for (const expandedRow in expandedState) {
6
- if (expandedState[expandedRow] === false) {
7
- delete expandedState[expandedRow]
8
- }
9
- }
10
- return expandedState
11
- }
12
-
13
- export const updateExpandAndCollapseState = (
14
- tableRows: RowModel<DataType>,
15
- expanded: Record<string, boolean>,
16
- targetParent: string
17
- ) => {
18
- const updateExpandedRows: Record<string, boolean> = {}
19
- const rows = tableRows.flatRows
20
- // Variable checks if all rows in a section have same expansion state or not
21
- let isExpansionConsistent = true
22
- const areRowsExpanded = new Set<boolean>()
23
-
24
- // Update isExpansionConsistent variable
25
- for (const row of rows) {
26
- if (
27
- row.getCanExpand() &&
28
- (targetParent === undefined
29
- ? row.depth === 0
30
- : targetParent === row.parentId)
31
- ) {
32
- areRowsExpanded.add(row.getIsExpanded())
33
- if (areRowsExpanded.size > 1) {
34
- isExpansionConsistent = false
35
- break
36
- }
37
- }
38
- }
39
-
40
- // The if statement runs only for row depth 0, the else statement for the rest
41
- if (targetParent === undefined) {
42
- rows.forEach(row => {
43
- if (row.depth === 0) {
44
- updateExpandedRows[row.id] = !isExpansionConsistent
45
- ? true
46
- : !row.getIsExpanded()
47
- }
48
- })
49
- } else {
50
- for (const row of rows) {
51
- if (row.getCanExpand() && targetParent === row.parentId) {
52
- updateExpandedRows[row.id] = !isExpansionConsistent
53
- ? true
54
- : !row.getIsExpanded()
55
- }
56
- }
57
- }
58
-
59
- return filterExpandableRows({
60
- ...(expanded as ExpandedStateObject),
61
- ...updateExpandedRows,
62
- })
63
- }
@@ -1,8 +0,0 @@
1
- // Logic for handling icons related props to allow for string OR array of strings
2
- export const displayIcon = (icon: string | string[]) => {
3
- if (typeof icon === "string") {
4
- return [icon, icon]
5
- }
6
- return icon
7
- }
8
-
@@ -1,8 +0,0 @@
1
- import { ExpandedState } from "@tanstack/react-table"
2
-
3
- export type ExpandedStateObject = Extract<
4
- ExpandedState,
5
- Record<string, boolean>
6
- >
7
-
8
- export type DataType = { [key: string]: any }
@@ -1,98 +0,0 @@
1
- @import "../tokens/colors";
2
- @import "../tokens/opacity";
3
- @import "../tokens/border_radius";
4
- @import "../tokens/spacing";
5
- @import "./scss_partials/loading";
6
- @import "./scss_partials/pseudo_states";
7
-
8
- .pb_advanced_table {
9
- $border-color: 1px solid $border_light !important;
10
-
11
- [id$="-span"] {
12
- word-wrap: normal;
13
- }
14
-
15
- .bg-silver {
16
- background-color: lighten($silver, $opacity_7);
17
- }
18
-
19
- .bg-white {
20
- background-color: $white;
21
- }
22
-
23
- .full-width {
24
- width: 100%;
25
- }
26
-
27
- .table-header-cells:first-child {
28
- min-width: 180px;
29
- }
30
-
31
- .table-header-cells-active:first-child {
32
- color: $primary !important;
33
- }
34
-
35
- // Icons
36
- .button-icon {
37
- display: flex;
38
- justify-content: center;
39
- align-items: center;
40
- background: none;
41
- border: none;
42
- }
43
-
44
- .gray-icon {
45
- color: $text_lt_light;
46
- @extend %primary-color-pseudo;
47
- }
48
-
49
- .year-sort-icon {
50
- @extend .button-icon;
51
- padding: 2px;
52
- }
53
-
54
- .time-period-toggle-icon {
55
- @extend .button-icon;
56
- @extend %primary-color-pseudo;
57
- padding: 2px 0;
58
-
59
- &:focus-visible {
60
- border-radius: $border_rad_lighter;
61
- }
62
- }
63
-
64
- .expand-toggle-icon {
65
- @extend .button-icon;
66
- @extend %primary-color-pseudo;
67
- position: relative;
68
- bottom: 1px;
69
- width: 18px;
70
- height: 18px;
71
- border-radius: 50%;
72
- }
73
-
74
- .header-sort-button {
75
- @extend %primary-color-pseudo;
76
- width: 100%;
77
-
78
- &:focus-visible {
79
- border-radius: $border_rad_heavier;
80
- }
81
- }
82
-
83
- // Vertical separator
84
- .table-header-cells:first-child,
85
- td:first-child {
86
- box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
87
- }
88
-
89
- .chrome-styles:first-child {
90
- border-right: $border-color;
91
- }
92
-
93
- .table-card {
94
- .chrome-styles:first-child {
95
- border-right: $transparent !important;
96
- }
97
- }
98
- }
@@ -1,245 +0,0 @@
1
- import React, { useState, useEffect, useCallback } from "react";
2
- import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
- import { globalProps, GlobalProps } from "../utilities/globalProps";
5
- import Table from "../pb_table/_table";
6
- import {
7
- createColumnHelper,
8
- getCoreRowModel,
9
- getExpandedRowModel,
10
- getSortedRowModel,
11
- Row,
12
- useReactTable,
13
- Getter,
14
- } from "@tanstack/react-table";
15
-
16
- import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers";
17
-
18
- import { CustomCell } from "./Components/CustomCell";
19
- import AdvancedTableContext from "./Context/AdvancedTableContext";
20
- import { TableHeader } from "./SubKits/TableHeader";
21
- import { TableBody } from "./SubKits/TableBody";
22
-
23
- import { DataType, ExpandedStateObject } from "./Utilities/types";
24
-
25
- type AdvancedTableProps = {
26
- aria?: { [key: string]: string };
27
- children?: React.ReactNode | React.ReactNode[];
28
- className?: string;
29
- columnDefinitions: DataType[];
30
- data?: { [key: string]: string };
31
- enableToggleExpansion?: "all" | "header";
32
- expandedControl?: DataType;
33
- id?: string;
34
- initialLoadingRowsCount?: number;
35
- loading?: boolean | string;
36
- onRowToggleClick?: (arg: Row<DataType>) => void;
37
- onToggleExpansionClick?: (arg: Row<DataType>) => void;
38
- sortControl?: DataType;
39
- tableData: DataType[];
40
- tableOptions?: DataType;
41
- tableProps?: DataType;
42
- toggleExpansionIcon?: string | string[];
43
- } & GlobalProps;
44
-
45
- const AdvancedTable = (props: AdvancedTableProps) => {
46
- const {
47
- aria = {},
48
- children,
49
- className,
50
- columnDefinitions,
51
- data = {},
52
- enableToggleExpansion = "header",
53
- expandedControl,
54
- id,
55
- initialLoadingRowsCount = 10,
56
- loading,
57
- onRowToggleClick,
58
- onToggleExpansionClick,
59
- sortControl,
60
- tableData,
61
- tableOptions,
62
- tableProps,
63
- toggleExpansionIcon = "arrows-from-line",
64
- } = props;
65
-
66
- const [loadingStateRowCount, setLoadingStateRowCount] = useState(
67
- initialLoadingRowsCount
68
- );
69
-
70
- // Create a local state for expanded and setExpanded if expandedControl not used
71
- const [localExpanded, setLocalExpanded] = useState({});
72
-
73
- // Determine whether to use the prop or the local state
74
- const expanded = expandedControl ? expandedControl.value : localExpanded;
75
- const setExpanded = expandedControl
76
- ? expandedControl.onChange
77
- : setLocalExpanded;
78
-
79
- const columnHelper = createColumnHelper<DataType>();
80
-
81
- //Create cells for first columns
82
- const createCellFunction = (cellAccessors: string[]) => {
83
- const columnCells = ({
84
- row,
85
- getValue,
86
- }: {
87
- row: Row<DataType>;
88
- getValue: Getter<string>;
89
- }) => {
90
- const rowData = row.original;
91
-
92
- switch (row.depth) {
93
- case 0: {
94
- return (
95
- <CustomCell
96
- getValue={getValue}
97
- onRowToggleClick={onRowToggleClick}
98
- row={row}
99
- />
100
- );
101
- }
102
- default: {
103
- // Handle other depths based on cellAccessors
104
- const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
105
- const accessorValue = rowData[depthAccessor];
106
- return accessorValue ? (
107
- <CustomCell row={row}
108
- value={accessorValue}
109
- />
110
- ) : (
111
- "N/A"
112
- );
113
- }
114
- }
115
- };
116
-
117
- return columnCells;
118
- };
119
-
120
- //Create column array in format needed by Tanstack
121
- const columns =
122
- columnDefinitions &&
123
- columnDefinitions.map((column) => {
124
- // Define the base column structure
125
- const columnStructure = {
126
- ...columnHelper.accessor(column.accessor, {
127
- header: column.label,
128
- }),
129
- };
130
- if (column.cellAccessors) {
131
- columnStructure.cell = createCellFunction(column.cellAccessors);
132
- }
133
- return columnStructure;
134
- });
135
-
136
- //Syntax for sorting Array if we want to manage state ourselves
137
- const sorting = [
138
- {
139
- id: columnDefinitions[0].accessor,
140
- desc:
141
- sortControl && sortControl.value !== null
142
- ? !sortControl.value.desc
143
- : false,
144
- },
145
- ];
146
-
147
- const expandAndSortState = () => {
148
- if (sortControl) {
149
- return { state: { expanded, sorting } };
150
- } else {
151
- return { state: { expanded } };
152
- }
153
- };
154
-
155
- //initialize table
156
- const table = useReactTable({
157
- data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
158
- columns,
159
- onExpandedChange: setExpanded,
160
- getSubRows: (row) => row.children,
161
- getCoreRowModel: getCoreRowModel(),
162
- getExpandedRowModel: getExpandedRowModel(),
163
- getSortedRowModel: getSortedRowModel(),
164
- enableSortingRemoval: false,
165
- ...expandAndSortState(),
166
- ...tableOptions,
167
- });
168
-
169
- const tableRows = table.getRowModel();
170
-
171
- // Set table row count for loading state
172
- const updateLoadingStateRowCount = useCallback(() => {
173
- const rowsCount = table.getRowModel().rows.length;
174
- if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
175
- setLoadingStateRowCount(rowsCount);
176
- }
177
- }, [tableData, loadingStateRowCount]);
178
-
179
- useEffect(() => {
180
- if (!loading) {
181
- updateLoadingStateRowCount();
182
- }
183
- }, [loading, updateLoadingStateRowCount]);
184
-
185
- const handleExpandOrCollapse = (row: Row<DataType>) => {
186
- onToggleExpansionClick && onToggleExpansionClick(row);
187
-
188
- const expandedState = expanded as ExpandedStateObject;
189
- const targetParent = row?.parentId;
190
- return setExpanded(
191
- updateExpandAndCollapseState(tableRows, expandedState, targetParent)
192
- );
193
- };
194
-
195
- const ariaProps = buildAriaProps(aria);
196
- const dataProps = buildDataProps(data);
197
- const classes = classnames(
198
- buildCss("pb_advanced_table"),
199
- globalProps(props),
200
- className
201
- );
202
-
203
- return (
204
- <div {...ariaProps}
205
- {...dataProps}
206
- className={classes}
207
- id={id}
208
- >
209
- <AdvancedTableContext.Provider
210
- value={{
211
- table,
212
- handleExpandOrCollapse,
213
- loading,
214
- enableToggleExpansion,
215
- toggleExpansionIcon,
216
- setExpanded,
217
- expanded,
218
- sortControl,
219
- }}
220
- >
221
- <Table
222
- className={`${loading ? "content-loading" : ""}`}
223
- dataTable
224
- numberSpacing="tabular"
225
- responsive="none"
226
- {...tableProps}
227
- >
228
- {children ? (
229
- children
230
- ) : (
231
- <>
232
- <TableHeader />
233
- <TableBody />
234
- </>
235
- )}
236
- </Table>
237
- </AdvancedTableContext.Provider>
238
- </div>
239
- );
240
- };
241
-
242
- AdvancedTable.Header = TableHeader;
243
- AdvancedTable.Body = TableBody;
244
-
245
- export default AdvancedTable;
@@ -1,56 +0,0 @@
1
- import React from "react";
2
- import { render, screen } from "../utilities/test-utils";
3
-
4
- import { AdvancedTable } from "../";
5
-
6
- const MOCK_DATA = [
7
- {
8
- year: "2021",
9
- quarter: null,
10
- month: null,
11
- day: null,
12
- newEnrollments: "20",
13
- scheduledMeetings: "10",
14
- children: [
15
- {
16
- year: "2011",
17
- quarter: "Q1",
18
- month: null,
19
- day: null,
20
- newEnrollments: "2",
21
- scheduledMeetings: "35",
22
- },
23
- ],
24
- },
25
- ];
26
-
27
- const columnDefinitions = [
28
- {
29
- accessor: "year",
30
- label: "Year",
31
- cellAccessors: ["quarter", "month", "day"],
32
- },
33
- {
34
- accessor: "newEnrollments",
35
- label: "New Enrollments",
36
- },
37
- {
38
- accessor: "scheduledMeetings",
39
- label: "Scheduled Meetings",
40
- },
41
- ];
42
-
43
- const testId = "advanced_table";
44
-
45
- test("generated scaffold test", () => {
46
- render(
47
- <AdvancedTable
48
- columnDefinitions={columnDefinitions}
49
- data={{ testid: testId }}
50
- tableData={MOCK_DATA}
51
- />
52
- );
53
-
54
- const kit = screen.getByTestId(testId);
55
- expect(kit).toBeInTheDocument();
56
- });
@@ -1,49 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableDefault = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- return (
39
- <div>
40
- <AdvancedTable
41
- columnDefinitions={columnDefinitions}
42
- tableData={MOCK_DATA}
43
- {...props}
44
- />
45
- </div>
46
- );
47
- };
48
-
49
- export default AdvancedTableDefault;
@@ -1,13 +0,0 @@
1
- The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props:
2
-
3
- `tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/1b2481c06137d2bc63031a1120c1bd4d01bfd9ec/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
4
-
5
-
6
- `columnDefinitions` maps to the columns prop on the Tanstack table. 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. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
7
-
8
- - `accessor`: this is the key from your data for the value you want rendered in that column
9
- - `label`: this is what will be rendered as the column header label
10
-
11
- There is also one optional item that is only required if the table has nested data:
12
-
13
- - `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.
@@ -1 +0,0 @@
1
- The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.