Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amir-arad/tweakpane-table
Table plugin for Tweakpane
https://github.com/amir-arad/tweakpane-table
creative-coding gui plugin tweakpane tweakpane-plugin tweaks
Last synced: 21 days ago
JSON representation
Table plugin for Tweakpane
- Host: GitHub
- URL: https://github.com/amir-arad/tweakpane-table
- Owner: amir-arad
- License: mit
- Created: 2023-02-08T10:38:02.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-26T17:09:41.000Z (6 months ago)
- Last Synced: 2024-10-20T07:45:17.030Z (29 days ago)
- Topics: creative-coding, gui, plugin, tweakpane, tweakpane-plugin, tweaks
- Language: TypeScript
- Homepage:
- Size: 46.9 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# tweakpane-table
Table plugin for [Tweakpane](https://github.com/cocopon/tweakpane/).
## Installation
### Browser
```html
/* 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 */
}
const pane = new Tweakpane.Pane();
pane.element.parentElement.classList = 'tableContainer';
pane.registerPlugin(TweakpaneTablePlugin);
```
### Package
```js
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.
```js
// 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!
```js
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',
});
```