playbook_ui 13.18.0 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +9 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +17 -11
  6. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +29 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +18 -4
  8. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -4
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +84 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +6 -1
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +3 -1
  24. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +3 -1
  25. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -2
  26. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  32. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -1
  33. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +4 -0
  34. data/app/pb_kits/playbook/pb_form_group/form_group.rb +5 -1
  35. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +46 -0
  37. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  40. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  41. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  42. data/app/pb_kits/playbook/pb_table/styles/_div_support.scss +22 -0
  43. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  44. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  45. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  46. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  47. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  48. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  49. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  50. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  51. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  52. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +6 -6
  53. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  54. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  55. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  56. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  57. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  58. data/app/pb_kits/playbook/pb_table/table.html.erb +14 -2
  59. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  60. data/dist/menu.yml +1 -1
  61. data/dist/playbook-rails.js +3 -3
  62. data/lib/playbook/version.rb +2 -2
  63. metadata +18 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f629448a4cd0208c365ff8cd0c7c18a3fb911bdc118497843b76279f9309b7c9
4
- data.tar.gz: 466dd0df9bd42b611106524156fc473ad518fbe78ae1bb586a3e8715317586f3
3
+ metadata.gz: a73601703c905cb01092a7d850385c15520882f090cc1708efcab0b0224df4ee
4
+ data.tar.gz: 5277c579fec4b9464b461e16ab568501caacdcf865bac3f4f2ae78dd3ae5d395
5
5
  SHA512:
