Skip to content

Add highlighting (on search / filter) to DataTable #328

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

Merged
merged 8 commits into from
Jun 21, 2016
Merged

Add highlighting (on search / filter) to DataTable #328

merged 8 commits into from
Jun 21, 2016

Conversation

tweettypography
Copy link
Contributor

@tweettypography tweettypography commented Jun 14, 2016

Requires react-highlighter, but is an optional addition to the library so a default build will not include the third-party library and projects which don't need the feature won't include it either.

Updates the design of Cell slightly to make higher-order components easier to create. Uses the new pattern to create a HighlightCell.

Allows DataTable props to cascade from table to column to cell.

Adds a Card story to use as an example use-case for highlighting. (Note that the story converts any filter input into a RegEx, while app developers should most likely use a more advanced "fuzzy," multi-column search, or even search on the server.)

Fixes #251

@tweettypography tweettypography temporarily deployed to design-system-react-com-pr-328 June 14, 2016 19:27 Inactive
@tweettypography tweettypography temporarily deployed to design-system-react-com-pr-328 June 14, 2016 19:54 Inactive
@tweettypography tweettypography temporarily deployed to design-system-react-com-pr-328 June 14, 2016 20:14 Inactive
@tweettypography tweettypography temporarily deployed to design-system-react-com-pr-328 June 14, 2016 20:25 Inactive
@tweettypography
Copy link
Contributor Author

tweettypography commented Jun 14, 2016

@interactivellama
Copy link
Contributor

screen shot 2016-06-16 at 3 24 22 pm

@tweettypography
Copy link
Contributor Author

@donnieberg @ivanbogdanov @minevskiy Would be interested in your thoughts on this. It's not a feature that is explicitly defined on the lightning design website but it is used throughout the core app and has been requested in designs. I made it completely optional and even though it has a third-party dependency that dependency is only included if you're actually using this optional feature.

@donnieberg
Copy link
Contributor

I really like this feature! I see it in a lot of our designs as well, and in general, it's very useful. The link to the herokuapp is broken..would you be able to repost?

@minevskiy
Copy link
Contributor

Looks great. SFX Dashboards have a similar highlighting in Lookup item labels (also using <mark>).
Will Highlighter be exported in components/index.js?

@tweettypography
Copy link
Contributor Author

@donnieberg The Heroku review app must have expired. I'm pushing an extra test now so that should kick it back on.

@minevskiy I'm not planning to add it to the index.js so that it can remain optional. Doesn't mean we couldn't add it in there in the future if it turned out to be a heavily used feature.

@tweettypography tweettypography temporarily deployed to design-system-react-com-pr-328 June 20, 2016 20:41 Inactive
@donnieberg
Copy link
Contributor

LGTM! :)

@donnieberg donnieberg merged commit eea01f7 into salesforce:master Jun 21, 2016
@donnieberg donnieberg self-assigned this Aug 16, 2017
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.

5 participants