Merge pull request #1823 from evidence-dev/column-order-fix

DataTable fixes for column order and spacing
evidence-dev · Mar 30, 2024 · b8efc67 · b8efc67
2 parents c3a2007 + 24cec2e
commit b8efc67
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 65 deletions.
diff --git a/.changeset/tough-camels-brush.md b/.changeset/tough-camels-brush.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fix column order issue in DataTable when Column used
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/Delta.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/Delta.svelte
@@ -7,7 +7,7 @@
 	import Delta from './_Delta.svelte';
 	import EmptyChart from '../core/EmptyChart.svelte';
 
-	export let data;
+	export let data = undefined;
 
 	const initialHash = typeof data === 'object' && '__isQueryStore' in data ? data.hash : undefined;
 
@@ -34,7 +34,5 @@
 		{/if}
 	</span>
 	<p slot="skeleton" class="text-gray-500">Loading...</p>
-	<Delta {...spreadProps} data={loaded?.__isQueryStore ? Array.from(loaded) : loaded}>
-		<slot />
-	</Delta>
+	<Delta {...spreadProps} data={loaded?.__isQueryStore ? Array.from(loaded) : loaded} />
 </QueryLoad>
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/GroupRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/GroupRow.svelte
@@ -19,6 +19,7 @@
 	export let rowNumbers;
 	export let rowColor = undefined;
 	export let subtotals = true;
