@@ -60,23 +60,40 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
60
60
private renderHeadCell = ( ) => {
61
61
const { data, selectedIds} = this . props ;
62
62
let disabled = true ;
63
- let checked = data . every ( ( item , index ) => {
63
+ let indeterminate = false ;
64
+ let checked = true ;
65
+ data . forEach ( ( item , index ) => {
64
66
if ( this . isDisabled ( item , index ) ) {
65
- return true ;
67
+ return ;
66
68
} else {
67
69
disabled = false ;
68
70
}
69
71
70
72
const id = Table . getRowId ( this . props , item , index ) ;
73
+ const itemChecked = selectedIds . includes ( id ) ;
71
74
72
- return selectedIds . includes ( id ) ;
75
+ if ( itemChecked ) {
76
+ indeterminate = true ;
77
+ } else {
78
+ checked = false ;
79
+ }
73
80
} ) ;
74
81
82
+ if ( checked ) {
83
+ indeterminate = false ;
84
+ }
85
+
75
86
if ( disabled ) {
76
87
checked = false ;
88
+ indeterminate = false ;
77
89
}
78
90
79
- return this . renderCheckBox ( { disabled, checked, handler : this . handleAllCheckBoxUpdate } ) ;
91
+ return this . renderCheckBox ( {
92
+ disabled,
93
+ checked,
94
+ handler : this . handleAllCheckBoxUpdate ,
95
+ indeterminate,
96
+ } ) ;
80
97
} ;
81
98
82
99
private renderBodyCell = ( item : I , index : number ) => {
@@ -95,15 +112,18 @@ export function withTableSelection<I extends TableDataItem, E extends {} = {}>(
95
112
disabled,
96
113
checked,
97
114
handler,
115
+ indeterminate,
98
116
} : {
99
117
checked : boolean ;
100
118
disabled : boolean ;
101
119
handler : React . ChangeEventHandler < HTMLInputElement > ;
120
+ indeterminate ?: boolean ; //only for header cell checkbox
102
121
} ) {
103
122
return (
104
123
< Checkbox
105
124
size = "l"
106
125
checked = { checked }
126
+ indeterminate = { indeterminate }
107
127
disabled = { disabled }
108
128
onChange = { handler }
109
129
className = { b ( 'selection-checkbox' , {
0 commit comments