LyteNyte Grid offers a Sort Manager component you can assemble to manage column sorts. This component is especially useful when your columns support dynamic sorting or when users need to sort by multiple columns simultaneously.
Here's a complete example, with individual components explained below:
The Sort Manager includes separate components you can assemble to create a layout that matches your application's needs.
Import these components with:
import { SortManager } from "@1771technologies/lytenyte-pro/sort-manager";
The basic layout for the Sort Manager is:
<SortManager.Root>
<SortManager.Container>
{({ items }) => {
return (
<>
<SortManager.SortColumnSelect item={c} />
<SortManager.SortSelect item={c} />
<SortManager.SortDirectionSelect item={c} />
<SortManager.SortAdder item={c} />
<SortManager.SortRemove item={c} />
</>
);
}}
</SortManager.Container>
<SortManger.SortApply>
<SortManger.SortCancel>
<SortManger.SortClear>
</SortManager.Root>
The SortManager.Root
provides child components with the necessary state for managing sorts within
the grid. It accepts the grid state object.
The SortManager.Container
holds each active sort in the grid. It expects a render prop that
accepts individual sort items, where each item represents an active sort. The render prop should
return a sort row component that configures an individual sort.
You can use these components to modify sorts:
SortManager.SortColumnSelect
: Changes which column is being sortedSortManager.SortSelect
: Changes the active sort on the given columnSortManager.SortDirectionSelect
: Toggles between ascending and descending sort orderSortManager.SortAdder
: Adds additional sortsSortManager.SortRemove
: Removes the current sortThe Sort Manager includes three control buttons:
SortManager.SortApply
: Applies the current sort configuration to the gridSortManager.SortCancel
: Cancels current sort configuration changesSortManager.SortClear
: Clears all sorts applied in the grid