+	export let finalColumnOrder = undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -35,9 +36,9 @@
 	on:keypress={(e) => e.key === 'Enter' && toggleGroup()}
 	style:background-color={rowColor}
 >
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, j}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, j}
 		{@const useCol = safeExtractColumn(column, columnSummary)}
 		{@const column_format = column.fmt
 			? getFormatObjectFromString(column.fmt, useCol.format?.valueType)
@@ -49,7 +50,7 @@
 				: column_format}
 		{@const useFormat = format?.valueType === 'date' ? '' : format}
 		{#if j === 0}
-			<TableCell class="font-medium py-[3px]" colSpan={rowNumbers ? 2 : 1}>
+			<TableCell class="font-medium py-[3px]" colSpan={rowNumbers ? 2 : 1} paddingLeft="1px">
 				<div class="items-center gap-2 align-top">
 					<span class="inline-flex print-hidden chevron"><TableGroupIcon {toggled} /></span>
 					{groupName}
@@ -71,7 +72,7 @@
 							format_object={useFormat}
 							columnUnitSummary={useCol.columnUnitSummary}
 							showValue={column.showValue}
-							deltaSymbol={column.deltaSymbol}
+							showSymbol={column.deltaSymbol}
 							align={column.align}
 							fontClass="font-medium text-[9.25pt]"
 							neutralMin={column.neutralMin}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/SubtotalRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/SubtotalRow.svelte
@@ -10,23 +10,24 @@
 	import { propKey } from '@evidence-dev/component-utilities/chartContext';
 	const props = getContext(propKey);
 
-	export let groupName;
-	export let currentGroupData;
-	export let columnSummary;
+	export let groupName = undefined;
+	export let currentGroupData = undefined;
+	export let columnSummary = undefined;
 	export let rowColor = 'var(--grey-100)';
-	export let groupBy;
-	export let groupType;
-	export let fontColor;
+	export let groupBy = undefined;
+	export let groupType = undefined;
+	export let fontColor = undefined;
+	export let finalColumnOrder = undefined;
 </script>
 
 <tr
 	class=" w-full border-b-gray-400 border-b-[1px]"
 	style:background-color={rowColor}
 	style:color={fontColor}
 >
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column}
 		{@const useCol = safeExtractColumn(column, columnSummary)}
 		{@const column_format = column.fmt
 			? getFormatObjectFromString(column.fmt, useCol.format?.valueType)
@@ -55,7 +56,7 @@
 						format_object={column_format}
 						columnUnitSummary={useCol.columnUnitSummary}
 						showValue={column.showValue}
-						deltaSymbol={column.deltaSymbol}
+						showSymbol={column.deltaSymbol}
 						align={column.align}
 						fontClass="font-medium text-[9.25pt]"
 						neutralMin={column.neutralMin}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableCell.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableCell.svelte
@@ -1,24 +1,24 @@
 <script>
-	export let dataType;
-	export let align;
-	export let height;
-	export let width;
-	export let wrap;
+	export let dataType = undefined;
+	export let align = undefined;
+	export let height = undefined;
+	export let width = undefined;
+	export let wrap = undefined;
 
 	export let verticalAlign = 'middle';
 	export let rowSpan = 1;
 	export let colSpan = 1;
 	export let show = true;
-	export let cellColor;
-	export let fontColor;
+	export let cellColor = undefined;
+	export let fontColor = undefined;
 
-	export let topBorder;
-	export let paddingLeft;
+	export let topBorder = undefined;
+	export let paddingLeft = undefined;
 </script>
 
 <td
 	class="{$$restProps.class ||
-		''} {dataType} {topBorder} py-[2px] px-[8px] whitespace-nowrap overflow-hidden first:pl-[4px]"
+		''} {dataType} {topBorder} py-[2px] px-[8px] whitespace-nowrap overflow-hidden first:pl-[3px]"
 	style:text-align={align}
 	style:height
 	style:width

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableHeader.svelte
@@ -71,7 +71,7 @@
 	}
 
 	th:first-child {
-		padding-left: 4px;
+		padding-left: 3px;
 	}
 
 	.index {

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TableRow.svelte
@@ -10,18 +10,19 @@
 	import TableCell from './TableCell.svelte';
 	const props = getContext(propKey);
 
-	export let displayedData;
-	export let rowShading;
-	export let link;
-	export let rowNumbers;
-	export let rowLines;
-	export let index;
-	export let columnSummary;
+	export let displayedData = undefined;
+	export let rowShading = undefined;
+	export let link = undefined;
+	export let rowNumbers = undefined;
+	export let rowLines = undefined;
+	export let index = undefined;
+	export let columnSummary = undefined;
 	export let grouped = false; // if part of a group - styling will be adjusted
-	export let groupType;
-	export let groupColumn;
-	export let rowSpan;
+	export let groupType = undefined;
+	export let groupColumn = undefined;
+	export let rowSpan = undefined;
 	export let groupNamePosition = 'middle'; // middle (default) | top | bottom
+	export let finalColumnOrder = undefined;
 
 	function handleRowClick(url) {
 		if (link) {
@@ -48,7 +49,7 @@
 		{/if}
 
 		{#if $props.columns.length > 0}
-			{#each $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, k}
+			{#each $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, k}
 				{@const useCol = safeExtractColumn(column, columnSummary)}
 				{@const column_min = column.colorMin ?? useCol.columnUnitSummary.min}
 				{@const column_max = column.colorMax ?? useCol.columnUnitSummary.max}
@@ -137,7 +138,7 @@
 							format_object={column_format}
 							columnUnitSummary={useCol.columnUnitSummary}
 							showValue={column.showValue}
-							deltaSymbol={column.deltaSymbol}
+							showSymbol={column.deltaSymbol}
 							align={column.align}
 							fontClass="text-[9.25pt]"
 							neutralMin={column.neutralMin}
@@ -158,7 +159,7 @@
 		{:else}
 			{#each columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column, j}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column, j}
 				<!-- Check if last row in table-->
 				<TableCell
 					class={column.type}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/TotalRow.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/TotalRow.svelte
@@ -10,22 +10,23 @@
 	import { propKey } from '@evidence-dev/component-utilities/chartContext';
 	const props = getContext(propKey);
 
-	export let data;
-	export let rowNumbers;
-	export let columnSummary;
+	export let data = undefined;
+	export let rowNumbers = undefined;
+	export let columnSummary = undefined;
 	export let rowColor = undefined;
 	export let fontColor = undefined;
-	export let groupType;
+	export let groupType = undefined;
+	export let finalColumnOrder = undefined;
 </script>
 
 <tr class="font-semibold" style:background-color={rowColor} style:color={fontColor}>
 	{#if rowNumbers && groupType !== 'section'}
 		<TableCell class="index w-[2%]" topBorder="border-t border-gray-600" />
 	{/if}
 
-	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) : columnSummary
+	{#each $props.columns.length > 0 ? $props.columns.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) : columnSummary
 				.filter((d) => d.show === true)
-				.sort((a, b) => $props.finalColumnOrder.indexOf(a.id) - $props.finalColumnOrder.indexOf(b.id)) as column}
+				.sort((a, b) => finalColumnOrder.indexOf(a.id) - finalColumnOrder.indexOf(b.id)) as column}
 		{@const colColumnSummary = safeExtractColumn(column, columnSummary)}
 		{@const format = column.totalFmt
 			? getFormatObjectFromString(column.totalFmt)
@@ -51,7 +52,7 @@
 						format_object={format}
 						columnUnitSummary={colColumnSummary.columnUnitSummary}
 						showValue={column.showValue}
-						deltaSymbol={column.deltaSymbol}
+						showSymbol={column.deltaSymbol}
 						align={column.align}
 						fontClass="font-semibold text-[9.25pt]"
 						neutralMin={column.neutralMin}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte
@@ -14,7 +14,7 @@
 
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import CodeBlock from '../../ui/CodeBlock.svelte';
-	import { safeExtractColumn, aggregateColumn } from './datatable.js';
+	import { safeExtractColumn, aggregateColumn, getFinalColumnOrder } from './datatable.js';
 	import TableRow from './TableRow.svelte';
 	import TotalRow from './TotalRow.svelte';
 	import SubtotalRow from './SubtotalRow.svelte';
@@ -39,7 +39,7 @@
 	export let rowNumbers = false;
 	$: rowNumbers = rowNumbers === 'true' || rowNumbers === true;
 
-	export let groupBy;
+	export let groupBy = undefined;
 	export let groupsOpen = true; // starting toggle for groups - open or closed
 	$: groupsOpen = groupsOpen === 'true' || groupsOpen === true;
 	export let groupType = 'accordion'; // accordion | section
@@ -133,18 +133,8 @@
 
 	let priorityColumns = [groupBy];
 
-	// Function to get the final column order
-	const getFinalColumnOrder = (obj, priorityColumns) => {
-		const allColumns = Object.keys(obj);
-		const restColumns = allColumns.filter((key) => !priorityColumns.includes(key));
-		return [...priorityColumns, ...restColumns];
-	};
-
-	// Determine the final column order based on the first object and priority columns
-	const finalColumnOrder = getFinalColumnOrder(data[0], priorityColumns);
-
 	props.update((d) => {
-		return { ...d, finalColumnOrder };
+		return { ...d, priorityColumns };
 	});
 
 	$: try {
@@ -478,10 +468,12 @@
 			<table>
 				<TableHeader
 					{rowNumbers}
-					{groupType}
 					{headerColor}
 					{headerFontColor}
-					{finalColumnOrder}
+					finalColumnOrder={getFinalColumnOrder(
+						$props.columns.length > 0 ? $props.columns.map((d) => d.id) : Object.keys(data[0]),
+						$props.priorityColumns
+					)}
 					{columnSummary}
 					{sortable}
 					{sort}
@@ -501,6 +493,12 @@
 								rowColor={accordionRowColor}
 								{rowNumbers}
 								{subtotals}
+								finalColumnOrder={getFinalColumnOrder(
+									$props.columns.length > 0
+										? $props.columns.map((d) => d.id)
+										: Object.keys(data[0]),
+									$props.priorityColumns
+								)}
 							/>
 							{#if groupToggleStates[groupName]}
 								<TableRow
@@ -514,6 +512,12 @@
 									{columnSummary}
 									grouped={true}
 									groupColumn={groupBy}
+									finalColumnOrder={getFinalColumnOrder(
+										$props.columns.length > 0
+											? $props.columns.map((d) => d.id)
+											: Object.keys(data[0]),
+										$props.priorityColumns
+									)}
 								/>
 							{/if}
 						{:else if groupType === 'section'}
@@ -530,6 +534,12 @@
 								{columnSummary}
 								grouped={true}
 								{groupNamePosition}
+								finalColumnOrder={getFinalColumnOrder(
+									$props.columns.length > 0
+										? $props.columns.map((d) => d.id)
+										: Object.keys(data[0]),
+									$props.priorityColumns
+								)}
 							/>
 							{#if subtotals}
 								<SubtotalRow
@@ -538,9 +548,14 @@
 									{columnSummary}
 									rowColor={subtotalRowColor}
 									fontColor={subtotalFontColor}
-									{rowNumbers}
 									{groupType}
 									{groupBy}
+									finalColumnOrder={getFinalColumnOrder(
+										$props.columns.length > 0
+											? $props.columns.map((d) => d.id)
+											: Object.keys(data[0]),
+										$props.priorityColumns
+									)}
 								/>
 							{/if}
 						{/if}
@@ -554,6 +569,10 @@
 						{rowLines}
 						{index}
 						{columnSummary}
+						finalColumnOrder={getFinalColumnOrder(
+							$props.columns.length > 0 ? $props.columns.map((d) => d.id) : Object.keys(data[0]),
+							$props.priorityColumns
+						)}
 					/>
 				{/if}
 
@@ -565,6 +584,10 @@
 						rowColor={totalRowColor}
 						fontColor={totalFontColor}
 						{groupType}
+						finalColumnOrder={getFinalColumnOrder(
+							$props.columns.length > 0 ? $props.columns.map((d) => d.id) : Object.keys(data[0]),
+							$props.priorityColumns
+						)}
 					/>
 				{/if}
 			</table>
@@ -676,7 +699,7 @@
 <style>
 	.table-container {
 		font-size: 9.5pt;
-		width: 97%;
+		width: 98%;
 	}
 
 	.container {