Add column.colSpan prop #2356

amanmahajan7 · 2021-04-13T18:15:26Z

colSpan?: (args: ColSpanArgs<TRow, TSummaryRow>) => number | undefined;

export type ColSpanArgs<R, SR> = {
  type: 'HEADER' | 'FILTER';
} | {
  type: 'ROW';
  row: R;
} | {
  type: 'SUMMARY';
  row: SR;
};

It can be used as

colSpan(args) {
  if (args.type === 'ROW') {
    if (key === '2' && args.row === 2) return 3;
    if (key === '4' && args.row === 4) return 6; // Will not work as colspan includes both frozen and regular columns
    if (key === '0' && args.row === 5) return 5;
    if (key === '27' && args.row === 8) return 3;
    if (key === '6' && args.row < 8) return 2;
  }
  if (args.type === 'HEADER' && key === '8') {
    return 3;
  }
  return undefined;
},

ekeuus · 2021-04-13T18:17:08Z

Why not go for a non-manually calculated api? #2350

amanmahajan7 · 2021-04-14T18:22:34Z

@ekeuus colSpan is a generic api that can handle any type of row so not just header. We can even have both apis if makes sense. Thank your for the header groups PR. We will review it soon

amanmahajan7 · 2021-04-16T21:36:10Z

src/DataGrid.tsx

@@ -279,6 +289,14 @@ function DataGrid<R, SR>({
    enableVirtualization
  });

