playbook_ui 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +21 -19
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +14 -10
  8. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
  9. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -9
  12. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +82 -78
  13. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
  32. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
  33. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  34. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  35. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  36. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  37. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  38. data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
  39. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  40. data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
  41. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  42. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  43. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
  44. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  45. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  46. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  47. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  48. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  49. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  50. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  51. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  52. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  53. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  54. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  55. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  56. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  57. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  58. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  59. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  60. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
  61. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  62. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  63. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  64. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  65. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  66. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  67. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  68. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  69. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  70. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  71. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  72. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  73. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  74. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  75. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  76. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  77. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  78. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  79. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  80. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  81. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  82. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  83. data/dist/playbook-rails.js +2 -2
  84. data/lib/playbook/version.rb +2 -2
  85. metadata +21 -7
@@ -1,7 +1,7 @@
1
- import React, {useState} from "react";
2
- import { render, screen } from "../utilities/test-utils";
1
+ import React, {useState} from "react"
2
+ import { render, screen } from "../utilities/test-utils"
3
3
 
4
- import { AdvancedTable } from "../";
4
+ import { AdvancedTable } from "../"
5
5
 
6
6
  const MOCK_DATA = [
7
7
  {
@@ -40,7 +40,7 @@ const MOCK_DATA = [
40
40
  },
41
41
  ],
42
42
  },
43
- ];
43
+ ]
44
44
 
45
45
  const MOCK_DATA_LOADING = [
46
46
  {
@@ -70,7 +70,7 @@ const MOCK_DATA_LOADING = [
70
70
  },
71
71
  ],
72
72
  },
73
- ];
73
+ ]
74
74
 
75
75
  const columnDefinitions = [
76
76
  {
@@ -86,11 +86,11 @@ const columnDefinitions = [
86
86
  accessor: "scheduledMeetings",
87
87
  label: "Scheduled Meetings",
88
88
  },
89
- ];
89
+ ]
90
90
 
91
91
  const subRowHeaders = ["Quarter"]
92
92
 
93
- const testId = "advanced_table";
93
+ const testId = "advanced_table"
94
94
 
95
95
  const AdvancedTableExpandControl = () => {
96
96
  const [expanded, setExpanded] = useState({'0': true})
@@ -109,7 +109,7 @@ return (
109
109
  tableData={MOCK_DATA}
110
110
  />
111
111
  </div>
112
- );
112
+ )
113
113
  }
114
114
 
115
115
  const AdvancedTableSortControl = () => {
@@ -132,7 +132,7 @@ return (
132
132
  <AdvancedTable.Body />
133
133
  </AdvancedTable>
134
134
  </div>
135
- );
135
+ )
136
136
  }
137
137
 
138
138
  const tableOptions = {
@@ -158,12 +158,12 @@ test("Generates default kit and classname", () => {
158
158
  data={{ testid: testId }}
159
159
  tableData={MOCK_DATA}
160
160
  />
161
- );
161
+ )
162
162
 
163
- const kit = screen.getByTestId(testId);
164
- expect(kit).toBeInTheDocument();
163
+ const kit = screen.getByTestId(testId)
164
+ expect(kit).toBeInTheDocument()
165
165
  expect(kit).toHaveClass('pb_advanced_table')
166
- });
166
+ })
167
167
 
168
168
  test("Generates aria label", () => {
169
169
  render(
@@ -173,11 +173,11 @@ test("Generates aria label", () => {
173
173
  data={{ testid: testId }}
174
174
  tableData={MOCK_DATA}
175
175
  />
176
- );
176
+ )
177
177
 
178
- const kit = screen.getByTestId(testId);
178
+ const kit = screen.getByTestId(testId)
179
179
  expect(kit).toHaveAttribute('aria-label', testId)
180
- });
180
+ })
181
181
 
182
182
  test("Row toggle button exists and toggles subrows open and closed", () => {
183
183
  render(
@@ -186,9 +186,9 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
186
186
  data={{ testid: testId }}
187
187
  tableData={MOCK_DATA}
188
188
  />
189
- );
189
+ )
190
190
 
191
- const kit = screen.getByTestId(testId);
191
+ const kit = screen.getByTestId(testId)
192
192
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
193
193
  expect(rowButton).toBeInTheDocument()
194
194
  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -196,7 +196,7 @@ test("Row toggle button exists and toggles subrows open and closed", () => {
196
196
  rowButton.click()
197
197
  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
198
198
  expect(subRow).toBeInTheDocument()
199
- });
199
+ })
200
200
 
201
201
  test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
202
202
  render(
@@ -205,9 +205,9 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", ()
205
205
  data={{ testid: testId }}
206
206
  tableData={MOCK_DATA}
207
207
  />
208
- );
208
+ )
209
209
 
210
- const kit = screen.getByTestId(testId);
210
+ const kit = screen.getByTestId(testId)
211
211
  const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
212
212
  expect(toggleButton).toBeInTheDocument()
213
213
  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
@@ -215,7 +215,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", ()
215
215
  toggleButton.click()
216
216
  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
217
217
  expect(subRow).toBeInTheDocument()
218
- });
218
+ })
219
219
 
220
220
  test("loading state + initialLoadingRowCount prop", () => {
221
221
  render(
@@ -226,16 +226,16 @@ test("loading state + initialLoadingRowCount prop", () => {
226
226
  loading
227
227
  tableData={MOCK_DATA}
228
228
  />
229
- );
229
+ )
230
230
 
231
- const kit = screen.getByTestId(testId);
231
+ const kit = screen.getByTestId(testId)
232
232
  const table = kit.querySelector('table')
233
233
  expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
234
234
 
235
235
  const tableBody = kit.querySelector('tbody')
236
236
  const tableRows = tableBody.getElementsByTagName('tr')
237
237
  expect(tableRows).toHaveLength(13)
238
- });
238
+ })
239
239
 
240
240
  test("subRowHeaders are rendered", () => {
241
241
  render(
@@ -247,21 +247,21 @@ test("subRowHeaders are rendered", () => {
247
247
  <AdvancedTable.Header />
248
248
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
249
249
  </AdvancedTable>
250
- );
250
+ )
251
251
 
252
- const kit = screen.getByTestId(testId);
252
+ const kit = screen.getByTestId(testId)
253
253
 
254
254
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
255
255
  rowButton.click()
256
256
 
257
257
  const subRowHeader = kit.querySelector(".custom-row.bg-silver")
258
258
  expect(subRowHeader).toBeInTheDocument()
259
- });
259
+ })
260
260
 
261
261
  test("expandControl prop works as expected", () => {
262
262
  render (<AdvancedTableExpandControl/>)
263
263
 
264
- const kit = screen.getByTestId(testId);
264
+ const kit = screen.getByTestId(testId)
265
265
  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
266
266
  expect(subRow).toBeInTheDocument()
267
267
  })
@@ -274,13 +274,13 @@ test("tableOptions prop functions as expected", () => {
274
274
  tableData={MOCK_DATA}
275
275
  tableOptions={tableOptions}
276
276
  />
277
- );
277
+ )
278
278
 
279
- const kit = screen.getByTestId(testId);
279
+ const kit = screen.getByTestId(testId)
280
280
  const row1 = kit.getElementsByTagName('tr')[1]
281
281
 
282
282
  expect(row1.id).toBe("1-1-0-row")
283
- });
283
+ })
284
284
 
285
285
  test("tableProps prop functions as expected", () => {
286
286
  render(
@@ -290,12 +290,12 @@ test("tableProps prop functions as expected", () => {
290
290
  tableData={MOCK_DATA}
291
291
  tableProps={tableProps}
292
292
  />
293
- );
293
+ )
294
294
 
295
- const kit = screen.getByTestId(testId);
295
+ const kit = screen.getByTestId(testId)
296
296
  const table = kit.querySelector('table')
297
297
  expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
298
- });
298
+ })
299
299
 
300
300
  test("enableExpansionIcon changes icon", () => {
301
301
  render(
@@ -306,13 +306,13 @@ test("enableExpansionIcon changes icon", () => {
306
306
  tableProps={tableProps}
307
307
  toggleExpansionIcon= "chevron-up"
308
308
  />
309
- );
309
+ )
310
310
 
311
- const kit = screen.getByTestId(testId);
311
+ const kit = screen.getByTestId(testId)
312
312
  const tableHead = kit.querySelector('table')
313
313
  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
314
314
  expect(toggleIcon).toHaveClass("fa-chevron-up")
315
- });
315
+ })
316
316
 
317
317
  test("sortIcon changes icon", () => {
318
318
  render(
@@ -328,18 +328,18 @@ test("sortIcon changes icon", () => {
328
328
  />
329
329
  <AdvancedTable.Body />
330
330
  </AdvancedTable>
331
- );
331
+ )
332
332
 
333
- const kit = screen.getByTestId(testId);
333
+ const kit = screen.getByTestId(testId)
334
334
  const sortIcon = kit.querySelector('.sort-button-icon')
335
335
  const icon= sortIcon.querySelector(".pb_icon_kit")
336
336
  expect(icon).toHaveClass("fa-chevron-down")
337
- });
337
+ })
338
338
 
