Comments (23)
Instead of render
I had to use Cell
. For the rest, this solution worked.
from table.
Yes - your advised solution worked well. The column def looks like this now:
const dayColumns = [{
header : 'Compute Usage By Day',
columns : [{
header: 'Day',
accessor: 'day',
sort: 'desc',
render: props => <span>{moment.utc(props.value).format('MMMM Do YYYY')}</span>
}, {
header: 'Usage In Hours',
id: 'usageByDay',
accessor: data => (data.computeUsageInSeconds / 3600).toFixed(2)
},{
header: '%',
id: 'dayPercentage',
accessor: (data) => (data.computeUsageInSeconds > 0 ? ((data.computeUsageInSeconds / 3600) / computeLimitInHours).toFixed(4) : 0)
}
]
}]
I was wondering about one thing. Are the span tags necessary in the render function? At first I was trying props => moment(props.value).format(YYYY MM)
but this threw some sort of error that I did not investigate. Perhaps props => {moment(props.value).format(YYYY MM) }
might have worked without the span tags, anyways just a random point of curiosity.
from table.
from table.
I have this and it works for me:
{
Header: "DOB",
id: "dob",
accessor: c => c.dob,
maxWidth: 120,
Cell: c => <span>{c.original.dob && moment(c.original.dob).format("MM/DD/YYYY")}</span>,
style: { textAlign: "center" },
},
I know for sure that dob is a date though. If you are not, perhaps you should add something like
accessor: c => moment.utc(c.dob)
from table.
Thanks @mnieber and @gary-menzel! I needed that info. I just found on the breaking changes section of the readme that render was deprecated in favor of Cell
from table.
Thanks! It's works!
from table.
moment is not defined it says
from table.
What would you recommend if the some of the cells in the column are populated with a null value?
from table.
from table.
So my columns look this:
const dayColumns = [{ header : 'Compute Usage By Day', columns : [{ header: 'Day', id: 'day-date', sortable: false, accessor: data => moment.utc(data.day).format('MMMM Do YYYY') }, { header: 'Usage In Hours', id: 'usageByDay', accessor: data => (data.computeUsageInSeconds / 3600).toFixed(2) },{ header: '%', id: 'dayPercentage', accessor: (data) => (data.computeUsageInSeconds > 0 ? ((data.computeUsageInSeconds / 3600) / computeLimitInHours).toFixed(4) : 0) } ] }]
and my data looks like:
[{"day":"2017-02-02T00:00:00.000Z","computeUsageInSeconds":31617.909999999996},{"day":"2017-02-01T00:00:00.000Z","computeUsageInSeconds":40181.17799999999},{"day":"2017-01-31T00:00:00.000Z","computeUsageInSeconds":21089.114},{"day":"2017-01-30T00:00:00.000Z","computeUsageInSeconds":44944.111},{"day":"2017-01-29T00:00:00.000Z","computeUsageInSeconds":15069.673},{"day":"2017-01-28T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-27T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-26T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-25T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-24T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-23T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-22T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-21T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-20T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-19T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-18T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-17T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-16T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-15T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-14T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-13T00:00:00.000Z","computeUsageInSeconds":0},{"day":"2017-01-12T00:00:00.000Z","computeUsageInSeconds":94972.638},{"day":"2017-01-11T00:00:00.000Z","computeUsageInSeconds":114119.36099999999}],[],[],[{"day":"2017-02-01T00:00:00.000Z","computeUsageInSeconds":5132.079000000001},{"day":"2017-01-31T00:00:00.000Z","computeUsageInSeconds":3491.0939999999996}]
from table.
Ah, gotcha. Thanks for the lightning fast reply! will give it a shot
from table.
from table.
Any update on this?
from table.
Great! I believe the span tags are. This could just be a react thing too. I'm not sure.
from table.
@mnieber yeah - looks like "render" was an old way of doing it (nothing in the docs now other than "Cell")
from table.
Hello!! I'm trying to do the same, but it does not work for me. Could you help me?
from table.
@juanbussoli you'd have to at least paste some of the code in order for anybody to be able to help you. I personally don't even remember this issue but I see I said myself that my issue got fixed :D
from table.
I have a column like this:
{
Header: "Date created",
id: "date_created",
accessor: d => d.dateCreated,
Cell: row => {row.value}
},
I need to be able to sort this column by date, however, by clicking on the title of the column, it is sorted alphabetically. Could you help me?
from table.
Ok, but what is "moment"?
He does not recognize me, and he tells me that it is not defined.
from table.
it's a date handling library. I think you could use new Date(c.dob)
for testing purposes.
From here on I suggest you take it to stack overflow as this thread is becoming too verbose
from table.
what is moment?
from table.
what is moment?
It's a javascript library. Google moment.js
from table.
@kristibyrnes I found if you default to min date that seems to work
const MINIMUM_DATE = new Date(-8640000000000000);
accessor: ({ nullableDate }) => nullableDate ?? MINIMUM_DATE
from table.
Related Issues (20)
- `autoResetPageIndex` seems to be default true when `manualPagination=true`, is not expectd as docs saying HOT 1
- Unexpected behavior of array filterFns (arrIncludes, arrIncludesAll, arrIncludesSome) HOT 1
- Table v8 expanding - incorrect state of parent checkbox when selecting subrows HOT 1
- `getTopRows()` and `getBottomRows()` Not Referentially Stable Between Renders
- Calling `row.getParentRow()` with expanded, filtered row models and initial filtering value throws an error HOT 1
- Table sorting is not working when drag and drop of columns is used HOT 1
- Custom sortingFn not being run when row key is undefined
- [Angular] In the example, column sorting does not work. HOT 2
- Global filter only works with string and number types
- To use @Tanstack Table/vue-table, you must import the core package, but the documentation does not specify this HOT 2
- Sub components are overlapped with successive rows HOT 1
- Bug Report: cell.isGrouped Always Returns false Despite enableGrouping Being true (REACT) HOT 2
- The left position of pinned columns in the sticky table is calculated incorrectly HOT 2
- cell only displays one line HOT 1
- When using virtual rendering and column drag-and-drop sorting simultaneously, they don't work well together HOT 2
- onPaginationChange when set to undefined doesn't fallback to using default pagination HOT 1
- Failed to monitor data changes, resulting in page turning without re-rendering. HOT 2
- Table using insane amount of memory even with virtualisation when scrolling HOT 2
- Issue with getIsSomeRowsSelected when using grouping
- [vue table] support for reactivity in Vue-adapter in version 8.20 broke reactive for the old getter `get data()` style HOT 1
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 table.