react-native-sortable-listview icon indicating copy to clipboard operation
react-native-sortable-listview copied to clipboard

Section headers support?

Open perqa opened this issue 8 years ago • 5 comments

Thanks for a very useful library. I have a question: what is needed to support section headers in the list? By doing some slight code modifications, I have come as far as to display the data correctly with section headers, but the drag and drop fails. The underlying bookkeeping of item ordering seems not to match actual order, or the layout calculation is messed up by the additional section header items... Any thoughts around this? Is there a roadmap including section headers?

perqa avatar Jan 02 '17 11:01 perqa

Am too facing the same issue, after adding the header and footer. if try to drag 0th,1st and 2nd elements upward works fine, but if try with 3rd element 2 (1st and 2nd)rows moving downward so that not able to place the item in 2nd place(0th,1st and 2nd).

mamidala avatar Jan 05 '17 18:01 mamidala

@perqa you should use renderHeader inherited from ListView to add a Header https://facebook.github.io/react-native/docs/listview.html#renderheader

@perqa, @mamidala: I'm not sure if understood the other issues. May you provide a test case?

milesibastos avatar Feb 09 '17 12:02 milesibastos

Hi,

Thank you for that useful lib...

I am too, trying to work with section headers. I cant find the way to arrange the data so I will have section header. from what I understand listview needs to receive data in the following way -https://facebook.github.io/react-native/docs/listviewdatasource.html

I am using the example code but modified the data - let data = { Header1: {hello: {text: 'world'}, how: {text: 'are you'}, test: {text: 123}, this: {text: 'is'}, a: {text: 'a'}, real: {text: 'real'}, drag: {text: 'drag and drop'}, bb: {text: 'bb'}}, Header2: {cc: {text: 'cc'}, dd: {text: 'dd'}, ee: {text: 'ee'}, ff: {text: 'ff'}, gg: {text: 'gg'}, hh: {text: 'hh'}, ii: {text: 'ii'}, jj: {text: 'jj'}, kk: {text: 'kk'}} }

on the renderRow function I have added log - renderRow={(row, header, listItemIndex) => {console.log("this is the row " + row + " Header is " + header + " Index " + listItemIndex);return <RowComponent data={row} />}}

Is there any change in the listView datasource regarding section headers? Thanks

kaplanitay avatar Feb 21 '17 15:02 kaplanitay

Unfortunately, It looks like section headers are not supported. renderHeader will only allow you to render a ListView header, not a section headers. The author of this library specifies this also in this old enhancement request. It's a bummer that section headers are not supported.

gsavvid avatar Mar 01 '17 15:03 gsavvid

I would think now that FlatList exists and has support for headers that perhaps it would be a good time to try to implement both FlatList and support for headers.

smilingkylan avatar Aug 16 '17 17:08 smilingkylan