React Data Grid - Selection

Data Grid Selection for Rows, Cells, and Columns

Select rows, cells, and columns using single, multiple, range, checkbox, and select-all selection modes. Support editing, navigation, and bulk data operations across the Data Grid.

No credit card required.

Try Our Live Demo

Trusted by the world's leading companies

Multiple rows highlighted together in a React Data Grid.

Select single or multiple rows

Select a single row, multiple rows, or a range of rows in the Data Grid to choose the records required for further actions. Use this feature when records need to be reviewed, compared, copied, updated, deleted, or exported.

Individual cells highlighted in a React Data Grid.

Select single or multiple cells

Select a single cell, multiple cells, or a range of cells in the Data Grid to work with selected data values. Use this feature when information across multiple cells needs to be reviewed, compared, copied, or updated.

A full column highlighted in a React Data Grid.

Select single or multiple columns

Select one or more columns in the Data Grid to work with field values across multiple records. Use this feature when data within a column needs to be reviewed, compared, or copied across records.

Checkboxes marking selected rows in a React Data Grid.

Select rows with checkboxes

Select all rows using the header checkbox or choose specific records using row checkboxes in the Data Grid. Use this feature when records need to be selected for reviewing, copying, deleting, or exporting.

Conditional row selection in a React Data Grid.

Conditional row selection

Select records using checkboxes in the Data Grid while restricting selection for records that do not meet specific criteria. Use this feature when only certain records should be available for selection.

Box selection in a React Data Grid.

Cell selection with box mode

Box selection allows multiple adjacent cells to be selected by dragging a selection rectangle across rows and columns. This provides a quick way to work with a cell range in a single action. Use box selection when multiple cell values need to be reviewed, copied, or processed together.

See Why Developers Love Syncfusion

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time. Here are some of their experiences.

Ivan G.

Business Application Developer

The best tool to operate grid-like data out there

Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.

Labeeb M.

Lead UI Developer

A Must-Have Tool for Fast Development with Top-Notch Support

We’ve been using Syncfusion Essential Studio for over 4 years, and it’s been a game-changer for our team. The components are incredibly versatile and cover almost every use case we’ve needed, from basic UI elements to complex Data Grids and charts. The ease of integration with our existing projects saved us countless hours during implementation. The documentation is straightforward, and even if we get stuck, their customer support team is super responsive—whether through live chat or tickets. We’ve raised nearly 50 tickets so far, and every single one was resolved quickly with clear solutions. The frequent updates with new features and improvements keep the library fresh and aligned with modern needs. It’s rare to find a tool that’s both powerful and easy to use, but Syncfusion nails it.

Frequently Asked Questions

✅ Does React Data Grid support multiple row selection?

The React Data Grid supports multiple row selection through keyboard shortcuts, checkbox selection, and range selection. These options help efficiently manage bulk actions across multiple records and data sets.

✅ Does the React Data Grid support keyboard navigation for selection?

Yes. The React Data Grid supports full keyboard navigation, allowing users to move between rows and cells using arrow keys and extend selections with Shift + Arrow keys.

✅ Does React Data Grid preserve selection after sorting and filtering?

Yes. Persistent selection maintains selected records during sorting, filtering, searching, and paging operations.

✅ How to enable selection in a React Data Grid?

Selection is enabled by default in the React Data Grid. The selection behavior can be customized using the selection settings property to support options such as single selection, multiple selection, checkbox selection, cell selection, and column selection.

✅ Is programmatic selection and deselection supported in React Data Grid?

Yes. The React Data Grid includes built-in methods to programmatically select, deselect, or clear selections based on application requirements.

✅ Can selection be restricted based on conditions in React Data Grid?

Yes. Conditional selection enables record selection to be restricted based on business rules and data conditions.

Resources

Learn more about Data Grid selection

Explore demos, KB articles, and documentation to get the most out of the Data Grid.

Documentation Explore guides, APIs, and quick-start tips

Example demos See live use cases in action

Community forum Ask, share, and connect with peers

Knowledge base articles Find solutions and best practices fast

Contact support Get expert help when needed

Feature requests and bug reports Track issues and suggest improvements

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Read Our Customer Stories

Industry

Software development

75% Cost reduction

50% Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story

Industry

Utilities (oil and gas)