@bexis2/bexis2-core-ui 0.3.1 → 0.3.3

package/src/lib/components/Table/Table.svelte

@@ -6,7 +6,8 @@
 		addPagination,
 		addExpandedRows,
 		addColumnFilters,
-		addTableFilter
+		addTableFilter,
+		addDataExport
 	} from 'svelte-headless-table/plugins';
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { SlideToggle, storePopup } from '@skeletonlabs/skeleton';
@@ -20,24 +21,30 @@
 
 	export let config: TableConfig<any>;
 
+	// Destructuring the config object and setting default values
 	let {
-		id: tableId,
-		data,
-		columns,
-		resizable = 'none',
-		height = null,
-		optionsComponent,
-		defaultPageSize = 10,
-		toggle = false,
-		pageSizes = [5, 10, 15, 20],
-		fitToScreen = true
+		id: tableId, // Unique table ID
+		data, // Data store
+		columns, // Column configuration
+		resizable = 'none', // Resizability config
+		height = null, // Table height
+		rowHeight = null, // Row height
+		optionsComponent, // Custom component to render in the last column
+		defaultPageSize = 10, // Default page size - number of rows to display per page
+		toggle = false, // Whether to display the fitToScreen toggle
+		pageSizes = [5, 10, 15, 20], // Page sizes to display in the pagination component
+		fitToScreen = true, // Whether to fit the table to the screen,
+		exportable = false // Whether to display the export button and enable export functionality
 	} = config;
 
+	// Creatign a type to access keys of the objects in the data store
 	type AccessorType = keyof (typeof $data)[number];
 
+	// Creating a dispatcher to dispatch actions to the parent component
 	const dispatch = createEventDispatcher();
 	const actionDispatcher = (obj) => dispatch('action', obj);
 
+	// Initializing the table
 	const table = createTable(data, {
 		colFilter: addColumnFilters(),
 		tableFilter: addTableFilter({
@@ -45,11 +52,13 @@
 		}),
 		sort: addSortBy({ disableMultiSort: true }),
 		page: addPagination({ initialPageSize: defaultPageSize }),
-		expand: addExpandedRows()
+		expand: addExpandedRows(),
+		export: addDataExport({ format: 'csv' })
 	});
 
+	// A variable to hold all the keys
 	const allCols: { [key: string]: any } = {};
-
+	// Iterating over each item to get all the possible keys
 	$data.forEach((item) => {
 		Object.keys(item).forEach((key) => {
 			if (!allCols[key]) {
@@ -57,12 +66,13 @@
 			}
 		});
 	});
-
+	// Creating an array of all the keys
 	const accessors: AccessorType[] = Object.keys(allCols) as AccessorType[];