6
- metadata.gz: 5f1d56aa0e2398edd4c6f97ea258e7d2f4d71f11b18a5410c82a9a142c4a3324ec0dd71dca84c7554dc0a7aee273e6e56c936c80351a241ce49157ef76806e36
7
- data.tar.gz: 216199bebe300338129cda84ff8c4d0765231c1aecfa2bbfec3f008012ee39e019aac578b88926d06f5e7823d593f177ba699b4ae43091a6648cf1b77c4d24b0
6
+ metadata.gz: 76c033c78404a767f48b6ac6ec2d1e370bb5ad14ad7c19f326366a6c298470db581f4c9eddf0f27158e6cb1ee6857ec5505a297f0a36c309cb333aee3457640c
7
+ data.tar.gz: 846e857b5a3f98b0695a10482590579a9552c67ebc22c9a6804db22d8ffc95dff6abd0beba8abd3d8baabef068ca92b21c687cc86754990cf44d31f1576ccc8c
@@ -39,4 +39,4 @@ body {
39
39
  a {
40
40
  text-decoration: none;
41
41
  color: $primary;
42
- }
42
+ }
@@ -22,13 +22,14 @@ export const CustomCell = ({
22
22
  row,
23
23
  value,
24
24
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded } = useContext(AdvancedTableContext);
26
- const RowWithoutChildren = row.originalSubRows === undefined;
25
+ const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
27
26
 
28
27
  const handleOnExpand = (row: Row<DataType>) => {
29
28
  onRowToggleClick && onRowToggleClick(row);
30
29
  setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
31
30
  };
31
+ const RowHasChildren = row.original.children ? true : false
32
+ const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
32
33
 
33
34
  return (
34
35
  <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -36,7 +37,7 @@ export const CustomCell = ({
36
37
  columnGap="xs"
37
38
  orientation="row"
38
39
  >
39
- {!RowWithoutChildren ? (
40
+ {renderButton ? (
40
41
  <button
41
42
  className="gray-icon expand-toggle-icon"
42
43
  onClick={() => handleOnExpand(row)}
@@ -53,7 +54,7 @@ export const CustomCell = ({
53
54
  )}
54
55
  </button>
55
56
  ) : null}
56
- <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
57
+ <FlexItem paddingLeft={renderButton? "none" : "xs"}>
57
58
  {row.depth === 0 ? getValue() : value}
58
59
  </FlexItem>
59
60
  </Flex>
@@ -1,8 +1,9 @@
1
- import React from "react"
1
+ import React, { useContext } from "react"
2
2
  import Flex from "../../pb_flex/_flex"
3
3
  import Caption from "../../pb_caption/_caption"
4
4
  import { Row, Table } from "@tanstack/react-table"
5
5
 
6
+ import AdvancedTableContext from "../Context/AdvancedTableContext";
6
7
  import { ToggleIconButton } from "./ToggleIconButton"
7
8
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
8
9
 
@@ -12,7 +13,7 @@ import { GlobalProps } from "../../utilities/globalProps"
12
13
 
13
14
  interface SubRowHeaderRowProps {
14
15
  collapsibleTrail?: boolean
15
- enableToggleExpansion?: "all" | "header"
16
+ enableToggleExpansion?: "all" | "header" | "none"
16
17
  onClick: (row: Row<DataType>) => void
17
18
  row: Row<DataType>
18
19
  subRowHeaders?: string[]
@@ -27,7 +28,11 @@ export const SubRowHeaderRow = ({
27
28
  subRowHeaders,
28
29
  table,
29
30
  }: SubRowHeaderRowProps & GlobalProps) => {
31
+ const { inlineRowLoading } = useContext(AdvancedTableContext);
32
+
30
33
  const numberOfColumns = table.getAllFlatColumns().length
34
+ const rowHasChildren = row.original.children ? true : false
35
+ const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
31
36
 
32
37
  return (
33
38
  <tr className="custom-row bg-silver">
@@ -42,13 +47,13 @@ export const SubRowHeaderRow = ({
42
47
  <Flex align="center"
43
48
  columnGap="xs"
44
49
  >
45
- {enableToggleExpansion === "all" && row.getCanExpand() ? (
50
+ {enableToggleExpansion === "all" && canExpand ? (
46
51
  <ToggleIconButton onClick={onClick}
47
52
  row={row}
48
53
  />
49
54
  ) : null}
50
55
  <Caption
51
- marginLeft={row.getCanExpand() ? "none" : "xs"}
56
+ marginLeft={canExpand ? "none" : "xs"}
52
57
  text={subRowHeaders[row.depth - 1]}
53
58
  />
54
59
  </Flex>
@@ -12,11 +12,10 @@ import { GlobalProps } from "../../utilities/globalProps"
12
12
 
13
13
  type TableHeaderCellProps = {
14
14
  enableSorting?: boolean
15
- enableToggleExpansion?: "all" | "header"
15
+ enableToggleExpansion?: "all" | "header" | "none"
16
16
  handleExpandOrCollapse?: () => void
17
17
  header?: Header<DataType, unknown>
18
18
  headerChildren?: React.ReactNode | React.ReactNode[]
19
- headerId?: string
20
19
  loading?: boolean
21
20
  sortIcon?: string | string[]
22
21
  } & GlobalProps
@@ -27,7 +26,6 @@ export const TableHeaderCell = ({
27
26
  handleExpandOrCollapse,
28
27
  header,
29
28
  headerChildren,
30
- headerId,
31
29
  loading,
32
30
  sortIcon,
33
31
  }: TableHeaderCellProps) => {
@@ -50,10 +48,22 @@ const cellClassName = classnames("table-header-cells",
50
48
  );
51
49
 
52
50
  const cellId = `${loading ?
53
- `loading-${header.id}${headerId ? `-${headerId}` : ""}`
54
- : `${header.id}${headerId ? `-${headerId}` : ""}`
51
+ `loading-${header.id}`
52
+ : `${header.id}`
55
53
  }`;
56
54
 
55
+ const isToggleExpansionEnabledLoading =
56
+ header.index === 0 &&
57
+ loading &&
58
+ (enableToggleExpansion === "all" || "header") &&
59
+ enableToggleExpansion !== "none";
60
+
61
+ const isToggleExpansionEnabled =
62
+ header.index === 0 &&
63
+ !loading &&
64
+ (enableToggleExpansion === "all" || "header") &&
65
+ enableToggleExpansion !== "none";
66
+
57
67
  return (
58
68
  <th
59
69
  align="right"
@@ -73,15 +83,11 @@ const cellId = `${loading ?
73
83
  alignItems="center"
74
84
  justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
75
85
  >
76
- {header.index === 0 &&
77
- !loading &&
78
- (enableToggleExpansion === "all" || "header") && (
86
+ {isToggleExpansionEnabled && (
79
87
  <ToggleIconButton onClick={handleExpandOrCollapse} />
80
88
  )}
81
89
 
82
- {header.index === 0 &&
83
- loading &&
84
- (enableToggleExpansion === "all" || "header") && (
90
+ {isToggleExpansionEnabledLoading &&(
85
91
  <div className="loading-toggle-icon header-toggle-icon" />
86
92
  )}
87
93
 
@@ -1,4 +1,7 @@
1
1
  import React, { useContext } from "react"
2
+ import classnames from "classnames";
3
+ import { buildCss } from "../../utilities/props";
4
+ import { globalProps } from "../../utilities/globalProps";
2
5
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
3
6
  import { flexRender, Row } from "@tanstack/react-table"
4
7
 
@@ -10,28 +13,47 @@ import { isChrome } from "../Utilities/BrowserCheck"
10
13
  import { DataType } from "../Utilities/types"
11
14
 
12
15
  type TableBodyProps = {
16
+ className?: string;
13
17
  collapsibleTrail?: boolean
18
+ id?: string;
14
19
  subRowHeaders?: string[]
15
20
  }
16
21
 
17
22
  export const TableBody = ({
23
+ className,
18
24
  collapsibleTrail = true,
25
+ id,
19
26
  subRowHeaders,
27
+ ...props
20
28
  }: TableBodyProps) => {
29
+
21
30
  const {
31
+ columnDefinitions,
22
32
  enableToggleExpansion,
23
33
  handleExpandOrCollapse,
34
+ inlineRowLoading,
24
35
  loading,
25
36
  table,
26
37
  } = useContext(AdvancedTableContext)
38
+
39
+ const classes = classnames(
40
+ buildCss("pb_advanced_table_body"),
41
+ globalProps(props),
42
+ className
43
+ );
44
+
27
45
  return (
28
46
  <>
29
- <tbody>
47
+ <tbody className={classes}
48
+ id={id}
49
+ >
30
50
  {table.getRowModel().rows.map((row: Row<DataType>) => {
31
51
  const isExpandable = row.getIsExpanded()
32
52
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
33
- const rowHasNoChildren = !row.original.children?.length
53
+ const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
34
54
  const numberOfColumns = table.getAllFlatColumns().length
55
+ const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
56
+ const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren))
35
57
 
36
58
  return (
37
59
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -47,7 +69,7 @@ export const TableBody = ({
47
69
  )}
48
70
 
49
71
  <tr
50
- className={`${isExpandable ? "bg-silver" : "bg-white"} ${
72
+ className={`${rowBackground ? "bg-silver" : "bg-white"} ${
51
73
  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
52
74
  }`}
53
75
  id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -79,9 +101,11 @@ export const TableBody = ({
79
101
  </tr>
80
102
 
81
103
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
82
- {isExpandable && rowHasNoChildren && row.depth === 0 ? (
104
+ {isDataLoading ? (
83
105
  <tr key={`${row.id}-row`}>
84
- <td colSpan={numberOfColumns}>
106
+ <td colSpan={numberOfColumns}
107
+ style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
108
+ >
85
109
  <LoadingInline />
86
110
  </td>
87
111
  </tr>
@@ -1,4 +1,7 @@
1
1
  import React, { useContext } from "react"
2
+ import classnames from "classnames";
3
+ import { buildCss } from "../../utilities/props";
4
+ import { globalProps } from "../../utilities/globalProps";
2
5
  import { HeaderGroup } from "@tanstack/react-table"
3
6
  import AdvancedTableContext from "../Context/AdvancedTableContext"
4
7
  import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -6,16 +9,19 @@ import { DataType } from "../Utilities/types"
6
9
 
7
10
  type TableHeaderProps = {
8
11
  children?: React.ReactNode | React.ReactNode[]
12
+ className?: string
9
13
  enableSorting?: boolean
10
- headerId?: string
14
+ id?: string;
11
15
  sortIcon?: string | string[]
12
16
  }
13
17
 
14
18
  export const TableHeader = ({
15
19
  children,
20
+ className,
16
21
  enableSorting = false,
17
- headerId,
22
+ id,
18
23
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
24
+ ...props
19
25
  }: TableHeaderProps) => {
20
26
  const {
21
27
  enableToggleExpansion,
@@ -24,9 +30,18 @@ export const TableHeader = ({
24
30
  table,
25
31
  } = useContext(AdvancedTableContext)
26
32
 
33
+ const classes = classnames(
34
+ buildCss("pb_advanced_table_header"),
35
+ globalProps(props),
36
+ className
37
+ );
38
+
39
+
27
40
  return (
28
41
  <>
29
- <thead>
42
+ <thead className={classes}
43
+ id={id}
44
+ >
30
45
  {/* Get the header groups (only one in this example) */}
31
46
  {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
32
47
  <tr key={`${headerGroup.id}-headerGroup`}>
@@ -37,7 +52,6 @@ export const TableHeader = ({
37
52
  handleExpandOrCollapse={handleExpandOrCollapse}
38
53
  header={header}
39
54
  headerChildren={children}
40
- headerId={headerId}
41
55
  key={`${header.id}-header`}
42
56
  loading={loading}
43
57
  sortIcon={sortIcon}
@@ -24,10 +24,9 @@ export const updateExpandAndCollapseState = (
24
24
  // Update isExpansionConsistent variable
25
25
  for (const row of rows) {
26
26
  if (
27
- row.getCanExpand() &&
28
- (targetParent === undefined
27
+ targetParent === undefined
29
28
  ? row.depth === 0
30
- : targetParent === row.parentId)
29
+ : targetParent === row.parentId
31
30
  ) {
32
31
  areRowsExpanded.add(row.getIsExpanded())
33
32
  if (areRowsExpanded.size > 1) {
@@ -48,7 +47,7 @@ export const updateExpandAndCollapseState = (
48
47
  })
49
48
  } else {
50
49
  for (const row of rows) {
51
- if (row.getCanExpand() && targetParent === row.parentId) {
50
+ if (targetParent === row.parentId) {
52
51
  updateExpandedRows[row.id] = !isExpansionConsistent
53
52
  ? true
54
53
  : !row.getIsExpanded()
@@ -1,6 +1,6 @@
1
1
  import React, { useState, useEffect, useCallback } from "react";
2
2
  import classnames from "classnames";
3
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
3
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
4
  import { globalProps, GlobalProps } from "../utilities/globalProps";
5
5
  import Table from "../pb_table/_table";
6
6
  import {
@@ -28,10 +28,12 @@ type AdvancedTableProps = {
28
28
  className?: string;
29
29
  columnDefinitions: DataType[];
30
30
  data?: { [key: string]: string };
31
- enableToggleExpansion?: "all" | "header";
31
+ enableToggleExpansion?: "all" | "header" | "none";
32
32
  expandedControl?: DataType;
33
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
33
34
  id?: string;
34
35
  initialLoadingRowsCount?: number;
36
+ inlineRowLoading?: boolean;
35
37
  loading?: boolean | string;
36
38
  onRowToggleClick?: (arg: Row<DataType>) => void;
37
39
  onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -51,8 +53,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
51
53
  data = {},
52
54
  enableToggleExpansion = "header",
53
55
  expandedControl,
56
+ htmlOptions = {},
54
57
  id,
55
58
  initialLoadingRowsCount = 10,
59
+ inlineRowLoading = false,
56
60
  loading,
57
61
  onRowToggleClick,
58
62
  onToggleExpansionClick,
@@ -104,7 +108,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
104
108
  const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
105
109
  const accessorValue = rowData[depthAccessor];
106
110
  return accessorValue ? (
107
- <CustomCell row={row}
111
+ <CustomCell
112
+ onRowToggleClick={onRowToggleClick}
113
+ row={row}
108
114
  value={accessorValue}
109
115
  />
110
116
  ) : (
@@ -195,6 +201,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
195
201
 
196
202
  const ariaProps = buildAriaProps(aria);
197
203
  const dataProps = buildDataProps(data);
204
+ const htmlProps = buildHtmlProps(htmlOptions);
198
205
  const classes = classnames(
199
206
  buildCss("pb_advanced_table"),
200
207
  globalProps(props),
@@ -204,19 +211,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
204
211
  return (
205
212
  <div {...ariaProps}
206
213
  {...dataProps}
214
+ {...htmlProps}
207
215
  className={classes}
208
216
  id={id}
209
217
  >
210
218
  <AdvancedTableContext.Provider
211
219
  value={{
212
- table,
220
+ columnDefinitions,
221
+ enableToggleExpansion,
222
+ expanded,
213
223
  handleExpandOrCollapse,
224
+ inlineRowLoading,
214
225
  loading,
215
- enableToggleExpansion,
216
- toggleExpansionIcon,
217
226
  setExpanded,
218
- expanded,
219
227
  sortControl,
228
+ table,
229
+ toggleExpansionIcon,
220
230
  }}
221
231
  >
222
232
  <Table
@@ -42,6 +42,36 @@ const MOCK_DATA = [
42
42
  },
43
43
  ];
44
44
 
45
+ const MOCK_DATA_LOADING = [
46
+ {
47
+ year: "2021",
48
+ quarter: null,
49
+ month: null,
50
+ day: null,
51
+ newEnrollments: "20",
52
+ scheduledMeetings: "10",
53
+ children: [],
54
+ },
55
+ {
56
+ year: "2022",
57
+ quarter: null,
58
+ month: null,
59
+ day: null,
60
+ newEnrollments: "20",
61
+ scheduledMeetings: "10",
62
+ children: [
63
+ {
64
+ year: "2022",
65
+ quarter: "Q1",
66
+ month: null,
67
+ day: null,
68
+ newEnrollments: "2",
69
+ scheduledMeetings: "35",
70
+ },
71
+ ],
72
+ },
73
+ ];
74
+
45
75
  const columnDefinitions = [
46
76
  {
47
77
  accessor: "year",
@@ -343,3 +373,57 @@ test("sort button exists and sorts column data", () => {
343
373
  const row2 = kit.getElementsByTagName('tr')[2]
344
374
  expect(row2.id).toBe("0-0-0-row")
345
375
  });
376
+
377
+ test("Generates Table.Header default + custom classname", () => {
378
+ render(
379
+ <AdvancedTable
380
+ columnDefinitions={columnDefinitions}
381
+ data={{ testid: testId }}
382
+ tableData={MOCK_DATA}
383
+ >
384
+ <AdvancedTable.Header className="custom-header" />
385
+ <AdvancedTable.Body />
386
+
387
+ </AdvancedTable>
388
+ );
389
+
390
+ const kit = screen.getByTestId(testId);
391
+ const tableHeader = kit.querySelector('thead')
392
+ expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
393
+ });
394
+
395
+ test("Generates Table.Body default + custom classname", () => {
396
+ render(
397
+ <AdvancedTable
398
+ columnDefinitions={columnDefinitions}
399
+ data={{ testid: testId }}
400
+ tableData={MOCK_DATA}
401
+ >
402
+ <AdvancedTable.Header />
403
+ <AdvancedTable.Body className="custom-body-classname"/>
404
+
405
+ </AdvancedTable>
406
+ );
407
+
408
+ const kit = screen.getByTestId(testId);
409
+ const tableHeader = kit.querySelector('tbody')
410
+ expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
411
+ });
412
+
413
+ test("inlineRowLoading prop renders inline loading if true", () => {
414
+ render(
415
+ <AdvancedTable
416
+ columnDefinitions={columnDefinitions}
417
+ data={{ testid: testId }}
418
+ inlineRowLoading
419
+ tableData={MOCK_DATA_LOADING}
420
+ />
421
+ );
422
+
423
+ const kit = screen.getByTestId(testId);
424
+ const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
425
+ expect(rowButton).toBeInTheDocument()
426
+ rowButton.click()
427
+ const inlineLoading = kit.querySelector(".fa-spinner")
428
+ expect(inlineLoading).toBeInTheDocument()
429
+ });
@@ -0,0 +1,58 @@
1
+ import React from "react";
2
+ import { AdvancedTable } from "../..";
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
4
+
5
+ const AdvancedTableInlineRowLoading = (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
+ //Render the subRow header rows
39
+ const subRowHeaders = ["Quarter", "Month", "Day"]
40
+
41
+
42
+ return (
43
+ <div>
44
+ <AdvancedTable
45
+ columnDefinitions={columnDefinitions}
46
+ enableToggleExpansion="all"
47
+ inlineRowLoading
48
+ tableData={MOCK_DATA_INLINE_LOADING}
49
+ {...props}
50
+ >
51
+ <AdvancedTable.Header />
52
+ <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
+ </AdvancedTable>
54
+ </div>
55
+ );
56
+ };
57
+
58
+ export default AdvancedTableInlineRowLoading;
@@ -0,0 +1,5 @@
1
+ As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
2
+
3
+ In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows.
4
+
5
+ This prop is set to `false` by default.