components / 23

marked table

data needs rhythm before decoration. cheez keeps the native table readable, then adds ink only where structure or state needs it.

shadcnnpx shadcn@latest add berkantay/cheez/marked-table

live

data playground

ruled · default

60 responsive marks · live registry data
select all marks		family	character	status		actions
select underline	underline`underline`	emphasis	calm	success: ready	4,812
select circle	circle`circle`	encircle	rushed	success: ready	3,924
select marker swipe	marker swipe`marker-swipe`	highlight	calm	info: beta	2,811
select scribble out	scribble out`scribble-out`	cross-out	chaotic	success: ready	2,470
select curved arrow	curved arrow`curved-arrow`	arrow	rushed	success: ready	1,943
select star	star`star`	symbol	calm	warning: draft	806
selected					1	/ 60

variant

density

ink

character

striped rowssticky header

<MarkedTable
  variant="ruled"
  density="default"
  tone="orange"
  character="rushed"
>
  <MarkedTableHeader>...</MarkedTableHeader>
  <MarkedTableBody>
    <MarkedTableRow selected={selected}>
      <MarkedTableCell>...</MarkedTableCell>
    </MarkedTableRow>
  </MarkedTableBody>
</MarkedTable>

rows

state without noise

one mark, one meaning

state	meaning	behavior
default	ordinary data	no decoration
interactive	contains a control	focus tint
selected	chosen by a real checkbox	ink edge + tint
muted	historical or unavailable	reduced pressure

rhythm

density changes pace, not hierarchy

same native structure

compact

underline	4,812
circle	3,924
highlight	2,811

default

underline	4,812
circle	3,924
highlight	2,811

relaxed

underline	4,812
circle	3,924
highlight	2,811

responsive

columns scroll, semantics stay

no card conversion

horizontal overflow preserves column relationships
component	primitive	keyboard	motion	dependency	size
marked table	native table	browser	WAAPI	cheez core	4.2 kb
marked select	Base UI	roving focus	WAAPI	@base-ui/react	7.1 kb

zero

empty is still a table state

one cell, correct span

mark	family	status
no marks match “perfect”clear the filter and keep drawing.

reference

api

native slots and visual props

prop	type	default	purpose
`variant`	`"ruled" \| "framed" \| "quiet"`	`"ruled"`	boundary system
`density`	`"compact" \| "default" \| "relaxed"`	`"default"`	cell rhythm
`tone`	`MarkedTableTone`	`"neutral"`	built-in ink palette
`color`	`string`	`tone color`	table ink override
`striped`	`boolean`	`false`	subtle alternating rows
`stickyHeader`	`boolean`	`false`	sticky native header cells
`frameMark`	`CheezType`	`"rounded-box"`	framed boundary mark
`character`	`CheezCharacter`	`"rushed"`	drawing personality
`thickness`	`number`	`1`	non-scaling pen weight
`Row.selected`	`boolean`	`false`	visual selected state
`Row.muted`	`boolean`	`false`	de-emphasized row
`Row.interactive`	`boolean`	`false`	hover and focus treatment
`Row.tone`	`MarkedTableTone`	`table tone`	row-specific state ink
`Head.sort`	`SortDirection`	`"none"`	native aria-sort state
`Cell.align`	`"start" \| "center" \| "end"`	`"start"`	content alignment
`Cell.numeric`	`boolean`	`false`	tabular right-aligned figures
`Cell.marked`	`boolean`	`false`	Cheez emphasis around cell content
`Cell.mark`	`CheezType`	`"underline"`	cell emphasis mark
`Cell.truncate`	`boolean`	`false`	single-line overflow

behavior notes

every slot renders its matching native table element and forwards its ref
the scroll container never changes rows into cards because column relationships matter
sort state belongs on the header through aria-sort; the button only triggers the change
selected is visual only—the checkbox, radio, or grid owns selection semantics
numeric cells use tabular figures and right alignment by default
marked cells opt into a real Cheez underline without changing the table structure
the Cheez frame uses non-scaling ink so wide tables do not create thick borders