Skip to content

Commit acb40da

Browse files
nidaqgnidaqg
committed
Checkbox in header
1 parent 67bf0d2 commit acb40da

File tree

6 files changed

+335
-20
lines changed

6 files changed

+335
-20
lines changed

‎playbook/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useContext } from "react"
22
import classnames from "classnames"
3-
import { flexRender, Header } from "@tanstack/react-table"
3+
import { flexRender, Header, Table } from "@tanstack/react-table"
44

55
import { GenericObject } from "../../types"
66

77
import { GlobalProps } from "../../utilities/globalProps"
88

99
import Flex from "../../pb_flex/_flex"
10+
import Checkbox from "../../pb_checkbox/_checkbox"
1011

1112
import { SortIconButton } from "./SortIconButton"
1213
import { ToggleIconButton } from "./ToggleIconButton"
@@ -24,6 +25,7 @@ type TableHeaderCellProps = {
2425
isPinnedLeft?: boolean
2526
loading?: boolean
2627
sortIcon?: string | string[]
28+
table?: Table<GenericObject>
2729
} & GlobalProps
2830

2931
export const TableHeaderCell = ({
@@ -35,8 +37,9 @@ export const TableHeaderCell = ({
3537
isPinnedLeft = false,
3638
loading,
3739
sortIcon,
40+
table
3841
}: TableHeaderCellProps) => {
39-
const { sortControl, responsive } = useContext(AdvancedTableContext)
42+
const { sortControl, responsive, selectableRows } = useContext(AdvancedTableContext)
4043

4144
const toggleSortButton = (event: React.SyntheticEvent) => {
4245
if (sortControl) {
@@ -104,6 +107,16 @@ const justifyHeader = isLeafColumn ? "end" : "center"
104107
alignItems="center"
105108
justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
106109
>
110+
{
111+
selectableRows && header?.index === 0 && (
112+
<Checkbox
113+
checked={table.getIsAllRowsSelected()}
114+
indeterminate={table.getIsSomeRowsSelected()}
115+
name={table.id}
116+
onChange={table.getToggleAllRowsSelectedHandler()}
117+
/>
118+
)
119+
}
107120
{isToggleExpansionEnabled && (
108121
<ToggleIconButton onClick={handleExpandOrCollapse} />
109122
)}

‎playbook/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const TableHeader = ({
6565
key={`${header.id}-header`}
6666
loading={loading}
6767
sortIcon={sortIcon}
68+
table={table}
6869
/>
6970
)
7071
})}

‎playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -234,8 +234,9 @@ const AdvancedTable = (props: AdvancedTableProps) => {
234234
enableSortingRemoval: false,
235235
sortDescFirst: true,
236236
onRowSelectionChange: setRowSelection,
237+
getRowId: selectableRows ? row => row.id : undefined,
237238
...customState(),
238-
... paginationInitializer,
239+
...paginationInitializer,
239240
...tableOptions,
240241
})
241242

@@ -305,6 +306,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
305306
sortControl,
306307
table,
307308
toggleExpansionIcon,
309+
selectableRows
308310
}}
309311
>
310312
<>

‎playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react"
22
import { AdvancedTable } from "playbook-ui"
3-
import MOCK_DATA from "./advanced_table_mock_data.json"
3+
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
44

55
const AdvancedTableSelectableRows = (props) => {
66
const columnDefinitions = [

‎playbook/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_with_id.json

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
[
2+
{
3+
"year": "2021",
4+
"id": "1",
5+
"quarter": null,
6+
"month": null,
7+
"day": null,
8+
"newEnrollments": "20",
9+
"scheduledMeetings": "10",
10+
"attendanceRate": "51%",
11+
"completedClasses": "3",
12+
"classCompletionRate": "33%",
13+
"graduatedStudents": "19",
14+
"children": [
15+
{
16+
"year": "2021",
17+
"id": "2",
18+
"quarter": "Q1",
19+
"month": null,
20+
"day": null,
21+
"newEnrollments": "2",
22+
"scheduledMeetings": "35",
23+
"attendanceRate": "32%",
24+
"completedClasses": "15",
25+
"classCompletionRate": "52%",
26+
"graduatedStudents": "36",
27+
"children": [
28+
{
29+
"year": "2021",
30+
"id": "3",
31+
"quarter": "Q1",
32+
"month": "January",
33+
"day": null,
34+
"newEnrollments": "16",
35+
"scheduledMeetings": "20",
36+
"attendanceRate": "11%",
37+
"completedClasses": "13",
38+
"classCompletionRate": "47%",
39+
"graduatedStudents": "28",
40+
"children": [
41+
{
42+
"year": "2021",
43+
"id": "4",
44+
"quarter": "Q1",
45+
"month": "January",
46+
"day": "10",
47+
"newEnrollments": "34",
48+
"scheduledMeetings": "28",
49+
"attendanceRate": "97%",
50+
"completedClasses": "20",
51+
"classCompletionRate": "15%",
52+
"graduatedStudents": "17"
53+
},
54+
{
55+
"year": "2021",
56+
"id": "5",
57+
"quarter": "Q1",
58+
"month": "January",
59+
"day": "20",
60+
"newEnrollments": "43",
61+
"scheduledMeetings": "23",
62+
"attendanceRate": "66%",
63+
"completedClasses": "26",
64+
"classCompletionRate": "47%",
65+
"graduatedStudents": "9"
66+
}
67+
]
68+
},
69+
{
70+
"year": "2021",
71+
"id": "6",
72+
"quarter": "Q1",
73+
"month": "February",
74+
"day": null,
75+
"newEnrollments": "20",
76+
"scheduledMeetings": "41",
77+
"attendanceRate": "95%",
78+
"completedClasses": "26",
79+
"classCompletionRate": "83%",
80+
"graduatedStudents": "43",
81+
"children": [
82+
{
83+
"year": "2021",
84+
"id": "7",
85+
"quarter": "Q1",
86+
"month": "February",
87+
"day": "15",
88+
"newEnrollments": "19",
89+
"scheduledMeetings": "35",
90+
"attendanceRate": "69%",
91+
"completedClasses": "8",
92+
"classCompletionRate": "75%",
93+
"graduatedStudents": "23"
94+
}
95+
]
96+
}
97+
]
98+
}
99+
]
100+
},
101+
{
102+
"year": "2022",
103+
"id": "8",
104+
"quarter": null,
105+
"month": null,
106+
"day": null,
107+
"newEnrollments": "25",
108+
"scheduledMeetings": "17",
109+
"attendanceRate": "75%",
110+
"completedClasses": "5",
111+
"classCompletionRate": "45%",
112+
"graduatedStudents": "32",
113+
"children": [
114+
{
115+
"year": "2022",
116+
"id": "9",
117+
"quarter": "Q1",
118+
"month": null,
119+
"day": null,
120+
"newEnrollments": "2",
121+
"scheduledMeetings": "35",
122+
"attendanceRate": "32%",
123+
"completedClasses": "15",
124+
"classCompletionRate": "52%",
125+
"graduatedStudents": "36",
126+
"children": [
127+
{
128+
"year": "2022",
129+
"id": "10",
130+
"quarter": "Q1",
131+
"month": "January",
132+
"day": null,
133+
"newEnrollments": "16",
134+
"scheduledMeetings": "20",
135+
"attendanceRate": "11%",
136+
"completedClasses": "13",
137+
"classCompletionRate": "47%",
138+
"graduatedStudents": "28",
139+
"children": [
140+
{
141+
"year": "2022",
142+
"id": "11",
143+
"quarter": "Q1",
144+
"month": "January",
145+
"day": "15",
146+
"newEnrollments": "34",
147+
"scheduledMeetings": "28",
148+
"attendanceRate": "97%",
149+
"completedClasses": "20",
150+
"classCompletionRate": "15%",
151+
"graduatedStudents": "17"
152+
},
153+
{
154+
"year": "2022",
155+
"id": "12",
156+
"quarter": "Q1",
157+
"month": "January",
158+
"day": "25",
159+
"newEnrollments": "43",
160+
"scheduledMeetings": "23",
161+
"attendanceRate": "66%",
162+
"completedClasses": "26",
163+
"classCompletionRate": "47%",
164+
"graduatedStudents": "9"
165+
}
166+
]
167+
},
168+
{
169+
"year": "2022",
170+
"id": "13",
171+
"quarter": "Q1",
172+
"month": "May",
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": "2022",
183+
"id": "14",
184+
"quarter": "Q1",
185+
"month": "May",
186+
"day": "2",
187+
"newEnrollments": "19",
188+
"scheduledMeetings": "35",
189+
"attendanceRate": "69%",
190+
"completedClasses": "8",
191+
"classCompletionRate": "75%",
192+
"graduatedStudents": "23"
193+
}
194+
]
195+
}
196+
]
197+
}
198+
]
199+
},
200+
{
201+
"year": "2023",
202+
"id": "15",
203+
"quarter": null,
204+
"month": null,
205+
"day": null,
206+
"newEnrollments": "10",
207+
"scheduledMeetings": "15",
208+
"attendanceRate": "65%",
209+
"completedClasses": "4",
210+
"classCompletionRate": "49%",
211+
"graduatedStudents": "29",
212+
"children": [
213+
{
214+
"year": "2023",
215+
"id": "16",
216+
"quarter": "Q1",
217+
"month": null,
218+
"day": null,
219+
"newEnrollments": "2",
220+
"scheduledMeetings": "35",
221+
"attendanceRate": "32%",
222+
"completedClasses": "15",
223+
"classCompletionRate": "52%",
224+
"graduatedStudents": "36",
225+
"children": [
226+
{
227+
"year": "2023",
228+
"id": "17",
229+
"quarter": "Q1",
230+
"month": "March",
231+
"day": null,
232+
"newEnrollments": "16",
233+
"scheduledMeetings": "20",
234+
"attendanceRate": "11%",
235+
"completedClasses": "13",
236+
"classCompletionRate": "47%",
237+
"graduatedStudents": "28",
238+
"children": [
239+
{
240+
"year": "2023",
241+
"id": "18",
242+
"quarter": "Q1",
243+
"month": "March",
244+
"day": "10",
245+
"newEnrollments": "34",
246+
"scheduledMeetings": "28",
247+
"attendanceRate": "97%",
248+
"completedClasses": "20",
249+
"classCompletionRate": "15%",
250+
"graduatedStudents": "17"
251+
},
252+
{
253+
"year": "2023",
254+
"id": "19",
255+
"quarter": "Q1",
256+
"month": "March",
257+
"day": "11",
258+
"newEnrollments": "43",
259+
"scheduledMeetings": "23",
260+
"attendanceRate": "66%",
261+
"completedClasses": "26",
262+
"classCompletionRate": "47%",
263+
"graduatedStudents": "9"
264+
}
265+
]
266+
},
267+
{
268+
"year": "2023",
269+
"id": "20",
270+
"quarter": "Q1",
271+
"month": "April",
272+
"day": null,
273+
"newEnrollments": "20",
274+
"scheduledMeetings": "41",
275+
"attendanceRate": "95%",
276+
"completedClasses": "26",
277+
"classCompletionRate": "83%",
278+
"graduatedStudents": "43",
279+
"children": [
280+
{
281+
"year": "2023",
282+
"id": "21",
283+
"quarter": "Q1",
284+
"month": "April",
285+
"day": "15",
286+
"newEnrollments": "19",
287+
"scheduledMeetings": "35",
288+
"attendanceRate": "69%",
289+
"completedClasses": "8",
290+
"classCompletionRate": "75%",
291+
"graduatedStudents": "23"
292+
}
293+
]
294+
}
295+
]
296+
}
297+
]
298+
}
299+
]

0 commit comments

Comments
 (0)