This repository has been archived by the owner on Jan 15, 2022. It is now read-only.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 forTr
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 calledrenderState
.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.
<Td>
with the rowSpan definition, if any.<Tr>
by cloning it to preserve the original data.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).