Pill Manager

LyteNyte Grid's Pill Manager component offers a unique way for users to add and remove columns, set row groups, and apply aggregations and measures. While serving a similar role to the Column Manager, the Pill Manager enhances column property discoverability and works better in responsive designs.

The Pill Manager organizes content in rows, each containing a set of Pills. LyteNyte Grid provides components you can assemble to create a Pill Manager. Here's a complete example:

TODO;

Pill Manager Components

You can combine several components to create a Pill Manager that fits your application's needs.

Start by importing the Pill Manager:

import { PillManager } from "@1771technologies/lytenyte-pro/pill-manager";

The basic structure of the Pill Manager is:

<PillManager.Root>
  <PillManager.DragPlaceholder />
  <PillManager.Rows>
    <PillManager.Row pillSource="columns">
      <PillManager.RowLabelColumns />
      <PillManager.Pills>
        {({ pills }) => {
          return (
            <>
              {pills.map((c) => (
                <PillManager.Pill key={c.label} item={c} />
              ))}
            </>
          );
        }}
      </PillManager.Pills>
      <PillManager.Expander></PillManager.Expander>
    </PillManager.Row>
    <PillManager.Separator />
 
    <PillManager.Row pillSource="row-groups">
      <PillManager.RowLabelRowGroups />
      <PillManager.Pills>
        {({ pills }) => {
          return (
            <>
              {pills.map((c) => (
                <PillManager.Pill key={c.label} item={c} />
              ))}
            </>
          );
        }}
      </PillManager.Pills>
      <PillManager.Expander />
    </PillManager.Row>
    <PillManager.Separator />
  </PillManager.Rows>
</PillManager.Root>

Pill Manager Root

The PillManager.Root component wraps all other Pill Manager components and provides the necessary state context for them to function properly.

Pill Manager Rows

The PillManager.Rows component contains individual pill rows. You can use different types of pill rows to manage various aspects of the grid:

• row-groups - Manages row grouping
• column-pivots - Manages column pivots (typically displayed only when pivot mode is active)
• aggregations - Manages column aggregations
• measures - Manages grid measures (typically displayed only when pivot mode is active)

Pill Manager Row

The PillManager.Row component renders pills for a specific part of the grid state. Set the row type using the pillSource property. Each row consists of three parts:

• PillManager.RowLabel - Displays the label for the row
• PillManager.Pills - Contains the pills for the row
• PillManager.Expander - Provides a button to expand or collapse the row

The pill row displays Pill components in an overflow container. When expanded (controlled by the PillManager.Expander button), the overflow container wraps to show all content.