-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add caption component for table #513
Conversation
const columns = getColumnData(children, disableSort); | ||
const { | ||
initialSortPath, | ||
initialSortFunc, | ||
initialValueGetter, | ||
} = getInitialSortControls(initialColumn, columns); | ||
const [ascending, setAscending] = useState(initialAscending); | ||
const [sortPath, setSortPath] = useState(initialSortPath); | ||
|
||
// Setting and storing a function object requires special syntax. | ||
// See: https://medium.com/swlh/how-to-store-a-function-with-the-usestate-hook-in-react-8a88dd4eede1 | ||
const [sortFunc, setSortFunc] = useState(() => initialSortFunc) | ||
const [valueGetter, setValueGetter] = useState(() => initialValueGetter) | ||
const [sortFunc, setSortFunc] = useState(() => initialSortFunc); | ||
const [valueGetter, setValueGetter] = useState(() => initialValueGetter); | ||
|
||
const data = useMemo(() => { | ||
if (controlled || disableSort) return unsortedData | ||
if (controlled || disableSort) return unsortedData; | ||
|
||
if (sortFunc) { | ||
const sorted = [...unsortedData].sort(sortFunc) | ||
if (!ascending && !disableReverse) sorted.reverse() | ||
return sorted | ||
} | ||
else { | ||
const order = ascending ? 'asc' : 'desc' | ||
const sorted = [...unsortedData].sort(sortFunc); | ||
if (!ascending && !disableReverse) sorted.reverse(); | ||
return sorted; | ||
} else { | ||
const order = ascending ? "asc" : "desc"; | ||
const sorted = orderBy( | ||
unsortedData, | ||
(item) => valueGetter ? valueGetter(item) : get(sortPath, item), | ||
(item) => (valueGetter ? valueGetter(item) : get(sortPath, item)), | ||
order | ||
) | ||
return sorted | ||
); | ||
return sorted; | ||
} | ||
}, [ascending, sortPath, sortFunc, valueGetter, controlled, disableSort, disableReverse, unsortedData]) | ||
}, [ | ||
ascending, | ||
sortPath, | ||
sortFunc, | ||
valueGetter, | ||
controlled, | ||
disableSort, | ||
disableReverse, | ||
unsortedData, | ||
]); | ||
|
||
const handleColumnChange = (column) => { | ||
if (column.disabled) return | ||
if (column.disabled) return; | ||
|
||
const newSortPath = column.name | ||
const newSortFunc = column.sortFunc || null | ||
const newValueGetter = column.valueGetter || null | ||
const newSortPath = column.name; | ||
const newSortFunc = column.sortFunc || null; | ||
const newValueGetter = column.valueGetter || null; | ||
|
||
// Toggle ascending if the path is already selected. Otherwise, default | ||
// to ascending when switching paths... | ||
const newAscending = newSortPath === sortPath ? !ascending : true | ||
const newAscending = newSortPath === sortPath ? !ascending : true; | ||
|
||
setAscending(newAscending) | ||
setSortPath(newSortPath) | ||
setSortFunc(() => newSortFunc) | ||
setValueGetter(() => newValueGetter) | ||
setAscending(newAscending); | ||
setSortPath(newSortPath); | ||
setSortFunc(() => newSortFunc); | ||
setValueGetter(() => newValueGetter); | ||
|
||
if (onChange) onChange({ | ||
ascending: newAscending, | ||
sortPath: newSortPath, | ||
sortFunc: newSortFunc | ||
}) | ||
} | ||
if (onChange) | ||
onChange({ | ||
ascending: newAscending, | ||
sortPath: newSortPath, | ||
sortFunc: newSortFunc, | ||
}); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did anything change here? It's hard to tell 🙈
{columns.map((column, key) => { | ||
const Header = column.headerComponent || headerComponent || DefaultHeader | ||
<> | ||
<CaptionComponent caption={caption} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a node
, you could just always render the caption. E.g.,
<caption>{caption}</caption>
However, since we'd be introducing a new change this could impact styling on existing projects. I believe this is tagged to the v6
milestone, so please modify the base branch to v6
and add a note in the migration guide
closing in favor of #540 |
Allow table to have a caption specified: #463
Author Checklist