339
339
  test("Sort icon renders with enableSorting + sortControl works as expected", () => {
340
340
  render (<AdvancedTableSortControl/>)
341
341
 
342
- const kit = screen.getByTestId(testId);
342
+ const kit = screen.getByTestId(testId)
343
343
  const sortIcon = kit.querySelector(".sort-button-icon")
344
344
  expect(sortIcon).toBeInTheDocument()
345
345
 
@@ -358,9 +358,9 @@ test("sort button exists and sorts column data", () => {
358
358
  <AdvancedTable.Header enableSorting />
359
359
  <AdvancedTable.Body />
360
360
  </AdvancedTable>
361
- );
361
+ )
362
362
 
363
- const kit = screen.getByTestId(testId);
363
+ const kit = screen.getByTestId(testId)
364
364
 
365
365
  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
366
366
  expect(sortButton).toBeInTheDocument()
@@ -372,7 +372,7 @@ test("sort button exists and sorts column data", () => {
372
372
 
373
373
  const row2 = kit.getElementsByTagName('tr')[2]
374
374
  expect(row2.id).toBe("0-0-0-row")
375
- });
375
+ })
376
376
 
377
377
  test("Generates Table.Header default + custom classname", () => {
378
378
  render(
@@ -385,12 +385,12 @@ test("Generates Table.Header default + custom classname", () => {
385
385
  <AdvancedTable.Body />
386
386
 
387
387
  </AdvancedTable>
388
- );
388
+ )
389
389
 
390
- const kit = screen.getByTestId(testId);
390
+ const kit = screen.getByTestId(testId)
391
391
  const tableHeader = kit.querySelector('thead')
392
392
  expect(tableHeader).toHaveClass('pb_advanced_table_header custom-header')
393
- });
393
+ })
394
394
 
395
395
  test("Generates Table.Body default + custom classname", () => {
396
396
  render(
@@ -403,12 +403,12 @@ test("Generates Table.Body default + custom classname", () => {
403
403
  <AdvancedTable.Body className="custom-body-classname"/>
404
404
 
405
405
  </AdvancedTable>
406
- );
406
+ )
407
407
 
408
- const kit = screen.getByTestId(testId);
408
+ const kit = screen.getByTestId(testId)
409
409
  const tableHeader = kit.querySelector('tbody')
410
410
  expect(tableHeader).toHaveClass('pb_advanced_table_body custom-body-classname')
411
- });
411
+ })
412
412
 
413
413
  test("inlineRowLoading prop renders inline loading if true", () => {
414
414
  render(
@@ -418,12 +418,12 @@ test("inlineRowLoading prop renders inline loading if true", () => {
418
418
  inlineRowLoading
419
419
  tableData={MOCK_DATA_LOADING}
420
420
  />
421
- );
421
+ )
422
422
 
423
- const kit = screen.getByTestId(testId);
423
+ const kit = screen.getByTestId(testId)
424
424
  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
425
425
  expect(rowButton).toBeInTheDocument()
426
426
  rowButton.click()
427
427
  const inlineLoading = kit.querySelector(".fa-spinner")
428
428
  expect(inlineLoading).toBeInTheDocument()
429
- });
429
+ })
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableCollapsibleTrail = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableCollapsibleTrail = (props) => {
46
46
  <AdvancedTable.Body collapsibleTrail={false} />
47
47
  </AdvancedTable>
48
48
  </div>
49
- );
50
- };
49
+ )
50
+ }
51
51
 
52
- export default AdvancedTableCollapsibleTrail;
52
+ export default AdvancedTableCollapsibleTrail
@@ -1 +1 @@
1
- `collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
1
+ `collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableDefault = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableDefault = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -43,7 +43,7 @@ const AdvancedTableDefault = (props) => {
43
43
  {...props}
44
44
  />
45
45
  </div>
46
- );
47
- };
46
+ )
47
+ }
48
48
 
49
- export default AdvancedTableDefault;
49
+ export default AdvancedTableDefault
@@ -8,7 +8,7 @@ For a visual of the data structure needed for `tableData`, see [here](https://gi
8
8
 
9
9
  ### columnDefinitions
10
10
 
11
- `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:
11
+ `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 an array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
12
12
 
13
13
  - `accessor`: this is the key from your data for the value you want rendered in that column
14
14
  - `label`: this is what will be rendered as the column header label
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableExpandedControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableExpandedControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //State for manually effecting what is expanded
39
39
  const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
@@ -53,7 +53,7 @@ const AdvancedTableExpandedControl = (props) => {
53
53
  {...props}
54
54
  />
55
55
  </div>
56
- );
57
- };
56
+ )
57
+ }
58
58
 
59
- export default AdvancedTableExpandedControl;
59
+ export default AdvancedTableExpandedControl
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
4
4
 
