Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grouping #2106

Merged
merged 98 commits into from
Sep 2, 2020
Merged

Grouping #2106

merged 98 commits into from
Sep 2, 2020

Conversation

amanmahajan7
Copy link
Contributor

@amanmahajan7 amanmahajan7 commented Jul 30, 2020

  • Finalize grouping API
    • Added groupBy, rowGrouper, and column.groupFormatter props
  • rowIdx is no longer in sync with rows as the grid groups the data internally. How should it be handled?
    • Using rawRows.indexOf(rows[rowIdx] as R) to get the correct index
  • Should dragging be allowed
    • Disabled dragging and copy/paste when grouping is enabled
  • Should we freeze the groupBy column?
    • groupBy columns are set as frozen columns and moved to the left (after the select column)
  • Add aria attributes for treegrid and fix arria-rowindex/aria-rowcount
  • Should both row and cell be selected on the group row?
    • Added row selection logic similar to the treegrid example

@amanmahajan7 amanmahajan7 marked this pull request as ready for review August 17, 2020 12:52
@amanmahajan7 amanmahajan7 self-assigned this Aug 18, 2020
/>
{dragHandleProps && (
<div className="rdg-cell-drag-handle" {...dragHandleProps} />
{!column.rowGroup && (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rendering an empty cell for groupBy columns

src/DataGrid.tsx Outdated
@@ -232,6 +238,9 @@ function DataGrid<R, K extends keyof R, SR>({
const [isDragging, setDragging] = useState(false);
const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);

// TODO: change it to props
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to change it to props as the the keys are generated internally. The format is grandParentKey__parentKey__key__so on

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it to props for now.

src/DataGrid.tsx Outdated
const hasGroups = groupBy.length > 0 && rowGrouper;

if (hasGroups) {
// TODO: finalize if these flags need to be supported on treegrid
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thoughts?

src/DataGrid.tsx Outdated
@@ -722,11 +785,41 @@ function DataGrid<R, K extends keyof R, SR>({
}

function getViewportRows() {
const rowElements = [];
// TODO: cleanup rowIndex/rowIdx logic
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to revisit to make sure the algorithm is correct. Check useViewportRows

({ startRowIndex } = row);
return (
<GroupRowRenderer<R, SR>
aria-level={row.level + 1} // aria-level is 1-based
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

// Select is always the first column
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;

function selectGroup() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.w3.org/TR/wai-aria-practices-1.1/examples/treegrid/treegrid-1.html

Check the Example Usage Options section. Should we focus on both rows and cells?

@@ -1,6 +1,7 @@
import React, { useState, useCallback, useMemo } from 'react';
import faker from 'faker';
import { AutoSizer } from 'react-virtualized';
import { groupBy as rowGrouper } from 'lodash';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will create a separate story after the review

src/utils/columnUtils.ts Outdated Show resolved Hide resolved
src/DataGrid.tsx Outdated Show resolved Hide resolved
src/DataGrid.tsx Outdated Show resolved Hide resolved
src/formatters/ToggleGroupFormatter.tsx Outdated Show resolved Hide resolved
src/formatters/ToggleGroupFormatter.less Outdated Show resolved Hide resolved
src/formatters/ToggleGroupFormatter.tsx Outdated Show resolved Hide resolved
src/formatters/ToggleGroupFormatter.less Outdated Show resolved Hide resolved
src/formatters/ToggleGroupFormatter.less Outdated Show resolved Hide resolved
src/types.ts Show resolved Hide resolved
src/utils/columnUtils.ts Show resolved Hide resolved
amanmahajan7 and others added 8 commits September 2, 2020 09:11
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
style/index.less Outdated Show resolved Hide resolved
stories/demos/Grouping.tsx Outdated Show resolved Hide resolved
stories/demos/Grouping.tsx Outdated Show resolved Hide resolved
});
}

return rows.sort((r1, r2) => r2.country.localeCompare(r1.country));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

src/GroupRow.tsx Outdated Show resolved Hide resolved
src/GroupCell.tsx Outdated Show resolved Hide resolved
amanmahajan7 and others added 6 commits September 2, 2020 12:42
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
@amanmahajan7 amanmahajan7 merged commit e8e950d into canary Sep 2, 2020
@amanmahajan7 amanmahajan7 deleted the am-group branch September 2, 2020 18:22
@amanmahajan7 amanmahajan7 restored the am-group branch June 28, 2021 21:12
@amanmahajan7 amanmahajan7 deleted the am-group branch July 22, 2021 13:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants