charcell 0.1.0
navigation
linksgithubnpm
mode

SplitGrid

panes in columns and rows, with handles between them that move a whole column or row at a time.

usage

example

code

import { SplitGrid } from 'charcell/react';

export function SplitGridExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 10)' }}>
      <SplitGrid
        columns={[{ id: 'gangs' }, { id: 'riders' }]}
        rows={[{ id: 'free' }, { id: 'jailed' }]}
        defaultColumnSize={[40, 60]}
        defaultRowSize={[50, 50]}
      >
        {({ column, row }) => (
          <>
            {column === 'gangs' && (
              <>
                {row === 'free' && (
                  <>
                    <div style={{ padding: '0 1ch' }}>
                      <div>vultures</div>
                      <div>cavefish</div>
                      <div>rottwheelers</div>
                    </div>
                  </>
                )}
              </>
            )}
            {column === 'riders' && (
              <>
                {row === 'free' && (
                  <>
                    <div style={{ padding: '0 1ch' }}>
                      <div>ben</div>
                      <div>maureen</div>
                      <div>suzi</div>
                    </div>
                  </>
                )}
              </>
            )}
            {column === 'gangs' && (
              <>
                {row === 'jailed' && (
                  <>
                    <div style={{ padding: '0 1ch' }}>
                      <div>polecats</div>
                    </div>
                  </>
                )}
              </>
            )}
            {column === 'riders' && (
              <>
                {row === 'jailed' && (
                  <>
                    <div style={{ padding: '0 1ch' }}>
                      <div>darrel</div>
                    </div>
                  </>
                )}
              </>
            )}
          </>
        )}
      </SplitGrid>
    </div>
  );
}

as text

at rest
 gangs   ⠿ riders

   ⠶⠶         ⠶⠶
 jailed  ⠿ darrel
hover
 gangs   ⠿ riders
          
   ⠶⠶         ⠶⠶
 jailed  ⠿ darrel
press
 gangs   ⠿ riders
          
   ⠶⠶         ⠶⠶
 jailed  ⠿ darrel
focus
 gangs   ⠿ riders
          
   ⠶⠶         ⠶⠶
 jailed  ⠿ darrel

props

SplitGrid

direction'ltr' | 'rtl'
The reading direction its keys and placement follow ('rtl' mirrors the arrow keys); the page's, once mounted, when unset.
columnsSplitGridTrack[]
The columns, left to right: an id each, and, snapping, minimumCells, keepCells and defaultCells (a count, or 'content').
rowsSplitGridTrack[]
The rows, top to bottom.
defaultColumnSizenumber[]
The columns' starting sizes in percent, e.g. [25, 75].
defaultRowSizenumber[]
The rows' starting sizes in percent.
snap'character' | 'none'= 'character'
Boundaries snap to whole columns and rows; 'none' opts out.
redistribute'neighbor' | 'proportional'= 'neighbor'
How the cells are shared when the columns or rows change: a leaving track's to its neighbor ('neighbor'), or to every track that stays, by its length ('proportional'), a joining one taking its cells from all of them.
ruleboolean
Draws the handles as lines through their cells, a grip in each pane.
rowGrips'each' | 'one'= 'each'
A row's handle's grips: each, one in every pane it passes; one, one at its middle.
join'start' | 'end' | 'both'
Runs ruled handles' ends on past the grid to meet the lines beyond: a frame's ring when the grid sits directly in its body, or else the line in the next cell (┬ ┴ ├ ┤).
fillboolean
Takes the container's box: grows in a flex or grid layout, and takes the full height of a block that has one.
translationsSplitGridTranslations
What the grid says: its handles' names, between two columns (columnHandleLabel) and two rows (rowHandleLabel).

SplitGridCell

it takes any attribute of its <div>.

SplitGridHandle

axis'column' | 'row'= 'column'
column runs down between two columns, row across between two rows.
crossesstring[]
The tracks it runs across: the rows for a column's handle, the columns for a row's.
labelstring
The handle's accessible name.

it also takes any other attribute of its <button>.

SplitGridHandleRow

it takes any attribute of its <div>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

SplitGrid

default{ column: string; row: string }
A cell, given its column and row ids.
rowHandleStart{ before: string; after: string }
Content on the handle between two rows, at its start, given the rows before and after it.
rowHandleEnd{ before: string; after: string }
Content on the handle between two rows, at its end, given the rows before and after it.

SplitGridCell

default

SplitGridHandleRow

start
Content at the row's start, before the grip.
end
Content at the row's end, after the grip.