playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178 → 13.18.0.pre.alpha.PLAY8672199

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: af16199bf3de903780fbe8aef3da42bc2864cdbed9ef37c559bd9c6e3b823ec8
4
- data.tar.gz: 3d64795bc4c41d875381d33a8303280f184fe0cc4915471f6f1cf11455ef604f
3
+ metadata.gz: 548e17316f99aac7783410a352e43be456b73d035736c5ebe4bb90f036cec306
4
+ data.tar.gz: a68e86d6073d487d7566cde15535332ce66a5dd0a0d00d6a169071fc2ef9969a
5
5
  SHA512:
6
- metadata.gz: fad31fe23e5f08b313d6e7b0d7c571c3ca20c08bd59d5e75b001009c8a2ccf2657eb84f3ac882093745458d494ca9d3d54056d83f76f06aafd6897f9c33285a4
7
- data.tar.gz: f0e6431938db0f7fec379cf5c6374d89f7383a9cd6936c3b302811519c74f96fd40df04580f7a5c0c8bfb8ce889c15567ed3075f65e4d32d6e792a83b5e84140
6
+ metadata.gz: 9d73ab3a7bd6b2f19d7dac44591250b689d65fa456e61cf1c6b52f548f3b28ec9327f7a4465b42976d92680601ae5d0cdfca2824a395a649a434ea29bd246601
7
+ data.tar.gz: ff28178d376757325615d842b1d23db0909da38b892e49e2100468915fccf0cce4a815e35f3ae13247f1f7e79b476cc52cf89aefb848b677afe96df27ab05d83
@@ -22,14 +22,13 @@ export const CustomCell = ({
22
22
  row,
23
23
  value,
24
24
  }: CustomCellProps & GlobalProps) => {
25
- const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
25
+ const { setExpanded, expanded } = useContext(AdvancedTableContext);
26
+ const RowWithoutChildren = row.originalSubRows === undefined;
26
27
 
27
28
  const handleOnExpand = (row: Row<DataType>) => {
28
29
  onRowToggleClick && onRowToggleClick(row);
29
30
  setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
30
31
  };
31
- const RowHasChildren = row.original.children ? true : false
32
- const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
33
32
 
34
33
  return (
35
34
  <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
@@ -37,7 +36,7 @@ export const CustomCell = ({
37
36
  columnGap="xs"
38
37
  orientation="row"
39
38
  >
40
- {renderButton ? (
39
+ {!RowWithoutChildren ? (
41
40
  <button
42
41
  className="gray-icon expand-toggle-icon"
43
42
  onClick={() => handleOnExpand(row)}
@@ -54,7 +53,7 @@ export const CustomCell = ({
54
53
  )}
55
54
  </button>
56
55
  ) : null}
57
- <FlexItem paddingLeft={renderButton? "none" : "xs"}>
56
+ <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
58
57
  {row.depth === 0 ? getValue() : value}
59
58
  </FlexItem>
60
59
  </Flex>
@@ -1,9 +1,8 @@
1
- import React, { useContext } from "react"
1
+ import React 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";
7
6
  import { ToggleIconButton } from "./ToggleIconButton"
8
7
  import { renderCollapsibleTrail } from "./CollapsibleTrail"
9
8
 
@@ -13,7 +12,7 @@ import { GlobalProps } from "../../utilities/globalProps"
13
12
 
14
13
  interface SubRowHeaderRowProps {
15
14
  collapsibleTrail?: boolean
16
- enableToggleExpansion?: "all" | "header" | "none"
15
+ enableToggleExpansion?: "all" | "header"
17
16
  onClick: (row: Row<DataType>) => void
18
17
  row: Row<DataType>
19
18
  subRowHeaders?: string[]
@@ -28,11 +27,7 @@ export const SubRowHeaderRow = ({
28
27
  subRowHeaders,
29
28
  table,
30
29
  }: SubRowHeaderRowProps & GlobalProps) => {
31
- const { inlineRowLoading } = useContext(AdvancedTableContext);
32
-
33
30
  const numberOfColumns = table.getAllFlatColumns().length
34
- const rowHasChildren = row.original.children ? true : false
35
- const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
36
31
 
37
32
  return (
38
33
  <tr className="custom-row bg-silver">
@@ -47,13 +42,13 @@ export const SubRowHeaderRow = ({
47
42
  <Flex align="center"
48
43
  columnGap="xs"
49
44
  >
50
- {enableToggleExpansion === "all" && canExpand ? (
45
+ {enableToggleExpansion === "all" && row.getCanExpand() ? (
51
46
  <ToggleIconButton onClick={onClick}
52
47
  row={row}
53
48
  />
54
49
  ) : null}
55
50
  <Caption
56
- marginLeft={canExpand ? "none" : "xs"}
51
+ marginLeft={row.getCanExpand() ? "none" : "xs"}
57
52
  text={subRowHeaders[row.depth - 1]}
58
53
  />
59
54
  </Flex>
@@ -12,10 +12,11 @@ import { GlobalProps } from "../../utilities/globalProps"
12
12
 
13
13
  type TableHeaderCellProps = {
14
14
  enableSorting?: boolean
15
- enableToggleExpansion?: "all" | "header" | "none"
15
+ enableToggleExpansion?: "all" | "header"
16
16
  handleExpandOrCollapse?: () => void
17
17
  header?: Header<DataType, unknown>
18
18
  headerChildren?: React.ReactNode | React.ReactNode[]
19
+ headerId?: string
19
20
  loading?: boolean
20
21
  sortIcon?: string | string[]
21
22
  } & GlobalProps
@@ -26,6 +27,7 @@ export const TableHeaderCell = ({
26
27
  handleExpandOrCollapse,
27
28
  header,
28
29
  headerChildren,
30
+ headerId,
29
31
  loading,
30
32
  sortIcon,
31
33
  }: TableHeaderCellProps) => {
@@ -48,22 +50,10 @@ const cellClassName = classnames("table-header-cells",
48
50
  );
49
51
 
50
52
  const cellId = `${loading ?
51
- `loading-${header.id}`
52
- : `${header.id}`
53
+ `loading-${header.id}${headerId ? `-${headerId}` : ""}`
54
+ : `${header.id}${headerId ? `-${headerId}` : ""}`
53
55
  }`;
54
56
 
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
-
67
57
  return (
68
58
  <th
69
59
  align="right"
@@ -83,11 +73,15 @@ const isToggleExpansionEnabled =
83
73
  alignItems="center"
84
74
  justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
85
75
  >
86
- {isToggleExpansionEnabled && (
76
+ {header.index === 0 &&
77
+ !loading &&
78
+ (enableToggleExpansion === "all" || "header") && (
87
79
  <ToggleIconButton onClick={handleExpandOrCollapse} />
88
80
  )}
89
81
 
90
- {isToggleExpansionEnabledLoading &&(
82
+ {header.index === 0 &&
83
+ loading &&
84
+ (enableToggleExpansion === "all" || "header") && (
91
85
  <div className="loading-toggle-icon header-toggle-icon" />
92
86
  )}
93
87
 
@@ -1,7 +1,4 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
5
2
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
6
3
  import { flexRender, Row } from "@tanstack/react-table"
7
4
 
@@ -13,47 +10,28 @@ import { isChrome } from "../Utilities/BrowserCheck"
13
10
  import { DataType } from "../Utilities/types"
14
11
 
15
12
  type TableBodyProps = {
16
- className?: string;
17
13
  collapsibleTrail?: boolean
18
- id?: string;
19
14
  subRowHeaders?: string[]
20
15
  }
21
16
 
22
17
  export const TableBody = ({
23
- className,
24
18
  collapsibleTrail = true,
25
- id,
26
19
  subRowHeaders,
27
- ...props
28
20
  }: TableBodyProps) => {
29
-
30
21
  const {
31
- columnDefinitions,
32
22
  enableToggleExpansion,
33
23
  handleExpandOrCollapse,
34
- inlineRowLoading,
35
24
  loading,
36
25
  table,
37
26
  } = useContext(AdvancedTableContext)
38
-
39
- const classes = classnames(
40
- buildCss("pb_advanced_table_body"),
41
- globalProps(props),
42
- className
43
- );
44
-
45
27
  return (
46
28
  <>
47
- <tbody className={classes}
48
- id={id}
49
- >
29
+ <tbody>
50
30
  {table.getRowModel().rows.map((row: Row<DataType>) => {
51
31
  const isExpandable = row.getIsExpanded()
52
32
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0
53
- const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
33
+ const rowHasNoChildren = !row.original.children?.length
54
34
  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))
57
35
 
58
36
  return (
59
37
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
@@ -69,7 +47,7 @@ export const TableBody = ({
69
47
  )}
70
48
 
71
49
  <tr
72
- className={`${rowBackground ? "bg-silver" : "bg-white"} ${
50
+ className={`${isExpandable ? "bg-silver" : "bg-white"} ${
73
51
  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
74
52
  }`}
75
53
  id={`${row.index}-${row.id}-${row.depth}-row`}
@@ -101,11 +79,9 @@ export const TableBody = ({
101
79
  </tr>
102
80
 
103
81
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
104
- {isDataLoading ? (
82
+ {isExpandable && rowHasNoChildren && row.depth === 0 ? (
105
83
  <tr key={`${row.id}-row`}>
106
- <td colSpan={numberOfColumns}
107
- style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
108
- >
84
+ <td colSpan={numberOfColumns}>
109
85
  <LoadingInline />
110
86
  </td>
111
87
  </tr>
@@ -1,7 +1,4 @@
1
1
  import React, { useContext } from "react"
2
- import classnames from "classnames";
3
- import { buildCss } from "../../utilities/props";
4
- import { globalProps } from "../../utilities/globalProps";
5
2
  import { HeaderGroup } from "@tanstack/react-table"
6
3
  import AdvancedTableContext from "../Context/AdvancedTableContext"
7
4
  import { TableHeaderCell } from "../Components/TableHeaderCell"
@@ -9,19 +6,16 @@ import { DataType } from "../Utilities/types"
9
6
 
10
7
  type TableHeaderProps = {
11
8
  children?: React.ReactNode | React.ReactNode[]
12
- className?: string
13
9
  enableSorting?: boolean
14
- id?: string;
10
+ headerId?: string
15
11
  sortIcon?: string | string[]
16
12
  }
17
13
 
18
14
  export const TableHeader = ({
19
15
  children,
20
- className,
21
16
  enableSorting = false,
22
- id,
17
+ headerId,
23
18
  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
24
- ...props
25
19
  }: TableHeaderProps) => {
26
20
  const {
27
21
  enableToggleExpansion,
@@ -30,18 +24,9 @@ export const TableHeader = ({
30
24
  table,
31
25
  } = useContext(AdvancedTableContext)
32
26
 
33
- const classes = classnames(
34
- buildCss("pb_advanced_table_header"),
35
- globalProps(props),
36
- className
37
- );
38
-
39
-
40
27
  return (
41
28
  <>
42
- <thead className={classes}
43
- id={id}
44
- >
29
+ <thead>
45
30
  {/* Get the header groups (only one in this example) */}
46
31
  {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
47
32
  <tr key={`${headerGroup.id}-headerGroup`}>
@@ -52,6 +37,7 @@ export const TableHeader = ({
52
37
  handleExpandOrCollapse={handleExpandOrCollapse}
53
38
  header={header}
54
39
  headerChildren={children}
40
+ headerId={headerId}
55
41
  key={`${header.id}-header`}
56
42
  loading={loading}
57
43
  sortIcon={sortIcon}
@@ -24,9 +24,10 @@ export const updateExpandAndCollapseState = (
24
24
  // Update isExpansionConsistent variable
25
25
  for (const row of rows) {
26
26
  if (
27
- targetParent === undefined
27
+ row.getCanExpand() &&
28
+ (targetParent === undefined
28
29
  ? row.depth === 0
29
- : targetParent === row.parentId
30
+ : targetParent === row.parentId)
30
31
  ) {
31
32
  areRowsExpanded.add(row.getIsExpanded())
32
33
  if (areRowsExpanded.size > 1) {
@@ -47,7 +48,7 @@ export const updateExpandAndCollapseState = (
47
48
  })
48
49
  } else {
49
50
  for (const row of rows) {
50
- if (targetParent === row.parentId) {
51
+ if (row.getCanExpand() && targetParent === row.parentId) {
51
52
  updateExpandedRows[row.id] = !isExpansionConsistent
52
53
  ? true
53
54
  : !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, buildHtmlProps } from "../utilities/props";
3
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
4
4
  import { globalProps, GlobalProps } from "../utilities/globalProps";
5
5
  import Table from "../pb_table/_table";
6
6
  import {
@@ -28,12 +28,10 @@ type AdvancedTableProps = {
28
28
  className?: string;
29
29
  columnDefinitions: DataType[];
30
30
  data?: { [key: string]: string };
31
- enableToggleExpansion?: "all" | "header" | "none";
31
+ enableToggleExpansion?: "all" | "header";
32
32
  expandedControl?: DataType;
33
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
34
33
  id?: string;
35
34
  initialLoadingRowsCount?: number;
36
- inlineRowLoading?: boolean;
37
35
  loading?: boolean | string;
38
36
  onRowToggleClick?: (arg: Row<DataType>) => void;
39
37
  onToggleExpansionClick?: (arg: Row<DataType>) => void;
@@ -53,10 +51,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
53
51
  data = {},
54
52
  enableToggleExpansion = "header",
55
53
  expandedControl,
56
- htmlOptions = {},
57
54
  id,
58
55
  initialLoadingRowsCount = 10,
59
- inlineRowLoading = false,
60
56
  loading,
61
57
  onRowToggleClick,
62
58
  onToggleExpansionClick,
@@ -108,9 +104,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
108
104
  const depthAccessor = cellAccessors[row.depth - 1]; // Adjust index for depth
109
105
  const accessorValue = rowData[depthAccessor];
110
106
  return accessorValue ? (
111
- <CustomCell
112
- onRowToggleClick={onRowToggleClick}
113
- row={row}
107
+ <CustomCell row={row}
114
108
  value={accessorValue}
115
109
  />
116
110
  ) : (
@@ -201,7 +195,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
201
195
 
202
196
  const ariaProps = buildAriaProps(aria);
203
197
  const dataProps = buildDataProps(data);
204
- const htmlProps = buildHtmlProps(htmlOptions);
205
198
  const classes = classnames(
206
199
  buildCss("pb_advanced_table"),
207
200
  globalProps(props),
@@ -211,22 +204,19 @@ const AdvancedTable = (props: AdvancedTableProps) => {
211
204
  return (
212
205
  <div {...ariaProps}
213
206
  {...dataProps}
214
- {...htmlProps}
215
207
  className={classes}
216
208
  id={id}
217
209
  >
218
210
  <AdvancedTableContext.Provider
219
211
  value={{
220
- columnDefinitions,
221
- enableToggleExpansion,
222
- expanded,
212
+ table,
223
213
  handleExpandOrCollapse,
224
- inlineRowLoading,
225
214
  loading,
215
+ enableToggleExpansion,
216
+ toggleExpansionIcon,
226
217
  setExpanded,
218
+ expanded,
227
219
  sortControl,
228
- table,
229
- toggleExpansionIcon,
230
220
  }}
231
221
  >
232
222
  <Table
@@ -343,39 +343,3 @@ test("sort button exists and sorts column data", () => {
343
343
  const row2 = kit.getElementsByTagName('tr')[2]
344
344
  expect(row2.id).toBe("0-0-0-row")
345
345
  });
346
-
347
- test("Generates Table.Header default + custom classname", () => {
348
- render(
349
- <AdvancedTable
350
- columnDefinitions={columnDefinitions}
351
- data={{ testid: testId }}
352
- tableData={MOCK_DATA}
353
- >
354
- <AdvancedTable.Header className="custom-header" />
355
- <AdvancedTable.Body />
356
-
357
- </AdvancedTable>
358
- );
359
-
360
- const kit = screen.getByTestId(testId);
361
- const tableHeader = kit.querySelector('thead')
362
- expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
363
- });
364
-
365
- test("Generates Table.Body default + custom classname", () => {
366
- render(
367
- <AdvancedTable
368
- columnDefinitions={columnDefinitions}
369
- data={{ testid: testId }}
370
- tableData={MOCK_DATA}
371
- >
372
- <AdvancedTable.Header />
373
- <AdvancedTable.Body className="custom-body-classname"/>
374
-
375
- </AdvancedTable>
376
- );
377
-
378
- const kit = screen.getByTestId(testId);
379
- const tableHeader = kit.querySelector('tbody')
380
- expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
381
- });
@@ -9,5 +9,4 @@ examples:
9
9
  - advanced_table_collapsible_trail: Collapsible Trail
10
10
  - advanced_table_table_options: Table Options
11
11
  - advanced_table_table_props: Table Props
12
- - advanced_table_inline_row_loading: inline Row Loading
13
12
 
@@ -7,4 +7,3 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
7
7
  export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
8
8
  export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
9
9
  export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
10
- export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
@@ -57,6 +57,10 @@
57
57
  margin-bottom: 16px;
58
58
  }
59
59
 
60
+ &[class*=rails] > [class^=pb_date_picker_kit] {
61
+ margin-bottom: 0px;
62
+ }
63
+
60
64
  & > [class^=pb_date_picker_kit]:not(:last-child) {
61
65
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
62
66
  border-bottom-right-radius: 0;
@@ -7,7 +7,7 @@ module Playbook
7
7
  default: false
8
8
 
9
9
  def classname
10
- generate_classname("pb_form_group_kit", full_width_class)
10
+ generate_classname("pb_form_group_kit", full_width_class) + form_group_rails
11
11
  end
12
12
 
13
13
  private
@@ -15,6 +15,10 @@ module Playbook
15
15
  def full_width_class
16
16
  full_width ? "full" : nil
17
17
  end
18
+
19
+ def form_group_rails
20
+ " rails"
21
+ end
18
22
  end
19
23
  end
20
24
  end
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.18.0"
5
- VERSION = "13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178"
5
+ VERSION = "13.18.0.pre.alpha.PLAY8672199"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2178
4
+ version: 13.18.0.pre.alpha.PLAY8672199
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-02-19 00:00:00.000000000 Z
12
+ date: 2024-02-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -293,8 +293,6 @@ files:
293
293
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
294
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
295
295
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
296
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
297
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
298
296
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
299
297
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
300
298
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
@@ -309,7 +307,6 @@ files:
309
307
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
310
308
  - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
311
309
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
312
- - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
313
310
  - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
314
311
  - app/pb_kits/playbook/pb_advanced_table/docs/index.js
315
312
  - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
@@ -1,58 +0,0 @@
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;
@@ -1,5 +0,0 @@
1
- As a default, the kit assumes that the dataset provided to it at first render is the complete dataset and renders the row level expansion buttons, the toggleAllExpansion buttons in the subrow headers (if any), etc based on that dataset. However, if the dev wants to set up a more complicated querying logic that for instance, runs a query on each expansion button click, then they can use the `inlineRowLoading` prop. This prop, if present, assumes that any item in the dataset that has an empty children array WILL have children even if it does not have any on first render. The kit therefore renders the correct buttons as well as adding an inline Loading state for the row with that empty children array.
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.
@@ -1,200 +0,0 @@
1
- export const MOCK_DATA_INLINE_LOADING = [
2
- {
3
- year: "2021",
4
- quarter: null,
5
- month: null,
6
- day: null,
7
- newEnrollments: "20",
8
- scheduledMeetings: "10",
9
- attendanceRate: "51%",
10
- completedClasses: "3",
11
- classCompletionRate: "33%",
12
- graduatedStudents: "19",
13
- children: [],
14
- },
15
- {
16
- year: "2022",
17
- quarter: null,
18
- month: null,
19
- day: null,
20
- newEnrollments: "25",
21
- scheduledMeetings: "17",
22
- attendanceRate: "75%",
23
- completedClasses: "5",
24
- classCompletionRate: "45%",
25
- graduatedStudents: "32",
26
- children: [
27
- {
28
- year: "2022",
29
- quarter: "Q1",
30
- month: null,
31
- day: null,
32
- newEnrollments: "2",
33
- scheduledMeetings: "35",
34
- attendanceRate: "32%",
35
- completedClasses: "15",
36
- classCompletionRate: "52%",
37
- graduatedStudents: "36",
38
- children: [
39
- {
40
- year: "2022",
41
- quarter: "Q1",
42
- month: "January",
43
- day: null,
44
- newEnrollments: "16",
45
- scheduledMeetings: "20",
46
- attendanceRate: "11%",
47
- completedClasses: "13",
48
- classCompletionRate: "47%",
49
- graduatedStudents: "28",
50
- children: [
51
- {
52
- year: "2022",
53
- quarter: "Q1",
54
- month: "January",
55
- day: "15",
56
- newEnrollments: "34",
57
- scheduledMeetings: "28",
58
- attendanceRate: "97%",
59
- completedClasses: "20",
60
- classCompletionRate: "15%",
61
- graduatedStudents: "17",
62
- },
63
- {
64
- year: "2022",
65
- quarter: "Q1",
66
- month: "January",
67
- day: "25",
68
- newEnrollments: "43",
69
- scheduledMeetings: "23",
70
- attendanceRate: "66%",
71
- completedClasses: "26",
72
- classCompletionRate: "47%",
73
- graduatedStudents: "9",
74
- },
75
- ],
76
- },
77
- {
78
- year: "2022",
79
- quarter: "Q1",
80
- month: "May",
81
- day: null,
82
- newEnrollments: "20",
83
- scheduledMeetings: "41",
84
- attendanceRate: "95%",
85
- completedClasses: "26",
86
- classCompletionRate: "83%",
87
- graduatedStudents: "43",
88
- children: [
89
- {
90
- year: "2011",
91
- quarter: "Q1",
92
- month: "May",
93
- day: "2",
94
- newEnrollments: "19",
95
- scheduledMeetings: "35",
96
- attendanceRate: "69%",
97
- completedClasses: "8",
98
- classCompletionRate: "75%",
99
- graduatedStudents: "23",
100
- },
101
- ],
102
- },
103
- ],
104
- },
105
- ],
106
- },
107
- {
108
- year: "2023",
109
- quarter: null,
110
- month: null,
111
- day: null,
112
- newEnrollments: "10",
113
- scheduledMeetings: "15",
114
- attendanceRate: "65%",
115
- completedClasses: "4",
116
- classCompletionRate: "49%",
117
- graduatedStudents: "29",
118
- children: [
119
- {
120
- year: "2023",
121
- quarter: "Q1",
122
- month: null,
123
- day: null,
124
- newEnrollments: "2",
125
- scheduledMeetings: "35",
126
- attendanceRate: "32%",
127
- completedClasses: "15",
128
- classCompletionRate: "52%",
129
- graduatedStudents: "36",
130
- children: [
131
- {
132
- year: "2023",
133
- quarter: "Q1",
134
- month: "March",
135
- day: null,
136
- newEnrollments: "16",
137
- scheduledMeetings: "20",
138
- attendanceRate: "11%",
139
- completedClasses: "13",
140
- classCompletionRate: "47%",
141
- graduatedStudents: "28",
142
- children: [
143
- {
144
- year: "2023",
145
- quarter: "Q1",
146
- month: "March",
147
- day: "10",
148
- newEnrollments: "34",
149
- scheduledMeetings: "28",
150
- attendanceRate: "97%",
151
- completedClasses: "20",
152
- classCompletionRate: "15%",
153
- graduatedStudents: "17",
154
- },
155
- {
156
- year: "2023",
157
- quarter: "Q1",
158
- month: "March",
159
- day: "11",
160
- newEnrollments: "43",
161
- scheduledMeetings: "23",
162
- attendanceRate: "66%",
163
- completedClasses: "26",
164
- classCompletionRate: "47%",
165
- graduatedStudents: "9",
166
- },
167
- ],
168
- },
169
- {
170
- year: "2023",
171
- quarter: "Q1",
172
- month: "April",
173
- day: null,
174
- newEnrollments: "20",
175
- scheduledMeetings: "41",
176
- attendanceRate: "95%",
177
- completedClasses: "26",
178
- classCompletionRate: "83%",
179
- graduatedStudents: "43",
180
- children: [
181
- {
182
- year: "2023",
183
- quarter: "Q1",
184
- month: "April",
185
- day: "15",
186
- newEnrollments: "19",
187
- scheduledMeetings: "35",
188
- attendanceRate: "69%",
189
- completedClasses: "8",
190
- classCompletionRate: "75%",
191
- graduatedStudents: "23",
192
- },
193
- ],
194
- },
195
- ],
196
- },
197
- ],
198
- },
199
- ];
200
-