@bexis2/bexis2-core-ui 0.3.2 → 0.3.3

package/README.md

@@ -1,5 +1,16 @@
 # bexis-core-ui
 
+## 0.3.3
+
+- Table
+  - `rowHeight (number)`: fixed height for rows in pixels. (if combined with resizability, acts as minimum height)
+  - `exportability (boolean)`: if toggled true, lets user to export the current state of the table as CSV.
+  - Optimized styles for dark mode.
+  - Bug fix related to empty tables.
+  - Migrated to new TableOfContents (Beta) on documentation page.
+- LightSwitch for toggling dark mode on documentation pages.
+- Optimized surface colors in dark mode.
+
 ## 0.3.1
 
 - add bexis2theme

package/dist/components/Table/Table.svelte

@@ -5,7 +5,8 @@ import {
   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";
@@ -16,15 +17,29 @@ import { columnFilter, searchFilter } from "./filter";
 export let config;
 let {
   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],
-  fitToScreen = true
+  // 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;
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
@@ -35,7 +50,8 @@ const table = createTable(data, {
   }),
   sort: addSortBy({ disableMultiSort: true }),
   page: addPagination({ initialPageSize: defaultPageSize }),
-  expand: addExpandedRows()
+  expand: addExpandedRows(),
+  export: addDataExport({ format: "csv" })
 });
 const allCols = {};
 $data.forEach((item) => {
@@ -58,20 +74,29 @@ const tableColumns = [
     if (columns !== void 0 && key in columns) {
       const {
         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,
+        // 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 }) : toStringFn ? toStringFn(value) : value;
         },
         plugins: {
+          // Sorting config
           sort: {
             disable: disableSorting,
             invert: true,
@@ -95,6 +120,7 @@ const tableColumns = [
             }
           } : void 0,
           tableFilter: {
+            // Search filter config
             getFilterValue: (row) => {
               return toStringFn ? toStringFn(row) : row;
             }
@@ -109,9 +135,11 @@ const tableColumns = [
           return value ? value : "";
         },
         plugins: {
+          // Sorting enabled by default
           sort: {
             invert: true
           },
+          // Filtering enabled by default
           colFilter: {
             fn: columnFilter,
             render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, {
@@ -131,6 +159,11 @@ if (optionsComponent !== void 0) {
     table.display({
       id: "optionsColumn",
       header: "",
+      plugins: {
+        export: {
+          exclude: true
+        }
+      },
       cell: ({ row }, _) => {
         return createRender(optionsComponent, {
           row: row.isData() ? row.original : null,
@@ -143,6 +176,7 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
+const { exportedData } = pluginStates.export;
 const minWidth = (id) => {
   if (columns && id in columns) {
     return columns[id].minWidth ?? 0;
@@ -183,10 +217,20 @@ const resetResize = () => {
     });
   }
 };
+const exportAsCsv = () => {
+  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"
@@ -195,123 +239,144 @@ const resetResize = () => {
 				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/dist/components/Table/TableFilter.svelte

@@ -129,6 +129,7 @@ type = isDate ? "date" : type;
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				on:click|preventDefault={() => {
+					// Set the defaults when cleared
 					firstOption = 'isequal';
 					firstValue = undefined;
 					secondOption = 'isequal';

package/dist/index.d.ts

@@ -22,12 +22,12 @@ import type { TableConfig, Columns, Column } from './models/Models';
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+import { bexis2theme } from './themes/theme-bexis2';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-export { bexis2theme } from './themes/theme-bexis2';
 export type { userType, inputType, fileUploaderType, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
@@ -40,3 +40,4 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 export { CodeEditor };
 export type { TableConfig, Columns, Column };
+export { bexis2theme };

package/dist/index.js

@@ -30,6 +30,8 @@ import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 //table placeholder
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
+// theme
+import { bexis2theme } from './themes/theme-bexis2';
 //Form
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 //File
@@ -39,8 +41,6 @@ export { Spinner, Page, Alert, Menu, ErrorMessage };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
-// theme
-export { bexis2theme } from './themes/theme-bexis2';
 //help
 export { helpStore } from './stores/pageStores';
 //notification
@@ -55,3 +55,5 @@ export { positionType, pageContentLayoutType, decimalCharacterType, orientationT
 export { Table, TableFilter, columnFilter, searchFilter };
 // CodeEditor
 export { CodeEditor };
+// theme
+export { bexis2theme };

package/dist/models/Models.d.ts

@@ -87,7 +87,9 @@ export interface TableConfig<T> {
     toggle?: boolean;
     fitToScreen?: boolean;
     height?: null | number;
+    rowHeight?: number;
     columns?: Columns;
+    exportable?: boolean;
     pageSizes?: number[];
     defaultPageSize?: number;
     optionsComponent?: typeof SvelteComponent;

package/dist/themes/theme-bexis2.js

@@ -95,5 +95,18 @@ export const bexis2theme = {
         '--color-surface-700': '149 149 149',
         '--color-surface-800': '119 119 119',
         '--color-surface-900': '98 98 98' // #626262
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '224 224 224',
+        '--color-surface-100': '213 213 213',
+        '--color-surface-200': '203 203 203',
+        '--color-surface-300': '171 171 171',
+        '--color-surface-400': '109 109 109',
+        '--color-surface-500': '46 46 46',
+        '--color-surface-600': '41 41 41',
+        '--color-surface-700': '35 35 35',
+        '--color-surface-800': '28 28 28',
+        '--color-surface-900': '23 23 23' // #171717
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -74,7 +74,7 @@
     "delay": "^6.0.0",
     "dotenv": "^16.3.1",
     "eslint4b-prebuilt": "^6.7.2",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",
     "svelte-codemirror-editor": "^1.1.0",

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';

package/src/lib/index.ts

@@ -39,6 +39,9 @@ import Notification from './components/page/Notification.svelte';
 //table placeholder
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
 
+// theme
+import { bexis2theme } from './themes/theme-bexis2';
+
 //Form
 export {
 	Checkbox,
@@ -62,11 +65,6 @@ export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
 
-// theme
-export { bexis2theme } from './themes/theme-bexis2';
-
-
-
 //Type
 export type {
 	userType,
@@ -109,3 +107,6 @@ export { Table, TableFilter, columnFilter, searchFilter };
 export { CodeEditor };
 
 export type { TableConfig, Columns, Column };
+
+// theme
+export { bexis2theme };

package/src/lib/models/Models.ts

@@ -80,10 +80,10 @@ export interface fileObjType {
 }
 
 export interface ColumnInstructions {
-	toStringFn?: (any) => string;
-	toSortableValueFn?: (any) => string | number;
-	toFilterableValueFn?: (any) => string | number | Date;
-	renderComponent?: typeof SvelteComponent;
+	toStringFn?: (any) => string; // value by default
+	toSortableValueFn?: (any) => string | number; // value by default
+	toFilterableValueFn?: (any) => string | number | Date; // value by default
+	renderComponent?: typeof SvelteComponent; // null by default
 }
 
 // Table column type
@@ -111,7 +111,9 @@ export interface TableConfig<T> {
 	toggle?: boolean; // false by default
 	fitToScreen?: boolean; // true by default
 	height?: null | number; // null by default
+	rowHeight?: number; // auto by default
 	columns?: Columns;
+	exportable?: boolean; // false by default
 	pageSizes?: number[]; // [5, 10, 15, 20] by default
 	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;

package/src/lib/stores/pageStores.ts

@@ -214,4 +214,3 @@ function createNotificationStore() {
 
 //crate and export the instance of the store
 export const notificationStore = createNotificationStore();
-

package/src/lib/themes/theme-bexis2.ts

@@ -97,5 +97,18 @@ export const bexis2theme: CustomThemeConfig = {
 		'--color-surface-700': '149 149 149', // #959595
 		'--color-surface-800': '119 119 119', // #777777
 		'--color-surface-900': '98 98 98' // #626262
+	},
+	properties_dark: {
+		// surface | #2e2e2e
+		'--color-surface-50': '224 224 224', // #e0e0e0
+		'--color-surface-100': '213 213 213', // #d5d5d5
+		'--color-surface-200': '203 203 203', // #cbcbcb
+		'--color-surface-300': '171 171 171', // #ababab
+		'--color-surface-400': '109 109 109', // #6d6d6d
+		'--color-surface-500': '46 46 46', // #2e2e2e
+		'--color-surface-600': '41 41 41', // #292929
+		'--color-surface-700': '35 35 35', // #232323
+		'--color-surface-800': '28 28 28', // #1c1c1c
+		'--color-surface-900': '23 23 23' // #171717
 	}
 };