playbook_ui 14.9.0 → 14.10.0.pre.rc.1

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: c7a7f25e68582acb4d819f3a13e444e023d5e9a95bff66d1db87ee30c8697cf8
4
- data.tar.gz: 4f818bdb6d0a5f7deb43dea03ec99fddc97b0fbfb0cefff7cae577eff2fcabac
3
+ metadata.gz: a26cbd63c991cfedbfa4219cb77eec222fa67ac6f81e08705a5507fff7ea902c
4
+ data.tar.gz: 63a8ddefb0ce22b71bfd792889947dcb0ab5591e3827e3f11605db87ad62135c
5
5
  SHA512:
6
- metadata.gz: 86090fdf6679c81084b2b9e1373730a97b8dbfcc16dd265bf798e6056d65b970aec7e4d70c7f4ad480136b4ee600d98a716ade5deb8ade445fd83e9a6f851ce8
7
- data.tar.gz: 6b04543f4665c4205c70f887a3ae02d1c7e264b97b0f76bd998320be0da33d067f14f3cce7e819e809b25780256366048a3afb5d6bf04b0d156ea0936b59ae7b
6
+ metadata.gz: 3ec47c76b5d3fe00e47ec13d4a685104ba2cdf183e2d26c62f21cfe74c4bb06659efadbcc6fecb855108506f7717c7f7c5db527e89a4894233cd7b3baea55abc
7
+ data.tar.gz: 6896c1afdc5da0aaf7ecb261c94bb6b326388f7ed027d9220dc41d95e96fcbcc2736ad69aaa3bbf9af023e29de27099dd5e1e4da34e214e40ba6722666e0b14e
@@ -7,6 +7,7 @@ import {
7
7
  createColumnHelper,
8
8
  getCoreRowModel,
9
9
  getExpandedRowModel,
10
+ getPaginationRowModel,
10
11
  getSortedRowModel,
11
12
  Row,
12
13
  useReactTable,
@@ -25,6 +26,7 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
25
26
  import { CustomCell } from "./Components/CustomCell"
26
27
  import { TableHeader } from "./SubKits/TableHeader"
27
28
  import { TableBody } from "./SubKits/TableBody"
29
+ import Pagination from "../pb_pagination/_pagination"
28
30
 
29
31
  type AdvancedTableProps = {
30
32
  aria?: { [key: string]: string }
@@ -42,6 +44,8 @@ type AdvancedTableProps = {
42
44
  loading?: boolean | string
43
45
  onRowToggleClick?: (arg: Row<GenericObject>) => void
44
46
  onToggleExpansionClick?: (arg: Row<GenericObject>) => void
47
+ pagination?: boolean,
48
+ paginationProps?: GenericObject
45
49
  responsive?: "scroll" | "none",
46
50
  sortControl?: GenericObject
47
51
  tableData: GenericObject[]
@@ -67,6 +71,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
67
71
  loading,
68
72
  onRowToggleClick,
69
73
  onToggleExpansionClick,
74
+ pagination = false,
75
+ paginationProps,
70
76
  responsive = "scroll",
71
77
  sortControl,
72
78
  tableData,
@@ -177,6 +183,17 @@ const AdvancedTable = (props: AdvancedTableProps) => {
177
183
  }
178
184
  }
179
185
 
186
+ const paginationInitializer = pagination ? {
187
+ getPaginationRowModel: getPaginationRowModel(),
188
+ paginateExpandedRows: false,
189
+ initialState: {
190
+ pagination: {
191
+ pageIndex: paginationProps?.pageIndex ?? 0,
192
+ pageSize: paginationProps?.pageSize ?? 20,
193
+ },
194
+ },
195
+ } : {}
196
+
180
197
  //initialize table
181
198
  const table = useReactTable({
182
199
  data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
@@ -189,6 +206,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
189
206
  enableSortingRemoval: false,
190
207
  sortDescFirst: true,
191
208
  ...expandAndSortState(),
209
+ ... paginationInitializer,
192
210
  ...tableOptions,
193
211
  })
194
212
 
@@ -227,6 +245,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
227
245
  className
228
246
  )
229
247
 
248
+ const onPageChange = (page: number) => {
249
+ table.setPageIndex(page - 1)
250
+ }
251
+
230
252
  return (
231
253
  <div {...ariaProps}
232
254
  {...dataProps}
@@ -250,23 +272,45 @@ const AdvancedTable = (props: AdvancedTableProps) => {
250
272
  toggleExpansionIcon,
251
273
  }}
252
274
  >
253
- <Table
254
- className={`${loading ? "content-loading" : ""}`}
255
- dark={dark}
256
- dataTable
257
- numberSpacing="tabular"
258
- responsive="none"
259
- {...tableProps}
260
- >
261
- {children ? (
262
- children
263
- ) : (
264
- <>
265
- <TableHeader />
266
- <TableBody />
267
- </>
268
- )}
269
- </Table>
275
+ <>
276
+ {pagination &&
277
+ <Pagination
278
+ current={table.getState().pagination.pageIndex + 1}
279
+ key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
280
+ marginBottom="xs"
281
+ onChange={onPageChange}
282
+ range={paginationProps?.range ? paginationProps?.range : 5}
283
+ total={table.getPageCount()}
284
+ />
285
+ }
286
+ <Table
287
+ className={`${loading ? "content-loading" : ""}`}
288
+ dark={dark}
289
+ dataTable
290
+ numberSpacing="tabular"
291
+ responsive="none"
292
+ {...tableProps}
293
+ >
294
+ {children ? (
295
+ children
296
+ ) : (
297
+ <>
298
+ <TableHeader />
299
+ <TableBody />
300
+ </>
301
+ )}
302
+ </Table>
303
+ {pagination &&
304
+ <Pagination
305
+ current={table.getState().pagination.pageIndex + 1}
306
+ key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
307
+ marginTop="xs"
308
+ onChange={onPageChange}
309
+ range={paginationProps?.range ? paginationProps?.range : 5}
310
+ total={table.getPageCount()}
311
+ />
312
+ }
313
+ </>
270
314
  </AdvancedTableContext.Provider>
271
315
  </div>
272
316
  )
