search

jbetancur / react-data-table-component

A responsive table library with built-in sorting, pagination, selection, expandable rows, and customizable styling.
https://react-data-table-component.netlify.app
Apache License 2.0
2.03k stars 409 forks source link

Allow custom row container to wrap table row. #1218

Closed ashotmark closed 5 months ago

ashotmark commented 5 months ago

Note:

This is re-PR for the Allow custom row container as optional I send PR again because former PR was closed due to inactivity, but I think this is still worth to consider merge because this helps some projects and never impact to existing features. I rebased changes from upstream master, so this should be up to date.

Why

In some cases(in our project), we need row to be link, so that users are able to open in new tab or same tab by clicking row as their desired. In my checking all props, realized that's impossible.

What

I added new renderRow prop to DataTable as optional. if renderRow is missing, DataTable will work as currently. else if renderRow is present, this will be invoked to render rows for table.

Example

const renderRow = (row, rowContent) => <a key={row.id} href="/test">{rowContent}</a>
<DataTable ...existingProps renderRow={renderRow} />
netlify[bot] commented 5 months ago

Deploy Preview for react-data-table-component ready!

Name Link
Latest commit 657bfded7237a5a1f668908cfe60983520f105ca
Latest deploy log https://app.netlify.com/sites/react-data-table-component/deploys/65fc311dffba9e00089065ee
Deploy Preview https://deploy-preview-1218--react-data-table-component.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ashotmark commented 5 months ago

Close due to wrong PR