tweakpane-table

Table plugin for Tweakpane.

Installation

Browser

<style>
    /* size manipulation according to: https://github.com/cocopon/tweakpane/issues/46#issuecomment-633388907  */
    .tableContainer {
        width: 350px; /* give enough space for all cells */
    }
    .tableContainer .tp-lblv_v {
        min-width: fit-content; /* don't cut off cells */
    }
</style>
<script src="tweakpane.min.js"></script>
<script src="tweakpane-table.min.js"></script>
<script>
    const pane = new Tweakpane.Pane();
    pane.element.parentElement.classList = 'tableContainer';
    pane.registerPlugin(TweakpaneTablePlugin);
</script>

Package

import { Pane } from 'tweakpane';
import * as TweakpaneTablePlugin from 'tweakpane-table';
const style = document.createElement('style');
style.innerHTML = `
    .tableContainer {
        width: 350px;
    }
    .tableContainer .tp-lblv_v {
        min-width: fit-content;
    }
`;
document.head.appendChild(style);
const pane = new Pane();
pane.element.parentElement.classList = 'tableContainer';
pane.registerPlugin(TweakpaneTablePlugin);

Usage

Headers are just labels, Cells are just blades.

// add header row
pane.addBlade({
    view: 'tableHead',
    label: 'Label',
    headers: [
        { label: 'Text', width: '80px' },
        { label: 'List', width: '160px' },
    ],
});

// add cells row
pane.addBlade({
    view: 'tableRow',
    label: 'row 1',
    cells: [
        {
            view: 'text',
            width: '80px',
            parse: (v) => String(v),
            value: 'sketch-01',
        },
        {
            view: 'list',
            width: '160px',
            options: [
                { text: 'loading', value: 'LDG' },
                { text: 'menu', value: 'MNU' },
                { text: 'field', value: 'FLD' },
            ],
            value: 'LDG',
        },
    ],
});

Advanced Usage

Actually, every row is managed by a horizontal Pane. Access the row pane using .getPane() to add inputs, monitors, buttons or blades. It is possible to add width property to all of them.

Hint: You can register other plugins to the row Pane!

const rowPane = pane
    .addBlade({
        view: 'tableRow',
        label: `#1`,
    })
    .getPane(); // notice this! accessing the row pane

// now just add stuff
rowPane.registerPlugin(SomePlugin);
const PARAMS = {
    speed: 0.5,
};
rowPane.addBlade({
    view: 'text',
    width: '100px',
    parse: (v) => String(v),
    value: `effect-0${i}`,
});
pane.addInput(PARAMS, 'speed');
pane.addMonitor(PARAMS, 'speed', {
    view: 'graph',
    min: -1,
    max: +1,
});
rowPane.addButton({
    title: 'del',
    width: '50px',
});