Dates are sorted alphabetically

[maxwell-oroark]

Dates are sorted alphabetically

[mnieber]

Instead of render I had to use Cell. For the rest, this solution worked.

[maxwell-oroark]

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.

[tannerlinsley]

Instead of formatting the date in the accessor. Just pass the raw date string from your data. Then use a custom render function to format the data. That way it will sort by the accessor, but look correct when displayed

…

On Thu, Feb 2, 2017 at 10:06 AM maxwell-oroark ***@***.***> wrote: 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}] — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCRYQki8GYLgOe9WuY-zAjGmMnuINks5rYg0HgaJpZM4L1XYn> .

[alebrozzo]

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)

[alebrozzoSP]

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

[juanbussoli]

Thanks! It's works!

[PavanKumarRao]

moment is not defined it says

[kristibyrnes]

What would you recommend if the some of the cells in the column are populated with a null value?

[tannerlinsley]

What do your data and column defs look like

…

On Thu, Feb 2, 2017 at 9:58 AM maxwell-oroark ***@***.***> wrote: Is there a way to detect that a column is date type and sort accordingly? Or alternatively, preserve the order that the data in the array given to the column is in? Thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#51>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCSKkseIhQU7LEL9msmt16BX_GzNnks5rYgsegaJpZM4L1XYn> .

[maxwell-oroark]

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

[maxwell-oroark]

Ah, gotcha. Thanks for the lightning fast reply! will give it a shot

[tannerlinsley]

No problem!

…

On Thu, Feb 2, 2017 at 10:10 AM maxwell-oroark ***@***.***> wrote: Ah, gotcha. Thanks for the lightning fast reply! will give it a shot — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#51 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCQ1qnuqO0cjnA5286Xd4h1kBI4ogks5rYg3xgaJpZM4L1XYn> .

[tannerlinsley]

Any update on this?

[tannerlinsley]

Great! I believe the span tags are. This could just be a react thing too. I'm not sure.

[gary-menzel]

@mnieber yeah - looks like "render" was an old way of doing it (nothing in the docs now other than "Cell")

[juanbussoli]

Hello!! I'm trying to do the same, but it does not work for me. Could you help me?

[alebrozzo]

@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

[juanbussoli]

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?

[juanbussoli]

Ok, but what is "moment"?
He does not recognize me, and he tells me that it is not defined.

[alebrozzo]

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

[PavanKumarRao]

what is moment?

[flymans]

what is moment?

It's a javascript library. Google moment.js

[bsell93]

@kristibyrnes I found if you default to min date that seems to work
const MINIMUM_DATE = new Date(-8640000000000000);
accessor: ({ nullableDate }) => nullableDate ?? MINIMUM_DATE