@@ -0,0 +1,50 @@
1
+ import React from "react"
2
+ import { AdvancedTable } from "playbook-ui"
3
+ import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
4
+
5
+ const AdvancedTablePagination = (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
+ <>
40
+ <AdvancedTable
41
+ columnDefinitions={columnDefinitions}
42
+ pagination
43
+ tableData={PAGINATION_MOCK_DATA}
44
+ {...props}
45
+ />
46
+ </>
47
+ )
48
+ }
49
+
50
+ export default AdvancedTablePagination
@@ -0,0 +1 @@
1
+ `pagination` is an optional prop that can be used to add pagination to the AdvancedTable. If present, it will add pagination with default values for pageSize, etc. To customize pagination, you can also use `paginationProps` shown in the next example.
@@ -0,0 +1,57 @@
1
+ import React from "react"
2
+ import { AdvancedTable } from "playbook-ui"
3
+ import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
4
+
5
+ const AdvancedTablePaginationWithProps = (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
+ const paginationProps = {
39
+ pageIndex: 1,
40
+ pageSize: 10,
41
+ range: 2
42
+ }
43
+
44
+ return (
45
+ <>
46
+ <AdvancedTable
47
+ columnDefinitions={columnDefinitions}
48
+ pagination
49
+ paginationProps={paginationProps}
50
+ tableData={PAGINATION_MOCK_DATA}
51
+ {...props}
52
+ />
53
+ </>
54
+ )
55
+ }
56
+
57
+ export default AdvancedTablePaginationWithProps
@@ -0,0 +1,5 @@
1
+ `paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
2
+
3
+ - `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
4
+ - `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
5
+ - `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'