Add configuration options for table cell customisation to the table component
This commit is contained in:
parent
db9c1b2b05
commit
f63db2fb4f
1 changed files with 43 additions and 3 deletions
|
@ -8,10 +8,12 @@
|
||||||
Select,
|
Select,
|
||||||
Label,
|
Label,
|
||||||
Body,
|
Body,
|
||||||
|
ColorPicker,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { flip } from "svelte/animate"
|
import { flip } from "svelte/animate"
|
||||||
import { dndzone } from "svelte-dnd-action"
|
import { dndzone } from "svelte-dnd-action"
|
||||||
import { generate } from "shortid"
|
import { generate } from "shortid"
|
||||||
|
import { store } from "builderStore"
|
||||||
|
|
||||||
export let columns = []
|
export let columns = []
|
||||||
export let options = []
|
export let options = []
|
||||||
|
@ -91,6 +93,14 @@
|
||||||
<Label size="L">Column</Label>
|
<Label size="L">Column</Label>
|
||||||
<Label size="L">Label</Label>
|
<Label size="L">Label</Label>
|
||||||
<Label size="L">Width</Label>
|
<Label size="L">Width</Label>
|
||||||
|
<Label size="L">Alignment</Label>
|
||||||
|
<Label size="L">Format</Label>
|
||||||
|
<div class="center">
|
||||||
|
<Label size="L">Background</Label>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<Label size="L">Text color</Label>
|
||||||
|
</div>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -122,6 +132,32 @@
|
||||||
/>
|
/>
|
||||||
<Input bind:value={column.displayName} placeholder="Label" />
|
<Input bind:value={column.displayName} placeholder="Label" />
|
||||||
<Input bind:value={column.width} placeholder="Auto" />
|
<Input bind:value={column.width} placeholder="Auto" />
|
||||||
|
<Select
|
||||||
|
bind:value={column.align}
|
||||||
|
options={["Left", "Center", "Right"]}
|
||||||
|
placeholder="Default"
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
bind:value={column.format}
|
||||||
|
options={["Left"]}
|
||||||
|
placeholder="Default"
|
||||||
|
/>
|
||||||
|
<div class="center">
|
||||||
|
<ColorPicker
|
||||||
|
value={column.background}
|
||||||
|
on:change={e => (column.background = e.detail)}
|
||||||
|
alignRight
|
||||||
|
spectrumTheme={$store.theme}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<ColorPicker
|
||||||
|
value={column.color}
|
||||||
|
on:change={e => (column.color = e.detail)}
|
||||||
|
alignRight
|
||||||
|
spectrumTheme={$store.theme}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Icon
|
<Icon
|
||||||
name="Close"
|
name="Close"
|
||||||
hoverable
|
hoverable
|
||||||
|
@ -140,7 +176,7 @@
|
||||||
By default, all table columns will automatically be shown.
|
By default, all table columns will automatically be shown.
|
||||||
<br />
|
<br />
|
||||||
You can manually control which columns are included in your table,
|
You can manually control which columns are included in your table,
|
||||||
and their widths, by adding them below.
|
and their appearance, by adding them below.
|
||||||
</Body>
|
</Body>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -163,7 +199,7 @@
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.columns {
|
.columns {
|
||||||
|
@ -176,7 +212,7 @@
|
||||||
.column {
|
.column {
|
||||||
gap: var(--spacing-l);
|
gap: var(--spacing-l);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 20px 1fr 1fr 1fr 20px;
|
grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 72px 72px 20px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: var(--border-radius-s);
|
border-radius: var(--border-radius-s);
|
||||||
transition: background-color ease-in-out 130ms;
|
transition: background-color ease-in-out 130ms;
|
||||||
|
@ -191,6 +227,10 @@
|
||||||
.wide {
|
.wide {
|
||||||
grid-column: 2 / -1;
|
grid-column: 2 / -1;
|
||||||
}
|
}
|
||||||
|
.center {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
Loading…
Reference in a new issue