5
5
  const AdvancedTableInlineRowLoading = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableInlineRowLoading = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -52,7 +52,7 @@ const AdvancedTableInlineRowLoading = (props) => {
52
52
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
53
53
  </AdvancedTable>
54
54
  </div>
55
- );
56
- };
55
+ )
56
+ }
57
57
 
58
- export default AdvancedTableInlineRowLoading;
58
+ export default AdvancedTableInlineRowLoading
@@ -1,4 +1,4 @@
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].
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
2
 
3
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
4
 
@@ -1,7 +1,7 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../../"
3
3
  import { Button } from "../../"
4
- import { MOCK_DATA } from "./_mock_data";
4
+ import { MOCK_DATA } from "./_mock_data"
5
5
 
6
6
  const AdvancedTableLoading = (props) => {
7
7
 
@@ -37,7 +37,7 @@ const [isloading, setIsLoading] = useState(true)
37
37
  accessor: "graduatedStudents",
38
38
  label: "Graduated Students",
39
39
  },
40
- ];
40
+ ]
41
41
 
42
42
  return (
43
43
  <div>
@@ -54,7 +54,7 @@ const [isloading, setIsLoading] = useState(true)
54
54
  {...props}
55
55
  />
56
56
  </div>
57
- );
58
- };
57
+ )
58
+ }
59
59
 
60
- export default AdvancedTableLoading;
60
+ export default AdvancedTableLoading
@@ -1,3 +1,3 @@
1
1
  the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
2
2
 
3
- By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
3
+ By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSort = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSort = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  return (
39
39
  <div>
@@ -46,7 +46,7 @@ const AdvancedTableSort = (props) => {
46
46
  <AdvancedTable.Body />
47
47
  </AdvancedTable>
48
48
  </div>
49
- );
50
- };
49
+ )
50
+ }
51
51
 
52
- export default AdvancedTableSort;
52
+ export default AdvancedTableSort
@@ -1,6 +1,6 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React, { useState } from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSortControl = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSortControl = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //State for sort direction
39
39
  const [isSortDesc, setIsSortDesc] = useState({desc: false})
@@ -57,7 +57,7 @@ const AdvancedTableSortControl = (props) => {
57
57
  <AdvancedTable.Body />
58
58
  </AdvancedTable>
59
59
  </div>
60
- );
61
- };
60
+ )
61
+ }
62
62
 
63
- export default AdvancedTableSortControl;
63
+ export default AdvancedTableSortControl
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../.."
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableSubrowHeaders = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableSubrowHeaders = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  //Render the subRow header rows
39
39
  const subRowHeaders = ["Quarter", "Month", "Day"]
@@ -51,7 +51,7 @@ const AdvancedTableSubrowHeaders = (props) => {
51
51
  <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
52
52
  </AdvancedTable>
53
53
  </div>
54
- );
55
- };
54
+ )
55
+ }
56
56
 
57
- export default AdvancedTableSubrowHeaders;
57
+ export default AdvancedTableSubrowHeaders
@@ -1,3 +1,3 @@
1
1
  `subRowHeaders` 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.
2
2
 
3
- `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". 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 'headeer' by default.
3
+ `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` 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.
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableTableOptions = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableOptions = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  const tableOptions = {
39
39
  initialState: {
@@ -55,7 +55,7 @@ const AdvancedTableTableOptions = (props) => {
55
55
  {...props}
56
56
  />
57
57
  </div>
58
- );
59
- };
58
+ )
59
+ }
60
60
 
61
- export default AdvancedTableTableOptions;
61
+ export default AdvancedTableTableOptions
@@ -1,3 +1,3 @@
1
1
  The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit.
2
2
 
3
- In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
3
+ In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
@@ -1,6 +1,6 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
1
+ import React from "react"
2
+ import { AdvancedTable } from "../../"
3
+ import { MOCK_DATA } from "./_mock_data"
4
4
 
5
5
  const AdvancedTableTableProps = (props) => {
6
6
  const columnDefinitions = [
@@ -33,7 +33,7 @@ const AdvancedTableTableProps = (props) => {
33
33
  accessor: "graduatedStudents",
34
34
  label: "Graduated Students",
35
35
  },
36
- ];
36
+ ]
37
37
 
38
38
  const tableProps = {
39
39
  container: false,
@@ -49,7 +49,7 @@ const AdvancedTableTableProps = (props) => {
49
49
  {...props}
50
50
  />
51
51
  </div>
52
- );
53
- };
52
+ )
53
+ }
54
54
 
55
- export default AdvancedTableTableProps;
55
+ export default AdvancedTableTableProps
@@ -275,4 +275,4 @@ export const MOCK_DATA = [
275
275
  },
276
276
  ],
277
277
  },
278
- ];
278
+ ]