Comments (5)
Hi,
For such cases I usually use a value-based column with a custom component (that renders an icon based on the value). The actual value of the column is a number, string, or a boolean so the sorting should work. Does that make sense?
Can you post a code example of what you are doing, and I'll take a closer look?
from sematable.
Thanks Amir,
What I'm doing is simply render an icon in the column if some condition is true (that a value has been changed in an editable cell), so my table render includes the following line for the cell:
<td className="narrowfield"><i className={changedCellClassname} aria-label={ariaChangedLabel}/>
and here's the preparatory code:
const changedCellClassname = thisvalue !== originalValue ? "fa fa-asterisk fa-fw" : ""
const ariaChangedLabel = thisgrade !== originalValue ? "changed" : ""
How would you give a value to the column? I've tried adding a element in the same with an associated value of "Yes" or "No" but unfortunately somehow this got me into an infinite rendering loop :-(. Would love to see your specific suggestion. Thanks!
from sematable.
Hi @pgoldweic,
Here's how I would do that. In the data I provide to the table there should be a field with true/false value. It doesn't matter if this field is part of original data, or if it's a computed field (with something like reselect). I would define a column for this field, and use a custom YesNo component that renders "Yes" or "No" depending on field value.
The column definition would look like this:
{
key: 'confirmed',
header: 'Confirmed',
Component: YesNo,
sortable: true,
}
We actually have an example in stories that uses this, so you can take a look at YesNo component as well. This is used in the UsersTable example.
That's it, since the column is marked as sortable, and it has a true/false value, it should be possible to click on the header to sort by that column.
I hope that helps!
from sematable.
I actually render the table myself, so I would not create a column as the one you show above, since I'm not using Sematable's own Table component to render, so your example doesn't quite apply. I believe you seem to be suggesting that the sorter sorts on column 'value' but not on rendered contents, correct? And also, would my equivalent to the 'Yes/No' component render either an icon or nothing (instead of the Yes/No?). If I understand correctly, this is how I would integrate my problem with your suggested solution.
Assuming your answer to my questions is YES, I still run into an infinite rendering loop when I try to do this, even when I extend my original data to contain this extra boolean value :-(. Can you point me to an example that also does the table rendering from scratch (like mine) and accomplishes this goal?
This is how I'm rendering the field in the table:
<td ><YesNo children={line.changed} /></td>
note: I've also tried the following:
<td><YesNo>{line.changed}</YesNo></td>
while the header is:
<SortableHeader {...changed} />
where 'line' is in scope (within a map loop) and contains the current line (object) in my data (array), the changed field is a boolean, and the 'changed' object represents the 'changed' header as defined in my array of headers:
changed: {sortKey: "changed", name: "changed",
title: "Whether you have changed your grade"},
with a corresponding column as follows:
{key: 'changed', header: 'Changed', sortable: true, title:
"Whether you have changed your grade"},
Not sure where the problem is that causes the infinite rendering loop :-(
from sematable.
An update: turns out that now that I've added the extra 'changed' boolean field to my data objects, using my original code does in fact sort the icon column, without the need to use any other component to render the icon.
So I've gone back to render the field as follows:
<td className="narrowfield"><i className={changedCellClassname} /></td>
where changedCellClassname is either "" or "fa fa-asterisk fa-fw" depending on the value (the second is what's needed to render the icon).
And this is in fact now sorting the column! Can you tell what is that makes this code work but the one above (with the YesNo component) not?
Anyway, thanks for suggesting that I add the additional field. I think this probably was the key to the solution.
from sematable.
Related Issues (20)
- Storybook example full of Errors HOT 1
- Consider using deep equality checks for data
- Add an online demo? HOT 4
- Need one example of the following... HOT 1
- Custom properties for components? HOT 1
- Table without Primary key HOT 2
- Add support for multiple primaryKey columns
- Showing Incorrect page size HOT 1
- Getting Filtered Data HOT 8
- Text Search not working HOT 1
- Possible to add available actions? HOT 1
- can 'sortKey' be a function? HOT 3
- how can I specify a default page size of 'All'? HOT 4
- How can we use SemaTable using MaterialUi Components HOT 1
- Unable to use component column HOT 2
- Implement better paging for tables with lots of pages
- Make selectable a bool or a function
- If column is filterable show filter icon in the header...
- Filter text is not restored from the state HOT 3
- TypeError: Cannot read property 'object' of undefined HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sematable.