Custom sorting about react-redux-grid HOT 25 CLOSED

released as 2.2.6

from react-redux-grid.

Instead of importing your reducers like:

import { Reducers } from 'react-redux-grid';

const gridReducers = {
  dataSource: Reducers.DataSource,
  editor: Reducers.Editor,
  errorHandler: Reducers.ErrorHandler,
  filter: Reducers.Filter,
  grid: Reducers.grid,
  loader: Reducers.Loader,
  menu: Reducers.Menu,
  pager: Reducers.Pager,
  selection: Reducers.Selection,
};

export default combineReducers({
  facility,
  language,
  routing,
  form,
  ..gridReducers,
});

you will simply do this:

import { Reducers as gridReducers } from 'react-redux-grid';

export default combineReducers({
  facility,
  language,
  routing,
  form,
  ...gridReducers,
});

from react-redux-grid.

hey @innopal, could you create new issues for these? Since this is a closed issue, and you're addressing other features/bugs, it's probably best to open as another issue. Thanks!

from react-redux-grid.

Do you want a custom remote sort or a custom local sort?

from react-redux-grid.

Sorry I didn't clarify! Just local sort. For example I have date columns I need to sort asc and desc.

from react-redux-grid.

No this feature hasn't been implemented yet. I'll keep this issue open and get to it as soon as I can.

from react-redux-grid.

Thanks for adding the feature to your backlog.

Any workaround you can think of in the meantime? Any event that can intercept sorting a column (with proper payload incl. column and sort direction)?

Cheers.

from react-redux-grid.

Each header definition has the event HANDLE_CLICK;

on the fire of this event, you could simply use the Actions.GridActions.setData method to set the grid data with the newly sorted data. Just a thought.

I would set this column to not be sortable -- as far as overriding the class -- not sure if that would work. I can probably get to this feature relatively soon.

from react-redux-grid.

@innopal so does the default local sorting that comes by default doesn't work for you, since these are dates, is that correct?

from react-redux-grid.

Yeah primarily, if the data is date type it doesn't sort correctly. I need to be able to add my own sorting like:

mylist.sort((a, b) => (moment(a) - moment(b)))

from react-redux-grid.

ok cool, this should be fairly simple to implement. it should be done and pushed within the next couple days.

from react-redux-grid.

This is done.

On the column you'd like to be able to custom sort, you will need to add the following:

const columns = [
    {
        name: 'Column with custom Sort',
        dataIndex: 'sortable',
        sortable: true
        sortFn: (a, b) => {
            // your sort logic
        }
    },
    // ... rest of columns
];

from react-redux-grid.

Thanks @bencripps,
It doesn't work though! It doesn't fire sortFn at all.

Cheers.

from react-redux-grid.

Hmm, I wrote a test around it, and I just ran the tests/ ran through it in a browser and it seems to work. If you put a debugger in the sortFn, it doesn't get called?

from react-redux-grid.

Nope! it doesn't.

from react-redux-grid.

on the column, is sortable: true set?

from react-redux-grid.

@innopal let me know if that fixed your issue, otherwise could you send me the column definition?

from react-redux-grid.

Hi Ben,
Sorry I was MIA for a while.
As I mentioned I never managed to get sortFn to fire. And yes, sortable is true.
I'm getting all sorts of error now. Any ideas what's happening here?
Here are some warnings and error I get back to back:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Row. See https://fb.me/react-warning-keys for more information.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of EmptyCell.
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of EmptyCell.

from react-redux-grid.

Hmm, that's a whole bunch of errors -- I also can't reproduce the sortFn not firing. Could you find the simplest version of your grid implementation and send it to me? I can debug it from there, and see whats going on.

from react-redux-grid.

Hi @bencripps,

Now I can get the sortFn to work, so thanks for the feature.
However, it doesn't have a direction (asc/desc) parameter, hence, toggling doesn't work and it always sorts one way.

Any ideas?

from react-redux-grid.

That's a good point, I will pass the direction into the function. I'll push a commit to master and you can test.

from react-redux-grid.

Should work now -- direction will be the first argument, and will either be DESC OR ASC. Here's an example of how this could work.

const sortFn = (direction, prev, curr) => {
    if (direction === 'DESC') {
        return prev - curr;
    }
    return curr - prev;
};

from react-redux-grid.

@bencripps, master branch works great! Any release plans?

from react-redux-grid.

Hey Ben @bencripps,

Did you just camelCased all the reducers in 2.3.0?

from react-redux-grid.

@bencripps
Hi Ben,

I'm trying to keep the last state that grid was sorted on in my redux store.
Something like:

{
  dataIndex: 'name',
  direction: 'DESC'
}

Is there any event that I can intercept to record that state each time, a sort is fired?

Cheers

from react-redux-grid.