Components
TableUI
Full table UI — hover-driven cell menu, header toggle buttons, row/column color pickers, and a separate cell resizer.
TableUI pairs with extension-table and
provides every interactive control a user expects: insert/delete
rows/columns, merge/split, toggle header row/column, color cells, and
duplicate rows. TableCellResizer is exported separately so you can ship
only the resize handles if you don't want the full UI.
Install
npx typix ui add tableThe CLI also installs @typix-editor/extension-table if needed.
Import
import {
TableUI,
TableCellResizer,
type TableHoverInfo,
} from "@/components/typix/main/table";Components
| Export | Purpose |
|---|---|
TableUI | Full UI — cell menu, header buttons, color picker. |
TableCellResizer | Just the drag-to-resize handles. |
TableHoverInfo (type) | Shape of the hover state your custom UI can read. |
Usage
Drop TableUI once inside the editor provider; it activates whenever the
cursor lands inside a table:
import { TableUI } from "@/components/typix/main/table";
<TypixEditorContext.Provider value={{ editor }}>
<EditorContent editor={editor} />
<TableUI />
</TypixEditorContext.Provider>Resize-handles-only mode:
import { TableCellResizer } from "@/components/typix/main/table";
<TableCellResizer />