search

deanmcpherson / react-native-sortable-listview

Drag drop capable wrapper of ListView for React Native
MIT License
918 stars 235 forks source link

Section headers support? #54

Open perqa opened 7 years ago

perqa commented 7 years ago

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?

mamidala commented 7 years ago

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).

milesibastos commented 7 years ago

@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?

kaplanitay commented 7 years ago

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

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

gsavvid commented 7 years ago

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.

kylanhurt commented 7 years ago

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.