mi6 / mi6/ic-ui-kit

Display count of how many rows are selected on a data table

Open
#3,626 1 comment 0 reactions 0 assignees View on GitHub
data-table component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary
Display an indication of how many rows are selected on a data table when using `rowSelection`.

Design task to consider this functionality.

### 💬 Description
When using the `rowSelection` functionality ([website example](https://design.sis.gov.uk/components/data-table/code#select-rows)), I think it would be useful to show a count of how many rows are selected. E.g. "3 out of 10 rows selected".

This would be particularly useful when using pagination, because currently, the "select all" checkbox only selects all rows on the current page. Some users may not realise this, but if a count of selected rows was visible, it would be clearer, because it would say e.g. "10 out of 40 rows selected".

Also, a user may want to select a certain number rows. They would have to count them one by one rather than just reading a number.

### 💰 Use value
To help avoid confusion with "select all" and allow users to quickly see how many rows they have selected.

Contributor guide

Open the contributing guide

Research direction

Start with the linked data-table rowSelection example and review how selection behaves across pagination. No implementation file or test is named; done would require an agreed design and a visible selected-row count that makes the current selection scope clear.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.