Koala UI

Rule Cascade

Pro

A set of rules in the order they are checked, each one a numbered step on a rail that ends in what happens when nothing matches.

  1. Priority 2
    Large purchasesR-2ActiveVersion 1
    When a requestwhereAmountis over€10Kthenrequire the CFO
    4 decisions3.3% of 123 in 30 days
    Jordi Serra21 days ago
  2. Priority 10
    Office suppliesR-1ActiveVersion 3
    When a requestwhereAmountis under€300andCategoryisOffice suppliesthenapprove automatically
    3 decisions2.4% of 123 in 30 days
    Marta Puig2 days ago
  3. Priority 12
    Software renewalsR-8ShadowVersion 1
    When a requestwhereAmountis under€1,000andCategoryisSoftwarethenapprove automatically
    25 would match20.3% of 123 in 30 days
    Jordi SerraYesterday
  4. Priority 20
    Travel over budgetR-11DraftVersion 1
    When a requestwhereCategoryisTravelthenhold for review
    Not running
    Marta Puig1 hour ago
  5. Nothing above matches?Thenrequire the budget owner

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add rule-cascade

Usage#

Use it where the order of the rules is the point: the first one that matches decides, so a table that sorts by any column hides how they really run. Sort by priority yourself and end with the fallback.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Anatomy#

import {  RuleCascade,  RuleCascadeItem,  RuleCascadeStep,  RuleCascadeContent,  RuleCascadeHeader,  RuleCascadeTitle,  RuleCascadeCode,  RuleCascadeMeta,  RuleCascadeStat,  RuleCascadeFallback,} from "@/components/ui/rule-cascade"

Status#

The step says whether a rule takes part. Active rules sit raised on the rail, shadow and draft rules are dashed because they decide nothing, and a rule that is off sinks and dims.

  1. Priority 10
    Active ruleActive
  2. Priority 20
    Shadow ruleShadow
  3. Priority 30
    Draft ruleDraft
  4. Priority 40
    Paused ruleOff
  5. Nothing above matches?Thenrequire the budget owner

Density#

  1. Priority 2
    Large purchasesR-2ActiveVersion 1
    When a requestwhereAmountis over€10Kthenrequire the CFO
    4 decisions3.3% of 123 in 30 days
    Jordi Serra21 days ago
  2. Priority 10
    Office suppliesR-1ActiveVersion 3
    When a requestwhereAmountis under€300andCategoryisOffice suppliesthenapprove automatically
    3 decisions2.4% of 123 in 30 days
    Marta Puig2 days ago
  3. Priority 12
    Software renewalsR-8ShadowVersion 1
    When a requestwhereAmountis under€1,000andCategoryisSoftwarethenapprove automatically
    25 would match20.3% of 123 in 30 days
    Jordi SerraYesterday
  4. Priority 20
    Travel over budgetR-11DraftVersion 1
    When a requestwhereCategoryisTravelthenhold for review
    Not running
    Marta Puig1 hour ago
  5. Nothing above matches?Thenrequire the budget owner

API reference#

RuleCascade

The ordered list and the context every part reads. Renders an ol, so the order is read out. Every part accepts className, merged last.

PropTypeDefaultDescription
density"comfortable" | "compact"-Row padding and the gap to the rail. Reads DensityProvider when unset.

RuleCascadeItem

One rule. It lays out the step, the content and the meta, and moves the meta beside the content once the list is wider than 42rem.

PropTypeDefaultDescription
status"active" | "shadow" | "draft" | "off""active"Draws the step: a raised marker for an active rule, a dashed one for a shadow or a draft, a sunken one for a rule that is off. An off rule's content dims.
Data attributeDescription
data-statusThe status.

RuleCascadeStep

The marker on the rail, usually the priority. The rail starts at the first marker and stops at the last.

PropTypeDefaultDescription
labelstring"Priority"Read before the number by a screen reader.

RuleCascadeContent

The main column: the header and the rule itself, usually a RuleSentence.

RuleCascadeHeader

The title row. Holds the title, the code and badges such as RuleStatus and RuleVersion.

RuleCascadeTitle

The rule's name. With asChild and a link inside, the whole row opens the rule and takes the hover and the focus ring.

PropTypeDefaultDescription
asChildbooleanfalseRenders the child, usually a Link, and stretches it over the row.
Data attributeDescription
data-linkPresent when the title is the row's link.

RuleCascadeCode

A short identifier beside the title, in tabular numerals.

RuleCascadeMeta

Figures about the rule. Under the content on a narrow list, right-aligned beside it on a wide one.

RuleCascadeStat

One figure with a quieter line under it.

PropTypeDefaultDescription
value*ReactNode-The figure, such as 12 decisions.
detailReactNode-Context under it, such as the share or a time.

RuleCascadeFallback

The last step: what happens when no rule above matches. Put it after the items.

PropTypeDefaultDescription
iconReactNode<ArrowElbowDownRight />Drawn in the marker.
labelstring"Fallback"Names the marker for a screen reader.

FAQ#

A table invites sorting and reads every column as equal. Rules run in one order, top to bottom, and stop at the first match, so the cascade keeps that order fixed and draws it.