āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(components)/component-sort-manager ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
The Sort Manager is a headless React component available in LyteNyte Grid PRO. It manages the grid's sort configurations-allowing users to add, remove, or adjust sorts. The base component is unstyled, so you can fully match it to your application's look and feel. This is especially useful for multi-column sorting.
Example usage:
import { SortManager as SM } from "@1771technologies/lytenyte-pro";
// Inside a function component-call the hook and provide a grid instance
function Sort() {
const { rootProps, rows } = SM.useSortManager({ grid });
return (
<SM.Root {...rootProps}>
<SM.Rows>
{rows.map((c) => {
if (c.isCustom)
return (
<SM.Row>
<div>Custom Sort</div>
<SM.Add />
<SM.Remove />
</SM.Row>
);
return (
<SM.Row row={c} key={c.index}>
<SM.ColumnSelect />
<SM.ValueSelect />
<SM.DirectionSelect />
<SM.Add />
<SM.Remove />
</SM.Row>
);
})}
</SM.Rows>
<SM.Clear>Clear</SM.Clear>
<SM.Cancel>Cancel</SM.Cancel>
<SM.Apply>Apply</SM.Apply>
</SM.Root>
);
}
When using the Sort Manager, only columns with the sortable UI hint appear in the column selection
list. Make sure to set sortable: true for columns you want to be available.
!demo:Sort Manager="./demos/sort-manager"
Root - Provides the root context for the Sort Manager. All parts should be rendered inside
Root.Rows - Container for sort rows. Includes keyboard navigation but is otherwise a plain div.Row - Represents a single sort configuration. Has an isCustom flag for custom sorts (not
configurable by Sort Manager but removable).ColumnSelect - Dropdown to choose the column for sorting. Can be replaced with a custom
component using the as prop.ValueSelect - Dropdown to choose sort type (e.g., absolute sort for numbers). Can be replaced
with a custom component via the as prop.DirectionSelect - Dropdown to choose sort direction. Can be replaced using the as prop.Clear - Button to remove all sorts.Cancel - Button to cancel changes made in the Sort Manager.Apply - Button to apply the current sort configuration to the grid.ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā