diff --git a/frontend/src/lib/components/table/AutoDataTable.svelte b/frontend/src/lib/components/table/AutoDataTable.svelte index 76e18ca239..0d8b8c045b 100644 --- a/frontend/src/lib/components/table/AutoDataTable.svelte +++ b/frontend/src/lib/components/table/AutoDataTable.svelte @@ -92,6 +92,7 @@ $: slicedData = data.slice((currentPage - 1) * perPage, currentPage * perPage) let selection = [] as Array + let colSelection = [] as Array // Function to handle individual row checkbox change function handleCheckboxChange(rowId: number) { @@ -106,14 +107,19 @@ // Function to handle select all checkbox change function handleSelectAllChange() { - if (selection.length === 0 || selection.length < slicedData.length) { + if ( + selection.length === 0 || + (selection.length < slicedData.length && + (colSelection.length === 0 || colSelection.length < headers.length)) + ) { // Select all rows selection = slicedData.map((row) => row._id) + colSelection = [...headers] } else { // Deselect all rows selection = [] + colSelection = [] } - selection = [...selection] } let renderCount = 0 @@ -134,6 +140,16 @@ // let typof = typeof value // return (value != undefined && typof === 'string') || typof === 'number' || typof === 'boolean' // } + + function handleColumnSelected(key: string) { + if (colSelection.includes(key)) { + // Remove the id from the colSelection array + colSelection = colSelection.filter((id) => id !== key) + } else { + // Add the id to the colSelection array + colSelection = [...colSelection, key] + } + } @@ -156,11 +172,27 @@ selection.length > 0 ? structuredObjects .filter(({ _id }) => selection.includes(_id)) - .map((obj) => obj.rowData) - : objects + .map((obj) => + colSelection.length == 0 + ? obj.rowData + : Object.fromEntries( + Object.entries(obj.rowData).filter(([key, _]) => + colSelection.includes(key) + ) + ) + ) + : colSelection.length == 0 + ? objects + : objects.map((obj) => + Object.fromEntries( + Object.entries(obj).filter(([key, _]) => colSelection.includes(key)) + ) + ) ) }} - customText={selection.length > 0 ? 'Download selected as CSV' : undefined} + customText={selection.length > 0 || colSelection.length > 0 + ? 'Download selected as CSV' + : undefined} /> { @@ -190,6 +222,7 @@ displayName: 'Clear selection', icon: Columns, action: () => { + colSelection = [] selection = [] renderCount++ } @@ -273,6 +306,12 @@ {/if} + handleColumnSelected(key)} + /> {/each} @@ -280,7 +319,7 @@ {#each slicedData as { _id, rowData }, index (index)} - + {#each headers as key, index} {@const value = rowData[key]} - + {#if Array.isArray(value) && value.length === 0}
{:else if Array.isArray(value) && typeof value?.[0] === 'string'} diff --git a/frontend/src/lib/components/table/Cell.svelte b/frontend/src/lib/components/table/Cell.svelte index f28e52865f..0146ee67c6 100644 --- a/frontend/src/lib/components/table/Cell.svelte +++ b/frontend/src/lib/components/table/Cell.svelte @@ -8,7 +8,7 @@ export let numeric: boolean = false export let head: boolean = false export let shouldStopPropagation: boolean = false - + export let selected = false export let sticky: boolean = false let Tag = head ? 'th' : 'td' @@ -37,7 +37,9 @@ sticky ? `!p-0 sticky ${first ? 'left-0' : 'right-0'}` : 'px-2 py-3.5', size === 'sm' ? 'px-1.5 py-2.5' : '', size === 'lg' ? 'px-3 py-4' : '', - size === 'xs' ? 'px-1 py-1.5' : '' + size === 'xs' ? 'px-1 py-1.5' : '', + selected ? 'bg-blue-50 dark:bg-blue-900/50' : '', + 'transition-all' )} > {#if sticky}