+  const viewportColumns = useViewportColumns({


Had to split into two hooks as we need to calculate colspan for all the rows in the viewport. This is needed to ensure a column that spans a column in the viewport is also visible

amanmahajan7 · 2021-04-16T21:37:19Z

src/HeaderRow.tsx

  return (
    <div
      role="row"
      aria-rowindex={1} // aria-rowindex is 1 based
      className={headerRowClassname}
    >
      {columns.map(column => {
+        if (colSpan && colSpan > 1) {


Do not render cells in the colspan range

amanmahajan7 · 2021-04-16T21:38:35Z

src/hooks/useCalculatedColumns.ts

@@ -0,0 +1,252 @@
+import { useMemo } from 'react';


Same as previous useViewportColumns hook. I moved the last useMemo to the new useViewportColumns hook as it needs rows

amanmahajan7 · 2021-04-16T21:40:23Z

src/utils/index.ts

+  return colSpan;
+}
+
+function areColSpanColumnsCompatible<R, SR>(column: CalculatedColumn<R, SR>, viewportColumns: readonly CalculatedColumn<R, SR>[], colSpan: number) {


Ensure all the columns within the colspan range are either frozen or not

src/HeaderRow.tsx

src/Row.tsx

src/SummaryRow.tsx

src/utils/index.ts

stories/demos/CommonFeatures.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

src/utils/index.ts

src/Row.tsx

src/hooks/useViewportColumns.ts

Co-authored-by: Nicolas Stepien <[email protected]>

src/hooks/useViewportColumns.ts

src/utils/index.ts

test/column/colSpan.test.ts

Co-authored-by: Nicolas Stepien <[email protected]>

src/utils/index.ts

src/utils/selectedCellUtils.ts

nstepien

Maybe now is a good time to update the PR title

* Add column.colSpan prop * Change colSpan signature * Handle keyboard navigation * Add comments * Update example * Handle frozen columns * Handle header and summary rows * Update example * Update viewport columns to handle colspan * Add ColumnSpanning example * Cleanup cell selection logic * Update src/utils/index.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/utils/index.ts Co-authored-by: Nicolas Stepien <[email protected]> * Remove unused import * Check integer and non negative values * Move to cell selection logic to DataGrid * Update src/utils/index.ts Co-authored-by: Nicolas Stepien <[email protected]> * Tweak colors * Fix eslint warning * Split into two useMemos, fix startIdx * Check header and summary rows * Fix next position logic * Make sure cell is within bounds * Loop through columns once * Do not close flighting editor on enter/escape * Revert "Do not close flighting editor on enter/escape" This reverts commit fc6ed3d. * Add cellSpan tests * Remove colSpan number type * Optimize colSpan check * Test navigation * Fix types * Check filter row * Fix types * Update src/hooks/useCalculatedColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/types.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Quit loop when first startIdx is found * Re-export ColSpanArgs * Use lastFrozenColumnIndex to validate colSpan * Update src/hooks/useViewportColumns.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update src/utils/index.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update test/column/colSpan.test.ts Co-authored-by: Nicolas Stepien <[email protected]> * Update test/column/colSpan.test.ts Co-authored-by: Nicolas Stepien <[email protected]> * Add getCellsAtRowIndex util * Move nextPosition calculation logic to getNextSelectedCellPosition * column.colSpan can't be a number * Eslint * Typecheck * Reuse colIdx, add posIdx * Move posIdx outside * Add failing tests * Fix cell navigation Co-authored-by: Nicolas Stepien <[email protected]>

Add column.colSpan prop

aa82e54

Aman Mahajan added 5 commits April 13, 2021 13:17

Change colSpan signature

8e3c000

Handle keyboard navigation

ec27a71

Add comments

5895ccd

Update example

ac6fe76

Handle frozen columns

12a68f8

Aman Mahajan added 3 commits April 14, 2021 15:49

Handle header and summary rows

3b6bd13

Update example

9dd16f1

Update viewport columns to handle colspan

7eed169

amanmahajan7 commented Apr 16, 2021

View reviewed changes

amanmahajan7 marked this pull request as ready for review April 19, 2021 21:33

Add ColumnSpanning example

c08734f

nstepien reviewed Apr 20, 2021

View reviewed changes

Aman Mahajan and others added 5 commits April 20, 2021 08:54

Cleanup cell selection logic

6535db7

Update src/utils/index.ts

ace6346

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/utils/index.ts

8c5dc3e

Co-authored-by: Nicolas Stepien <[email protected]>

Remove unused import

0e69e0c

Check integer and non negative values

535b6a0

nstepien requested changes Apr 20, 2021

View reviewed changes

src/utils/index.ts Outdated Show resolved Hide resolved

src/Row.tsx Outdated Show resolved Hide resolved

src/Row.tsx Show resolved Hide resolved

src/hooks/useViewportColumns.ts Outdated Show resolved Hide resolved

Aman Mahajan and others added 9 commits April 20, 2021 10:46

Move to cell selection logic to DataGrid

f918583

Update src/utils/index.ts

54e4f53

Co-authored-by: Nicolas Stepien <[email protected]>

Tweak colors

13d28f1

Fix eslint warning

30fe74d

Split into two useMemos, fix startIdx

96416e2

Check header and summary rows

9b8b5bd

Fix next position logic

4a1461c

Make sure cell is within bounds

24a4ba9

Loop through columns once

aa7cd4a

amanmahajan7 and others added 5 commits April 21, 2021 10:40

Update src/hooks/useViewportColumns.ts

ade49d2

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/hooks/useViewportColumns.ts

39fb41c

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/hooks/useViewportColumns.ts

f3f3312

Co-authored-by: Nicolas Stepien <[email protected]>

Quit loop when first startIdx is found

35bcd3e

Re-export ColSpanArgs

65dbfca

nstepien reviewed Apr 21, 2021

View reviewed changes

Aman Mahajan and others added 6 commits April 21, 2021 12:10

Use lastFrozenColumnIndex to validate colSpan

88a8b7a

Update src/hooks/useViewportColumns.ts

6513d21

Co-authored-by: Nicolas Stepien <[email protected]>

Update src/utils/index.ts

832d268

Co-authored-by: Nicolas Stepien <[email protected]>

Update test/column/colSpan.test.ts

6780ecf

Co-authored-by: Nicolas Stepien <[email protected]>

Update test/column/colSpan.test.ts

4dc2f85

Co-authored-by: Nicolas Stepien <[email protected]>

Add getCellsAtRowIndex util

af36ec3

nstepien reviewed Apr 21, 2021

View reviewed changes

src/utils/index.ts Outdated Show resolved Hide resolved

Aman Mahajan added 4 commits April 21, 2021 12:43

Move nextPosition calculation logic to getNextSelectedCellPosition

7cf7009

column.colSpan can't be a number

b69af47

Eslint

860a25b

Typecheck

ea5e00e

nstepien previously approved these changes Apr 21, 2021

View reviewed changes

src/utils/selectedCellUtils.ts Outdated Show resolved Hide resolved

Reuse colIdx, add posIdx

5422f44

amanmahajan7 dismissed nstepien’s stale review via 5422f44 April 21, 2021 18:11

Aman Mahajan added 3 commits April 21, 2021 13:26

Move posIdx outside

2a49cf5

Add failing tests

c1922ec

Fix cell navigation

c5d8421

nstepien approved these changes Apr 21, 2021

View reviewed changes

amanmahajan7 changed the title ~~POC: ColSpan~~ Add ColSpan column prop Apr 21, 2021

amanmahajan7 changed the title ~~Add ColSpan column prop~~ Add column.colSpan prop Apr 21, 2021

amanmahajan7 merged commit 6b88e0c into canary Apr 21, 2021

amanmahajan7 deleted the am-col-span branch April 21, 2021 21:07

amanmahajan7 mentioned this pull request Apr 21, 2021

Fix scrolling on a merged cell #2368

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add column.colSpan prop #2356

Add column.colSpan prop #2356

amanmahajan7 commented Apr 13, 2021 •

edited by nstepien

Loading

ekeuus commented Apr 13, 2021

amanmahajan7 commented Apr 14, 2021

amanmahajan7 Apr 16, 2021

amanmahajan7 Apr 16, 2021

amanmahajan7 Apr 16, 2021 •

edited

Loading

amanmahajan7 Apr 16, 2021

nstepien left a comment

Add column.colSpan prop #2356

Add column.colSpan prop #2356

Conversation

amanmahajan7 commented Apr 13, 2021 • edited by nstepien Loading

ekeuus commented Apr 13, 2021

amanmahajan7 commented Apr 14, 2021

amanmahajan7 Apr 16, 2021

Choose a reason for hiding this comment

amanmahajan7 Apr 16, 2021

Choose a reason for hiding this comment

amanmahajan7 Apr 16, 2021 • edited Loading

Choose a reason for hiding this comment

amanmahajan7 Apr 16, 2021

Choose a reason for hiding this comment

nstepien left a comment

Choose a reason for hiding this comment

amanmahajan7 commented Apr 13, 2021 •

edited by nstepien

Loading

amanmahajan7 Apr 16, 2021 •

edited

Loading