Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

ashotmark
Copy link

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} />

Copy link

netlify bot commented Mar 21, 2024

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

Name Link
🔨 Latest commit d81dde7
🔍 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...

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
Copy link

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

@robotic-forest
Copy link

@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>}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants