Skip to content
This repository has been archived by the owner on Jan 15, 2022. It is now read-only.

#84 - initial rowSpan attempt #335

Closed
wants to merge 1 commit into from
Closed

Conversation

cklab
Copy link
Contributor

@cklab cklab commented Nov 11, 2016

This is the initial attempt at implementing rowSpan functionality to address #84 . Threw up the table used in the unit tests in a jsFiddle here: https://jsfiddle.net/69z2wepo/62285/

Trying to solve this issue was a lot more headache than I initially thought. The static display was pretty straight forward, the complications came during filtering and sorting. This PR boils down to:

Static Display
The render function for Tr has been modified to keep a state of any rowSpan debt and skip rendering <Td>s if there is a rowSpan that hasn't yet been exhausted. This is accomplished by keeping the rowSpan definitions for each <Td> in what's called renderState. renderState is then passed as a prop to each <Tr> which will then make a determination whether it needs to render a specific <Td> or not.

Filtering
The applyFilter function has been modified to work in two chunks.

  1. The main loop iterating over each row now serves to:
    • Locate and retain a reference to the <Td> with the rowSpan definition, if any.
    • Move the definition & value to the next visible row, if any, and adjust the rowSpan value to exclude the filtered rows (e.g. if we have a rowSpan=5 and the 1st and 5th row are filtered out, the rowSpan property & value shifts to row 2 and rowSpan=3).
    • We accomplish the modifications to the <Tr> by cloning it to preserve the original data.
    • Filter the rows using the filterBy text
  2. Lastly, we iterate through the matchedChildren to determine where we need to make rowSpan modifications

Sorting

The sortByCurrentSort has been modified to sort "buckets of data" as opposed to treating the entire table as one chunk of data. A bucket is referred to as rows sharing <Td> with a rowSpan. Rows with <Td>s having no rowSpan or rowSpan=1 are all placed in the same bucket ("singles").

In the jsFiddle, the three rows under "Software" are in one bucket, the three rows under "Mechanical" are in another bucket, etc.

Sorting Limitations

Currently unable to sort on columns that specify a rowSpan > 1 (e.g. in the jsFiddle, cannot sort by Category or Position, you'll rather receive a warning in the console saying currently not supported. Not sure what direction the sort there should take -- up for definition).

@cklab cklab changed the title initial rowSpan attempt - issue #84 #84 - initial rowSpan attempt Nov 11, 2016
@cklab cklab force-pushed the rowSpan branch 2 times, most recently from c9bbd21 to b5fad5e Compare November 11, 2016 18:58
@glittershark
Copy link
Owner

@cklab finally getting around to taking a look at this, looks pretty awesome. Can you rebase it so I know I'm looking at the right diff? thanks!

 - supports sorting by columns that do not specify a rowSpan
@cklab
Copy link
Contributor Author

cklab commented Nov 21, 2016

@glittershark ask and ye shall receive

@cklab cklab closed this Dec 27, 2017
@cklab cklab deleted the rowSpan branch December 27, 2017 18:38
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants