Allow custom row container to wrap table row with prefer tag or component

[ashotmark]

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]]

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

Name	Link
🔨 Latest commit	d81dde794f3d0bd35750c346e7af1d2fbad08e5d
🔍 Latest deploy log	https://app.netlify.com/sites/react-data-table-component/deploys/65fc31ee0142f00008a78b71
😎 Deploy Preview	https://deploy-preview-1219--react-data-table-component.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[robotic-forest]

Important feature for me as well, big ask from my users. Any blockers here? Happy to help test @jbetancur

[robotic-forest]

@ashotmark this feature works great. I'm using your forked version for now (hope you don't mind lol) and have had no problems. For anyone else seeing this, I'm just using it in next.js like this without any hiccups:

renderRow={(row: any, rowContent: any) => <Link key={row.id} href={`/appointments/${row.id}`}>{rowContent}</Link>}