86 Pro components and page blocks

Get Pro
uibrik

Gravity Sort

Pro

Preview

Customize

Gravity0.70
Duration0.36s
Row height48px
Region

Installation

Pro

Gravity Sort is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/gravity-sort

Usage

import { GravitySort } from "@/components/uibrik/gravity-sort/gravity-sort";​const rows = [  { id: "tokyo", city: "Tokyo", country: "Japan", region: "Asia", population: 37.0, area: 8231, growth: -0.2 },  { id: "delhi", city: "Delhi", country: "India", region: "Asia", population: 34.7, area: 2344, growth: 2.7 },  // …12 more];​<GravitySort  gravity={0.7}  duration={0.36}  rowHeight={48}  groupBy="region"  rows={rows}  defaultSort={{ key: "population", dir: "desc" }}  label="Cities"  onSortChange={(sort) => {}}  // columns={[{ key: "…", label: "…" }]}  // sort={{ key: "…", dir: "asc" }}/>

Props

GravitySort
gravity
Type number
0.7
How much a row's weight shapes its move. 0 moves every row alike.
duration
Type number
0.36
How long a light row takes to settle. Heavy rows take longer.
rowHeight
Type number
48
Height of a row.
groupBy
Type "region" | ""
"region"
Key whose values become filter chips. Empty for none.
columns
Type { key: string; label: string; numeric?: boolean; format?: (value, row) => ReactNode; hideNarrow?: boolean }[]
SAMPLE_COLUMNS
Columns in order. Numeric columns sort as numbers and give rows their weight.
rows
Type ({ id: string } & Record<string, string | number>)[]
SAMPLE_ROWS
One object per row, keyed by column.
defaultSort
Type { key: string; dir: "asc" | "desc" }
{ key: "population", dir: "desc" }
Sort to begin with when uncontrolled.
sort
Type { key: string; dir: "asc" | "desc" }
–
Current sort, to control it.
onSortChange
Type (sort) => void
–
Called when a column header is pressed.
label
Type string
"Cities"
Names the table for screen readers.
className
Type string
–
Classes for the outer shell.