Components Overview

LyteNyte Grid includes a collection of components designed for the grid that also function as standalone components.

Prebuilt Theming

LyteNyte Grid components are unstyled by default, so you can apply your own styles or incorporate an existing design system.

LyteNyte Grid also provides prebuilt styles for every component, using the grid’s theme tokens. To use these styles, import the following CSS file:

1
import "@1771technologies/lytenyte-pro/components.css";

Data Attributes

Like the grid itself, LyteNyte Grid components use data-attributes to expose component state to CSS. Use these attributes for custom styling and behavior.

To find relevant data-attributes, inspect the rendered elements in your browser’s DevTools.

Slots

Many components accept SlotComponent props to customize rendering. These render props merge your props and event handlers with the component’s internal props and handlers, so you can control the rendered output.

For example, the Select All component accepts a slot property that you can use to override what the SelectAll component renders:

1
<SelectAll slot={<div>My Custom Content</div>} />

The SlotComponents also accept a function variant. When you provide a function, the component passes additional state to that function. For example, the SelectAll component provides a toggle function that changes the selection state.

1
<SelectAll slot={(p) => <div onClick={() => p.toggle()}>My custom content</div>} />

The SlotComponent must be an element that accepts standard HTML props, such as onClick, or, in the case of function slots, must return an element that accepts standard HTML props.

Next Steps

• Pill Manager: Create and manage grid interactions using label pills.
• Smart Select: Streamline data selection using a versatile combobox or select element.
• Menu Button: Display a list of actions or options in an accessible dropdown menu.