Skip to content

Commit 11b6321

Browse files
vberschvbersch
authored
fix(AnalyticalTable): fix sorting with minRows (#327)
1 parent 43fa5ea commit 11b6321

File tree

3 files changed

+98
-72
lines changed

3 files changed

+98
-72
lines changed

‎packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap‎

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4079,78 +4079,9 @@ exports[`AnalyticalTable test Asc desc 3`] = `
40794079
>
40804080
<div
40814081
aria-rowindex="0"
4082-
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4083-
role="row"
4084-
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
4085-
>
4086-
<div
4087-
class="AnalyticalTable--tableCell-"
4088-
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4089-
/>
4090-
<div
4091-
class="AnalyticalTable--tableCell-"
4092-
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4093-
/>
4094-
<div
4095-
class="AnalyticalTable--tableCell-"
4096-
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4097-
/>
4098-
<div
4099-
class="AnalyticalTable--tableCell-"
4100-
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4101-
/>
4102-
</div>
4103-
<div
4104-
aria-rowindex="1"
4105-
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4106-
role="row"
4107-
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
4108-
>
4109-
<div
4110-
class="AnalyticalTable--tableCell-"
4111-
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4112-
/>
4113-
<div
4114-
class="AnalyticalTable--tableCell-"
4115-
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4116-
/>
4117-
<div
4118-
class="AnalyticalTable--tableCell-"
4119-
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4120-
/>
4121-
<div
4122-
class="AnalyticalTable--tableCell-"
4123-
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4124-
/>
4125-
</div>
4126-
<div
4127-
aria-rowindex="2"
4128-
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4129-
role="row"
4130-
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
4131-
>
4132-
<div
4133-
class="AnalyticalTable--tableCell-"
4134-
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4135-
/>
4136-
<div
4137-
class="AnalyticalTable--tableCell-"
4138-
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4139-
/>
4140-
<div
4141-
class="AnalyticalTable--tableCell-"
4142-
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4143-
/>
4144-
<div
4145-
class="AnalyticalTable--tableCell-"
4146-
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4147-
/>
4148-
</div>
4149-
<div
4150-
aria-rowindex="3"
41514082
class="AnalyticalTable--tr-"
41524083
role="row"
4153-
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
4084+
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%;"
41544085
>
41554086
<div
41564087
class="AnalyticalTable--tableCell-"
@@ -4202,10 +4133,10 @@ exports[`AnalyticalTable test Asc desc 3`] = `
42024133
</div>
42034134
</div>
42044135
<div
4205-
aria-rowindex="4"
4136+
aria-rowindex="1"
42064137
class="AnalyticalTable--tr-"
42074138
role="row"
4208-
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
4139+
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%;"
42094140
>
42104141
<div
42114142
class="AnalyticalTable--tableCell-"
@@ -4256,6 +4187,75 @@ exports[`AnalyticalTable test Asc desc 3`] = `
42564187
</span>
42574188
</div>
42584189
</div>
4190+
<div
4191+
aria-rowindex="2"
4192+
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4193+
role="row"
4194+
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%;"
4195+
>
4196+
<div
4197+
class="AnalyticalTable--tableCell-"
4198+
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4199+
/>
4200+
<div
4201+
class="AnalyticalTable--tableCell-"
4202+
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4203+
/>
4204+
<div
4205+
class="AnalyticalTable--tableCell-"
4206+
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4207+
/>
4208+
<div
4209+
class="AnalyticalTable--tableCell-"
4210+
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4211+
/>
4212+
</div>
4213+
<div
4214+
aria-rowindex="3"
4215+
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4216+
role="row"
4217+
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%;"
4218+
>
4219+
<div
4220+
class="AnalyticalTable--tableCell-"
4221+
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4222+
/>
4223+
<div
4224+
class="AnalyticalTable--tableCell-"
4225+
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4226+
/>
4227+
<div
4228+
class="AnalyticalTable--tableCell-"
4229+
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4230+
/>
4231+
<div
4232+
class="AnalyticalTable--tableCell-"
4233+
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4234+
/>
4235+
</div>
4236+
<div
4237+
aria-rowindex="4"
4238+
class="AnalyticalTable--tr- AnalyticalTable--emptyRow-"
4239+
role="row"
4240+
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%;"
4241+
>
4242+
<div
4243+
class="AnalyticalTable--tableCell-"
4244+
style="position: absolute; top: 0px; left: 0px; width: 150px; align-items: center;"
4245+
/>
4246+
<div
4247+
class="AnalyticalTable--tableCell-"
4248+
style="position: absolute; top: 0px; left: 150px; width: 150px; align-items: center;"
4249+
/>
4250+
<div
4251+
class="AnalyticalTable--tableCell-"
4252+
style="position: absolute; top: 0px; left: 300px; width: 150px; align-items: center;"
4253+
/>
4254+
<div
4255+
class="AnalyticalTable--tableCell-"
4256+
style="position: absolute; top: 0px; left: 450px; width: 150px; align-items: center;"
4257+
/>
4258+
</div>
42594259
</div>
42604260
</div>
42614261
</div>

‎packages/main/src/components/AnalyticalTable/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import { VirtualTableBody } from './virtualization/VirtualTableBody';
5454
import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths';
5555
import { TableScaleWidthMode } from '../../enums/TableScaleWidthMode';
5656
import { useColumnsDependencies } from './hooks/useColumnsDependencies';
57+
import { orderByFn } from './util';
5758

5859
export interface ColumnConfiguration extends Column {
5960
accessor?: string;
@@ -199,6 +200,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
199200
columns,
200201
data,
201202
defaultColumn: DefaultColumn,
203+
orderByFn,
202204
getSubRows,
203205
stateReducer,
204206
webComponentsReactProperties: {

‎packages/main/src/components/AnalyticalTable/util/index.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { defaultOrderByFn } from 'react-table';
2+
3+
export const orderByFn = (rows, functions, directions) => {
4+
const wrapSortFn = (sortFn, index) => {
5+
const desc = directions[index] === false || directions[index] === 'desc';
6+
7+
return (rowA, rowB) => {
8+
if (rowA.original?.emptyRow && !rowB.original?.emptyRow) {
9+
return desc ? -1 : 1;
10+
}
11+
if (!rowA.original?.emptyRow && rowB.original?.emptyRow) {
12+
return desc ? 1 : -1;
13+
}
14+
if (rowA.original?.emptyRow && rowB.original?.emptyRow) {
15+
return 0;
16+
}
17+
return sortFn(rowA, rowB);
18+
};
19+
};
20+
21+
const wrappedSortfunctions = functions.map(wrapSortFn);
22+
23+
return defaultOrderByFn(rows, wrappedSortfunctions, directions);
24+
};

0 commit comments

Comments
 (0)