diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
index 486ff76697..67a1d1c916 100644
--- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
@@ -98,7 +98,7 @@ const createScreen = table => {
limit: 1,
})
- const repeater = new Component("@budibase/standard-components/list")
+ const repeater = new Component("@budibase/standard-components/repeater")
.instanceName("Repeater")
.customProps({
dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,
diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index 3f58fc7a89..9dadf2aa25 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -2,7 +2,8 @@
"container",
"dataprovider",
"datagrid",
- "list",
+ "table",
+ "repeater",
"button",
"search",
{
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
index d3183636d6..3a87bc9db1 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
@@ -11,6 +11,7 @@
export let value = ""
export let onChange = () => {}
export let multiselect = false
+ export let placeholder
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource(datasource).schema
@@ -18,7 +19,7 @@
{#if multiselect}
-
+
{:else}
-
+
{/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
index b18b06d3ba..f84c495ec4 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte
@@ -4,6 +4,7 @@
export let options = []
export let value = []
export let onChange = () => {}
+ export let placeholder
let boundValue = getValidOptions(value, options)
@@ -26,6 +27,7 @@
align="right"
extraThin
secondary
+ {placeholder}
value={boundValue}
on:change={setValue}>
{#each options as option}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
index c464ed84e0..2ff67f1c30 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte
@@ -7,6 +7,7 @@
export let value = ""
export let styleBindingProperty
export let onChange = () => {}
+ export let placeholder
let open = null
let rotate = ""
@@ -108,7 +109,7 @@
$: displayLabel =
selectedOption && selectedOption.label
? selectedOption.label
- : value || "Choose option"
+ : value || placeholder || "Choose option"
+ export let value
+
+
+{value}
diff --git a/packages/standard-components/src/table/BooleanRenderer.svelte b/packages/standard-components/src/table/BooleanRenderer.svelte
new file mode 100644
index 0000000000..a8d86efdea
--- /dev/null
+++ b/packages/standard-components/src/table/BooleanRenderer.svelte
@@ -0,0 +1,37 @@
+
+
+
+
+
diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte
new file mode 100644
index 0000000000..7374bc337c
--- /dev/null
+++ b/packages/standard-components/src/table/CellRenderer.svelte
@@ -0,0 +1,26 @@
+
+
+{#if value != null && value !== ''}
+ {#if plainTypes.includes(type)}
+ {value}
+ {:else if type === 'boolean'}
+
+ {:else if type === 'datetime'}
+
+ {:else if type === 'link'}
+
+ {:else if type === 'attachment'}
+
+ {/if}
+{/if}
diff --git a/packages/standard-components/src/table/DateTimeRenderer.svelte b/packages/standard-components/src/table/DateTimeRenderer.svelte
new file mode 100644
index 0000000000..fbde2999e1
--- /dev/null
+++ b/packages/standard-components/src/table/DateTimeRenderer.svelte
@@ -0,0 +1,7 @@
+
+
+{dayjs(value).format('MMMM D YYYY, HH:mm')}
diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte
new file mode 100644
index 0000000000..7096101582
--- /dev/null
+++ b/packages/standard-components/src/table/RelationshipRenderer.svelte
@@ -0,0 +1,15 @@
+
+
+{#if value && value.length}
+ {#each value as item}
+ {#if item && item.primaryDisplay}
+
+ {item.primaryDisplay}
+
+ {/if}
+ {/each}
+{/if}
diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte
new file mode 100644
index 0000000000..930b5a343a
--- /dev/null
+++ b/packages/standard-components/src/table/Table.svelte
@@ -0,0 +1,136 @@
+
+
+
+
+
+
+ {#each fields as field}
+ sortBy(field)}>
+
+ {schema[field]?.name}
+
+
+ |
+ {/each}
+
+
+
+ {#each sortedRows as row}
+
+ {#each fields as field}
+
+
+
+
+ |
+ {/each}
+
+ {/each}
+
+
+
+
+
diff --git a/packages/standard-components/src/table/index.js b/packages/standard-components/src/table/index.js
new file mode 100644
index 0000000000..410fe1ff6c
--- /dev/null
+++ b/packages/standard-components/src/table/index.js
@@ -0,0 +1 @@
+export { default as table } from "./Table.svelte"
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 8a026bd592..236a7104b0 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -132,72 +132,82 @@
estree-walker "^1.0.1"
picomatch "^2.2.2"
-"@spectrum-css/actionbutton@^1.0.0-beta.1":
- version "1.0.0-beta.1"
- resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6"
- integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ==
+"@spectrum-css/actionbutton@^1.0.1":
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+ integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
-"@spectrum-css/button@^3.0.0-beta.6":
- version "3.0.0-beta.6"
- resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
- integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
+"@spectrum-css/button@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
+ integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
-"@spectrum-css/checkbox@^3.0.0-beta.6":
- version "3.0.0-beta.6"
- resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
- integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
+"@spectrum-css/checkbox@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
+ integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
-"@spectrum-css/fieldlabel@^3.0.0-beta.7":
- version "3.0.0-beta.7"
- resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"
- integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog==
+"@spectrum-css/fieldlabel@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.1.tgz#39f7c0f25cc2ff402afeff005341b0832f7c588c"
+ integrity sha512-LMfwrwIq8wEEvxFLobdLvXRwKrp8o9Fty4iJ9aYl2Rj1uXkfRd8qLz9HGZjLEE1OuJgoTBgamYABl7EvoA5PLw==
-"@spectrum-css/icon@^3.0.0-beta.2":
- version "3.0.0-beta.2"
- resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
- integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
+"@spectrum-css/icon@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
+ integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
-"@spectrum-css/inputgroup@^3.0.0-beta.7":
- version "3.0.0-beta.7"
- resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23"
- integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw==
+"@spectrum-css/inputgroup@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.1.tgz#8c5b257b57b3b2cf04e99355709365fa0d6838cc"
+ integrity sha512-asBRa1jTlld6plkcq4ySO+xl+OJlCMSOLoAFdSSIJowcSlCV0yDy7oeOhf5YQv9mMHFWTKlWUSoAKDZTguIPxA==
-"@spectrum-css/menu@^3.0.0-beta.5":
- version "3.0.0-beta.5"
- resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"
- integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw==
+"@spectrum-css/label@^2.0.9":
+ version "2.0.9"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
+ integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
-"@spectrum-css/page@^3.0.0-beta.0":
- version "3.0.0-beta.0"
- resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58"
- integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA==
+"@spectrum-css/menu@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+ integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
+"@spectrum-css/page@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"
+ integrity sha512-LAlKF8km5BlsGPpZ2SNtwKOQIHn1lz0X93aczGZVZceOg73O4gyeoT5cx4vi1z+KtBRY5VMDWx3XgGtUwwjqwA==
dependencies:
- "@spectrum-css/vars" "^3.0.0-beta.2"
+ "@spectrum-css/vars" "^3.0.1"
-"@spectrum-css/picker@^1.0.0-beta.3":
- version "1.0.0-beta.3"
- resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965"
- integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ==
+"@spectrum-css/picker@^1.0.1":
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.1.tgz#98991198576d26bd14160824e7b6f3c278ff930b"
+ integrity sha512-Rv4/UBOdNW1gs7WVBCJnPD5VFly8MqP++psDX6kcugUIcfJy0GC3acvElotmKRlCDk8Qxks2W2A0jKeSgphTmA==
-"@spectrum-css/popover@^3.0.0-beta.6":
- version "3.0.0-beta.6"
- resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2"
- integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ==
+"@spectrum-css/popover@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
+ integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
-"@spectrum-css/stepper@^3.0.0-beta.7":
- version "3.0.0-beta.7"
- resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc"
- integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA==
+"@spectrum-css/stepper@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.1.tgz#7f270f53505e7dbe082591e8ea1c4c8f397e045a"
+ integrity sha512-IvZlGFJ8QPr9tUz5xvVN4hASaTRDPdKu9IIp25q/x0ecgSrKAM55e3EBWEYWy1H1JI3h+zlPnNRuK0VLhDbCYA==
-"@spectrum-css/textfield@^3.0.0-beta.6":
- version "3.0.0-beta.6"
- resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"
- integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ==
+"@spectrum-css/table@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
+ integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
-"@spectrum-css/vars@^3.0.0-beta.2":
- version "3.0.0-beta.2"
- resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157"
- integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA==
+"@spectrum-css/textfield@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.1.tgz#e875b8e37817378ad08fc4af7d53026df38911e5"
+ integrity sha512-MUV5q87CVxbkNdSNoxGrFbgyKc51ft/WWf3aVEoPdPw5yBnXqFe1w1YmAit5zYDOOhhs58sCLAlUcCMlOpkgrA==
+
+"@spectrum-css/vars@^3.0.1":
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+ integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
"@types/color-name@^1.1.1":
version "1.1.1"
@@ -864,6 +874,11 @@ csso@^4.0.2:
dependencies:
css-tree "1.0.0-alpha.39"
+dayjs@^1.10.4:
+ version "1.10.4"
+ resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+ integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
deep-equal@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"