feat: add enabledRowHighlight to highlight the selected row

[nandobutzke]

Hello everyone,

Recently, while working on a project that involved the Table component alongside another component to visualize selected row data, I noticed the need for an easier way to highlight the selected row.

As a learning exercise, I implemented a new boolean property named enabledRowHighlight, which natively enables row highlighting. When this property is set on the Table component, it will automatically apply a background color to the selected row, improving visibility without additional manual handling.

Feedback and suggestions are very welcome. Let me know what you think!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rsuite-table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 27, 2025 2:18pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[Copilot]

Pull Request Overview

This PR introduces a new boolean property (enabledRowHighlight) for the Table component to automatically highlight the selected row. The key changes include adding the enabledRowHighlight prop and corresponding logic in Table.tsx, updating the row click handler to toggle highlighting, and adding documentation and an example for the new feature.

Reviewed Changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 1 comment.

File	Description
src/Table.tsx	Added the enabledRowHighlight prop and corresponding row highlight logic in the Table component
docs/index.tsx	Added a new example entry for enabled row highlighting
docs/examples/EnabledRowHighlightTable.md	Provided a usage example of the new row highlighting feature

Files not reviewed (2)

• src/less/table.less: Language not supported
• src/less/variables.less: Language not supported

[simonguo]

Hi @nandobutzke, If your goal is simply to highlight the selected row, you can easily achieve this using onRowClick and rowClassName. This approach is even more flexible, allowing for multiple row selection and custom selection styles.

<Table
  rowClassName={rowData => {
    if (rowData?.id === selectedRowId) {
      return 'selected-row';
    }
  }}
  onRowClick={data => {
    setSelectedRowId(data.id);
  }}
>
  ...
</Table>

Add CSS:

.rs-table-row.selected-row .rs-table-cell {
  background: red !important;
}

[nandobutzke]

Hi @nandobutzke, If your goal is simply to highlight the selected row, you can easily achieve this using onRowClick and rowClassName. This approach is even more flexible, allowing for multiple row selection and custom selection styles.

<Table
  rowClassName={rowData => {
    if (rowData?.id === selectedRowId) {
      return 'selected-row';
    }
  }}
  onRowClick={data => {
    setSelectedRowId(data.id);
  }}
>
  ...
</Table>

Add CSS:

.rs-table-row.selected-row .rs-table-cell {
  background: red !important;
}

Thanks for the reply, @simonguo! I recently used a similar approach. I'll be around in case you need any help, whether in this repository or another one from React Suite 🚀

[simonguo]

Thank you @nandobutzke
rsuite/rsuite#4228
React Suite is currently developing version 6, and one of the important tasks is adapting for mobile devices. If you're interested, you can help by checking for any issues and fixing them.