-
+	// Configuring every table column with the provided options
 	const tableColumns = [
 		...accessors
 			.filter((accessor) => {
+				// Filtering only unexcluded columns
 				const key = accessor as string;
 				if (columns !== undefined && key in columns && columns[key].exclude === true) {
 					return false;
@@ -71,22 +81,25 @@
 			})
 			.map((accessor) => {
 				const key = accessor as string;
+				// Applying configuration options for configured columns
 				if (columns !== undefined && key in columns) {
 					const {
-						header,
-						colFilterFn,
-						colFilterComponent,
-						instructions,
-						disableFiltering = false,
-						disableSorting = false
+						header, // Custom header to display
+						colFilterFn, // Custom column filter function
+						colFilterComponent, // Custom column filter component
+						instructions, // Custom instructions for the column cells (sorting, filtering, searching, rendering)
+						disableFiltering = false, // Whether to disable filtering for the column
+						disableSorting = false // Whether to disable sorting for the column
 					} = columns[key];
 
 					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
 						instructions ?? {};
 
 					return table.column({
+						// If header is not provided, use the key as the header
 						header: header ?? key,
 						accessor: accessor,
+						// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
 						cell: ({ value, row }) => {
 							return renderComponent
 								? createRender(renderComponent, { value, row })
@@ -95,23 +108,27 @@
 								: value;
 						},
 						plugins: {
+							// Sorting config
 							sort: {
 								disable: disableSorting,
 								invert: true,
 								getSortValue: (row) => {
+									// If provided, use the custom sorting function toSortableValueFn(), or just use the value
 									return toSortableValueFn ? toSortableValueFn(row) : row;
 								}
 							},
 							colFilter: !disableFiltering
 								? {
 										fn: ({ filterValue, value }) => {
+											// If provided, use the custom filtering function toFilterableValueFn(), or just use the value
 											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
-
+											// If provided, use the custom filtering function colFilterFn(), or just use the default columnFilter()
 											return colFilterFn
 												? colFilterFn({ filterValue, value: val })
 												: columnFilter({ filterValue, value: val });
 										},
 										render: ({ filterValue, values, id }) => {
+											// If provided, use the custom filter component, or use the default TableFilter component
 											return createRender(colFilterComponent ?? TableFilter, {
 												filterValue,
 												id,
@@ -123,23 +140,29 @@
 								  }
 								: undefined,
 							tableFilter: {
+								// Search filter config
 								getFilterValue: (row) => {
+									// If provided, use the custom toString function toStringFn(), or just use the value
 									return toStringFn ? toStringFn(row) : row;
 								}
 							}
 						}
 					});
 				} else {
+					// Default configuration for unconfigured columns
 					return table.column({
 						header: key,
 						accessor: accessor,
 						cell: ({ value }) => {
+							// If null or undefined, return an empty string
 							return value ? value : '';
 						},
 						plugins: {
+							// Sorting enabled by default
 							sort: {
 								invert: true
 							},
+							// Filtering enabled by default
 							colFilter: {
 								fn: columnFilter,
 								render: ({ filterValue, values, id }) =>
@@ -156,11 +179,17 @@
 			})
 	];
 
+	// If optionsComponent is provided, add a column for it at the end
 	if (optionsComponent !== undefined) {
 		tableColumns.push(
 			table.display({
 				id: 'optionsColumn',
 				header: '',
+				plugins: {
+					export: {
+						exclude: true
+					}
+				},
 				cell: ({ row }, _) => {
 					return createRender(optionsComponent!, {
 						row: row.isData() ? row.original : null,
@@ -171,53 +200,63 @@
 		);
 	}
 
+	// Creating the table columns
 	const createdTableColumns = table.createColumns(tableColumns);
-
+	// Creating the table view model
 	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
 		table.createViewModel(createdTableColumns);
+	// Extracting filterValue to bind it for the search input and search immediately on input
 	const { filterValue } = pluginStates.tableFilter;
+	// CSV content to be exported. If unexportable, then null
+	const { exportedData } = pluginStates.export;
 
+	// Function to determine minWidth for a column to simplify the logic in the HTML
 	const minWidth = (id: string) => {
 		if (columns && id in columns) {
 			return columns[id].minWidth ?? 0;
 		}
 		return 0;
 	};
-
+	// Function to determine fixedWidth for a column to simplify the logic in the HTML
 	const fixedWidth = (id: string) => {
 		if (columns && id in columns) {
 			return columns[id].fixedWidth ?? 0;
 		}
 		return 0;
 	};
-
+	// Function to create custom styles for the columns to simplify the logic in the HTML
 	const cellStyle = (id: string) => {
 		const minW = minWidth(id);
 		const fixedW = fixedWidth(id);
 		const styles: string[] = [];
 
+		// If minWidth is provided, add to styles
 		minW && styles.push(`min-width: ${minW}px`);
+		// If fixedWidth is provided, add to styles
 		fixedW && styles.push(`width: ${fixedW}px`);
-
+		// Create and return styles separated by ';'
 		return styles.join(';');
 	};
 
+	// Resetting the resized columns and/or rows
 	const resetResize = () => {
+		// Run only if resizable is not none
 		if (resizable === 'columns' || resizable === 'both') {
 			$headerRows.forEach((row) => {
 				row.cells.forEach((cell) => {
 					const minW = minWidth(cell.id);
 					const fixedW = fixedWidth(cell.id);
-
+					// If a fixedWidth is provided for a column, then reset the width to that value
 					fixedW &&
 						document
 							.getElementById(`th-${tableId}-${cell.id}`)
 							?.style.setProperty('width', `${fixedW}px`);
+					// If a minWidth is provided for a column, then reset the width to that value
 					minW &&
 						document
 							.getElementById(`th-${tableId}-${cell.id}`)
 							?.style.setProperty('min-width', `${minW}px`);
-
+					// If neither minWidth nor fixedWidth provided for a column, then reset the width to auto
 					!minW &&
 						!fixedW &&
 						document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
@@ -228,6 +267,7 @@
 		if (resizable === 'rows' || resizable === 'both') {
 			$pageRows.forEach((row) => {
 				row.cells.forEach((cell) => {
+					// Reset all row heights to auto
 					document
 						.getElementById(`${tableId}-${cell.id}-${row.id}`)
 						?.style.setProperty('height', 'auto');
@@ -235,10 +275,22 @@
 			});
 		}
 	};
+
+	const exportAsCsv = () => {
+		// Creating a hidden anchor element to download the CSV file
+		const anchor = document.createElement('a');
+		anchor.style.display = 'none';
+		anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent($exportedData)}`;
+		anchor.download = `${tableId}.csv`;
+		document.body.appendChild(anchor);
+		anchor.click();
+		document.body.removeChild(anchor);
+	};
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
+		<!-- Enable the search filter if table is not empty -->
 		{#if $data.length > 0}
 			<input
 				class="input p-2 border border-primary-500"
@@ -247,123 +299,144 @@
 				placeholder="Search rows..."
 				id="{tableId}-search"
 			/>
-		{/if}
-
-		<div class="flex justify-between items-center py-2 w-full">
-			<div>
-				{#if toggle}
-					<SlideToggle
-						name="slider-label"
-						active="bg-primary-500"
-						size="sm"
-						checked={fitToScreen}
-						id="{tableId}-toggle"
-						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-					>
-				{/if}
-			</div>
-			<div>
-				{#if resizable !== 'none'}
-					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={resetResize}>Reset sizing</button
-					>
-				{/if}
+			<div class="flex justify-between items-center py-2 w-full">
+				<div>
+					<!-- Enable the fitToScreen toggle if toggle === true -->
+					{#if toggle}
+						<SlideToggle
+							name="slider-label"
+							active="bg-primary-500"
+							size="sm"
+							checked={fitToScreen}
+							id="{tableId}-toggle"
+							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+						>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<!-- Enable the resetResize button if resizable !== 'none' -->
+					{#if resizable !== 'none'}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={resetResize}>Reset sizing</button
+						>
+					{/if}
+					{#if exportable}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={exportAsCsv}>Export as CSV</button
+						>
+					{/if}
+				</div>
 			</div>
-		</div>
+		{/if}
 
 		<div class="overflow-auto" style="height: {height}px">
 			<table
 				{...$tableAttrs}
-				class="table table-auto table-compact bg-tertiary-500/30 overflow-clip"
+				class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 				id="{tableId}-table"
 			>
+				<!-- If table height is provided, making the top row sticky -->
 				<thead class=" {height != null ? `sticky top-0` : ''}">
-					{#each $headerRows as headerRow (headerRow.id)}
-						<Subscribe
-							rowAttrs={headerRow.attrs()}
-							let:rowAttrs
-							rowProps={headerRow.props()}
-							let:rowProps
-						>
-							<tr {...rowAttrs} class="bg-primary-300 items-stretch">
-								{#each headerRow.cells as cell (cell.id)}
-									<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-										<th
-											scope="col"
-											class="!p-2 overflow-auto"
-											class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-												!fixedWidth(cell.id)}
-											{...attrs}
-											id="th-{tableId}-{cell.id}"
-											style={cellStyle(cell.id)}
-										>
-											<div class="flex justify-between items-center">
-												<div class="flex gap-1 whitespace-pre-wrap">
-													<span
-														class:underline={props.sort.order}
-														class:normal-case={cell.id !== cell.label}
-														class:cursor-pointer={!props.sort.disabled}
-														on:click={props.sort.toggle}
-														on:keydown={props.sort.toggle}
-													>
-														{cell.render()}
-													</span>
-													<div class="w-2">
-														{#if props.sort.order === 'asc'}
-															▾
-														{:else if props.sort.order === 'desc'}
-															▴
-														{/if}
-													</div>
-												</div>
-												{#if cell.isData()}
-													{#if props.colFilter?.render}
-														<div class="">
-															<Render of={props.colFilter.render} />
+					{#if $data.length > 0}
+						{#each $headerRows as headerRow (headerRow.id)}
+							<Subscribe
+								rowAttrs={headerRow.attrs()}
+								let:rowAttrs
+								rowProps={headerRow.props()}
+								let:rowProps
+							>
+								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500 items-stretch">
+									{#each headerRow.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
+											<th
+												scope="col"
+												class="!p-2 overflow-auto"
+												class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+													!fixedWidth(cell.id)}
+												{...attrs}
+												id="th-{tableId}-{cell.id}"
+												style={cellStyle(cell.id)}
+											>
+												<div class="flex justify-between items-center">
+													<div class="flex gap-1 whitespace-pre-wrap">
+														<!-- Adding sorting config and styling -->
+														<span
+															class:underline={props.sort.order}
+															class:normal-case={cell.id !== cell.label}
+															class:cursor-pointer={!props.sort.disabled}
+															on:click={props.sort.toggle}
+															on:keydown={props.sort.toggle}
+														>
+															{cell.render()}
+														</span>
+														<div class="w-2">
+															{#if props.sort.order === 'asc'}
+																▾
+															{:else if props.sort.order === 'desc'}
+																▴
+															{/if}
 														</div>
+													</div>
+													<!-- Adding column filter config -->
+													{#if cell.isData()}
+														{#if props.colFilter?.render}
+															<div class="">
+																<Render of={props.colFilter.render} />
+															</div>
+														{/if}
 													{/if}
-												{/if}
-											</div>
-										</th>
-									</Subscribe>
-								{/each}
-							</tr>
-						</Subscribe>
+												</div>
+											</th>
+										</Subscribe>
+									{/each}
+								</tr>
+							</Subscribe>
+						{/each}
 					{:else}
+						<!-- Table is empty -->
 						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-					{/each}
+					{/if}
 				</thead>
 
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
-					{#each $pageRows as row (row.id)}
-						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
-								{#each row.cells as cell, index (cell?.id)}
-									<Subscribe attrs={cell.attrs()} let:attrs>
-										<td
-											{...attrs}
-											class="!p-2 overflow-auto {index === 0 &&
-											(resizable === 'rows' || resizable === 'both')
-												? 'resize-y'
-												: ''}"
-											id="{tableId}-{cell.id}-{row.id}"
-										>
-											<div class="flex items-center h-max overflow-x-auto">
-												<Render of={cell.render()} />
-											</div>
-										</td>
-									</Subscribe>
-								{/each}
-							</tr>
-						</Subscribe>
-					{/each}
+					{#if $data.length > 0}
+						{#each $pageRows as row (row.id)}
+							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
+									{#each row.cells as cell, index (cell?.id)}
+										<Subscribe attrs={cell.attrs()} let:attrs>
+											<td
+												{...attrs}
+												class="!p-2 overflow-auto {index === 0 &&
+												(resizable === 'rows' || resizable === 'both')
+													? 'resize-y'
+													: ''}"
+												id="{tableId}-{cell.id}-{row.id}"
+											>
+												<!-- Adding config for initial rowHeight, if provided -->
+												<div
+													class="flex items-center"
+													style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+												>
+													<div class="grow h-full"><Render of={cell.render()} /></div>
+												</div>
+											</td>
+										</Subscribe>
+									{/each}
+								</tr>
+							</Subscribe>
+						{/each}
+					{/if}
 				</tbody>
 			</table>
 		</div>
 	</div>
 	{#if $data.length > 0}
+		<!-- Adding pagination, if table is not empty -->
 		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
 	{/if}
 </div>

package/src/lib/components/Table/TableFilter.svelte

@@ -14,8 +14,10 @@
 	let firstValue;
 	let secondOption;
 	let secondValue;
+	// If the filter is applied and the displayed values are filtered
 	let active = false;
 
+	// Options for different types of values
 	const options = {
 		number: [
 			{
@@ -97,8 +99,9 @@
 		]
 	};
 
+	// Unique ID for the column filter popup
 	const popupId = `${tableId}-${id}`;
-
+	// Popup config
 	const popupFeatured: PopupSettings = {
 		event: 'click',
 		target: popupId,
@@ -107,7 +110,7 @@
 
 	let type: string = 'string';
 	let isDate = false;
-
+	// Check the type of the column
 	$values.forEach((item) => {
 		if (item) {
 			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
@@ -119,7 +122,7 @@
 			}
 		}
 	});
-
+	// Determine if the type is date
 	type = isDate ? 'date' : type;
 </script>
 
@@ -140,6 +143,7 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					// Set the defaults when cleared
 					firstOption = 'isequal';
 					firstValue = undefined;
 					secondOption = 'isequal';