Skip to content
Get Pro
Data

Table

A data table whose rows glide to their new places when you sort.

$149 once · every Pro piece

Customize

Sticky mono header, one sliding hover highlight, checkbox selection with Shift-click ranges and a rolling count. Under 560px it becomes stacked label-and-value blocks with a single sort button.

Install

npx shadcn@latest add @obsyde/table

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Table } from '@/components/obsyde/ember/table/Table';

export function Example() {
  return (
    <Table />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/table/Table.tsxcomponent
  • ember/table/table.cssstyles
  • ember/table/TableDemo.tsxdemo
  • ember/shared/chart-kit.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/display-kit/highlight.tsshared
  • ember/display-kit/display-kit.cssshared
  • ember/display-kit/motion.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
rowsRowsnumber8
seedSeednumber7
selectableSelectablebooleantrue
stateState'ready' | 'empty''ready'
sortKeySort by'none' | 'name' | 'alpha' | 'beta' | 'gamma''none'
sortDirSort direction'asc' | 'desc''asc'