Added preventSelectRow prop to custom column

This commit is contained in:
Mel O'Hagan 2022-06-07 14:40:56 +01:00
parent 3fd60528a4
commit 12ced8cba7
2 changed files with 21 additions and 24 deletions

View File

@ -132,7 +132,7 @@
style += " auto" style += " auto"
} }
fields?.forEach(field => { fields?.forEach(field => {
const fieldSchema = schema[field] const fieldSchema = schema[field.name]
if (fieldSchema.width) { if (fieldSchema.width) {
style += ` ${fieldSchema.width}` style += ` ${fieldSchema.width}`
} else { } else {
@ -204,7 +204,6 @@
return nameA < nameB ? a : b return nameA < nameB ? a : b
}) })
.concat(autoColumns) .concat(autoColumns)
.map(column => column.name)
} }
const editColumn = (e, field) => { const editColumn = (e, field) => {
@ -300,19 +299,19 @@
{#each fields as field} {#each fields as field}
<div <div
class="spectrum-Table-headCell" class="spectrum-Table-headCell"
class:spectrum-Table-headCell--alignCenter={schema[field] class:spectrum-Table-headCell--alignCenter={schema[field.name]
.align === "Center"} .align === "Center"}
class:spectrum-Table-headCell--alignRight={schema[field].align === class:spectrum-Table-headCell--alignRight={schema[field.name]
"Right"} .align === "Right"}
class:is-sortable={schema[field].sortable !== false} class:is-sortable={schema[field.name].sortable !== false}
class:is-sorted-desc={sortColumn === field && class:is-sorted-desc={sortColumn === field.name &&
sortOrder === "Descending"} sortOrder === "Descending"}
class:is-sorted-asc={sortColumn === field && class:is-sorted-asc={sortColumn === field.name &&
sortOrder === "Ascending"} sortOrder === "Ascending"}
on:click={() => sortBy(schema[field])} on:click={() => sortBy(schema[field.name])}
> >
<div class="title">{getDisplayName(schema[field])}</div> <div class="title">{getDisplayName(schema[field.name])}</div>
{#if schema[field]?.autocolumn} {#if schema[field.name]?.autocolumn}
<svg <svg
class="spectrum-Icon spectrum-Table-autoIcon" class="spectrum-Icon spectrum-Table-autoIcon"
focusable="false" focusable="false"
@ -320,7 +319,7 @@
<use xlink:href="#spectrum-icon-18-MagicWand" /> <use xlink:href="#spectrum-icon-18-MagicWand" />
</svg> </svg>
{/if} {/if}
{#if sortColumn === field} {#if sortColumn === field.name}
<svg <svg
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
focusable="false" focusable="false"
@ -329,11 +328,11 @@
<use xlink:href="#spectrum-css-icon-Arrow100" /> <use xlink:href="#spectrum-css-icon-Arrow100" />
</svg> </svg>
{/if} {/if}
{#if allowEditColumns && schema[field]?.editable !== false} {#if allowEditColumns && schema[field.name]?.editable !== false}
<svg <svg
class="spectrum-Icon spectrum-Table-editIcon" class="spectrum-Icon spectrum-Table-editIcon"
focusable="false" focusable="false"
on:click={e => editColumn(e, field)} on:click={e => editColumn(e, field.name)}
> >
<use xlink:href="#spectrum-icon-18-Edit" /> <use xlink:href="#spectrum-icon-18-Edit" />
</svg> </svg>
@ -343,7 +342,7 @@
</div> </div>
{/if} {/if}
{#if sortedRows?.length} {#if sortedRows?.length}
{#each sortedRows as row, idx} {#each sortedRows as row}
<div class="spectrum-Table-row"> <div class="spectrum-Table-row">
{#if showEditColumn} {#if showEditColumn}
<div <div
@ -367,15 +366,12 @@
{#each fields as field} {#each fields as field}
<div <div
class="spectrum-Table-cell" class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider} class:spectrum-Table-cell--divider={!!schema[field.name]
style={cellStyles[field]} .divider}
style={cellStyles[field.name]}
on:click={() => { on:click={() => {
if (!field.startsWith("custom-")) { if (!field.preventSelectRow) {
dispatch("click", row) dispatch("click", row)
}
}}
on:click={() => {
if (!field.startsWith("custom-")) {
toggleSelectRow(row) toggleSelectRow(row)
} }
}} }}
@ -383,8 +379,8 @@
<CellRenderer <CellRenderer
{customRenderers} {customRenderers}
{row} {row}
schema={schema[field]} schema={schema[field.name]}
value={deepGet(row, field)} value={deepGet(row, field.name)}
on:clickrelationship on:clickrelationship
> >
<slot /> <slot />

View File

@ -86,6 +86,7 @@
sortable: false, sortable: false,
divider: true, divider: true,
width: "auto", width: "auto",
preventSelectRow: true,
} }
} }