CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-28 00:12:02 +12:00
Code Issues Projects Releases Wiki Activity

Improve table props and update table to work with views

Browse source
This commit is contained in:
Andrew Kingston 2021-04-12 14:45:41 +01:00
parent b8c9cf0898
commit afca35a229
3 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/bbui/src/Table/Table.svelte
View file

@ -14,8 +14,7 @@
export let allowEditRows = true export let allowEditRows = true
export let allowEditColumns = true export let allowEditColumns = true
export let selectedRows = [] export let selectedRows = []
export let customColumnRenderer = SelectEditRenderer export let editColumnTitle = "Edit"
export let customColumnTitle = null
export let customRenderers = [] export let customRenderers = []
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -41,6 +40,7 @@
$: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded) $: contentStyle = getContentStyle(visibleRowCount, scroll || !loaded)
$: sortedRows = sortRows(rows, sortColumn, sortOrder) $: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: fields = getFields(schema, showAutoColumns) $: fields = getFields(schema, showAutoColumns)
$: showEditColumn = allowEditRows || allowSelectRows
// Scrolling state // Scrolling state
let timeout let timeout
@ -155,10 +155,10 @@
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}> <table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
<thead class="spectrum-Table-head"> <thead class="spectrum-Table-head">
<tr> <tr>
{#if customColumnRenderer} {#if showEditColumn}
<th class="spectrum-Table-headCell"> <th class="spectrum-Table-headCell">
<div class="spectrum-Table-headCell-content"> <div class="spectrum-Table-headCell-content">
{customColumnTitle || ''} {editColumnTitle || ''}
</div> </div>
</th> </th>
{/if} {/if}
@ -208,12 +208,11 @@
class="spectrum-Table-row" class="spectrum-Table-row"
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}> class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
{#if idx >= firstVisibleRow && idx <= lastVisibleRow} {#if idx >= firstVisibleRow && idx <= lastVisibleRow}
{#if customColumnRenderer} {#if showEditColumn}
<td <td
class="spectrum-Table-cell spectrum-Table-cell--divider"> class="spectrum-Table-cell spectrum-Table-cell--divider">
<div class="spectrum-Table-cell-content"> <div class="spectrum-Table-cell-content">
<svelte:component <SelectEditRenderer
this={customColumnRenderer}
data={row} data={row}
selected={selectedRows.includes(row)} selected={selectedRows.includes(row)}
onToggleSelection={() => toggleSelectRow(row)} onToggleSelection={() => toggleSelectRow(row)}

12
packages/builder/src/components/backend/DataTable/Table.svelte
View file

@ -23,7 +23,6 @@
export let theme = "alpine" export let theme = "alpine"
export let hideAutocolumns export let hideAutocolumns
let columnDefs = []
let selectedRows = [] let selectedRows = []
let editableColumn let editableColumn
let editableRow let editableRow
@ -32,6 +31,7 @@
let customRenderers = [] let customRenderers = []
$: isUsersTable = tableId === TableNames.USERS $: isUsersTable = tableId === TableNames.USERS
$: data && resetSelectedRows()
$: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow $: editRowComponent = isUsersTable ? CreateEditUser : CreateEditRow
$: { $: {
if (isUsersTable) { if (isUsersTable) {
@ -54,7 +54,11 @@
} }
} }
function selectRelationship(row, fieldName) { const resetSelectedRows = () => {
selectedRows = []
}
const selectRelationship = (row, fieldName) => {
if (!row?.[fieldName]?.length) { if (!row?.[fieldName]?.length) {
return return
} }
@ -110,8 +114,10 @@
{schema} {schema}
{loading} {loading}
{customRenderers} {customRenderers}
customColumnTitle="Edit"
bind:selectedRows bind:selectedRows
allowSelectRows={allowEditing}
allowEditRows={allowEditing}
allowEditColumns={allowEditing}
showAutoColumns={!hideAutocolumns} showAutoColumns={!hideAutocolumns}
on:editcolumn={e => editColumn(e.detail)} on:editcolumn={e => editColumn(e.detail)}
on:editrow={e => editRow(e.detail)} /> on:editrow={e => editRow(e.detail)} />

1
packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
View file

@ -57,6 +57,7 @@
tableId={view.tableId} tableId={view.tableId}
{data} {data}
{loading} {loading}
allowEditing={!view?.calculation}
bind:hideAutocolumns> bind:hideAutocolumns>
<FilterButton {view} /> <FilterButton {view} />
<CalculateButton {view} /> <CalculateButton {view} />