Ability to reorder columns

[gabro]

I would really like to see this feature implemented, is it in any future plan?

I'm also trying to do this myself, but the way columns are handled internally currently transcend my poor React knowledge

[RnbWd]

To reorder columns (left-right headers) I've been able to use a generator function that maps an array and returns a list of columns. So if the array is a state or prop, the columns reorder when the component updates.

What I'm struggling with at the moment is filtering / searching columns. There's a lot of low level functions that help with this, but no click handlers on the headers I'm aware of (which would help build a UI for sorting).

[gabro]

I figured the same (having the Columns in an array that I can sort) but I'd be much more interested in the ability to sort columns by drag-dropping the headers. I don't know if this is something that can be built on top of the current implementation, but I suspect this not possible due to the way columns are used internally. For instance I can't just wrap columns in custom containers for supporting animations because of internal invariants.

Filtering columns is also something I'm after.

I'm considering moving from an angular app which uses ng-grid, but the lack of these features (sorting and filtering of columns) is a show stopper for now.

[pieterv]

So the thing that makes these type of features possible is the headerRenderer prop on <Column />, this allows you to override the default header implementation with anything that is renderable via React.render(). So for sorting this is how you would render your own elements that have onClick handlers which you then use to know when to sort your data. As for reordering columns you can probably do it the same way but it will be a bit more involved as you will need to listen to drag events then reorder the columns as the drag happens.

It would be very nice to have an easy way to do these things out of the box, we already have a nice sortable header component with some good sorting utils that we use in Facebook so we might be able to clean that up and add it to the core. For column reordering we should at least have a nice example that shows how it could work.

[RnbWd]

@pieterv thanks for the clarification! So when the documentation says:

returns React-renderable content for ..... (table-header/cell/etc)

Does this mean I can return a React component which would replace the default content of the header/cell? I've created headers by simply returning the parameter I wanted as the header in the headerRenderer function, but I didn't realize those parameters could be used as props in React components (if I understand correctly)? I'm about to go try this out, I didn't realize that was possible.

[pieterv]

@RnbWd Yeah exactly just think of it like any other React render method.

So you might end up with a headerRenderer function like this to do the sorting:

function renderHeader(label, key) {
  return (
    <div
      onClick={handleClick.bind(null, key)}>
      {label}
      <MyArrow
        direction={getCurrentDirection(key)}
      />
    </div>
  );
}

[RnbWd]

This makes me very happy :)

[gabro]

@pieterv thanks for the point, headerRenderer looks promising!

An example of column re-ordering would be really nice, since I suspect that even listening to drag events on the header cell animating the whole column is still a little tricky.

I'll give it a shot, but having an API for doing this would be great.

I'm thinking of something that would allow to specify whether a Column is draggable and perhaps a callback that allows further tuning of the behavior, along the lines of canColumnMove(startingIndex, destinationIndex)

[AlesJiranek]

+1 for example of columns reordering

[enriquecaballero]

+1

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[musbaig]

+1

[ascariandrea]

Hi @pieterv, I'm trying to sort my columns content by clicking on an icon in the header, but I have a problem. Sorting data works fine, but what I need is to re-render the column header to update the icon for sort order. This is possible only when columns props has changed and my column data don't.

Maybe an additional props for Column component that forces the render even if data are unchanged could be helpful? Otherwise the only possible way is to update data in any case (?)

[twmills]

Also interested in this. Thanks!

[TravestyDesigns]

+1

[danielone]

+1 For drag and drop support for reordering. very core to our usage

[wcjordan]

Our fork provides an example of how to do this here.

[CWSites]

@ehzhang it would be helpful to know which issue this is a duplicate of :)