diff --git a/.npmrc b/.npmrc
index 2b249b1..9844771 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,2 @@
 engine-strict=true
-@wjsoft:registry=https://www.npmjs.com
+@wjfe:registry=https://www.npmjs.com
diff --git a/README.md b/README.md
index 6398c14..e4430db 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# @wj/dataview
+# @wjfe/dataview
 
 > Svelte v5 table component suitable for examination of extensive tabular data.
 
@@ -8,6 +8,8 @@ The data view component renders a table with functionality suitable for close ex
 provides conveniences like pinnable columns and row highlighting on hover, useful to users when following data with 
 their eyes.
 
+> **[Demo Website](https://wj-dataview.vercel.app)**
+
 The component tries to be as unopinionated as possible in terms of styling and tries to provide as little styling as 
 possible.  Certain features, however, impose some appearance requirements.  For example, pinning columns in the grid 
 requires opaque background colors or else the data from other columns will be seen through the pinned columns when 
@@ -21,26 +23,53 @@ Tailwind CSS, Bulma, etc.), you may style it in accordance to what is shown in t
 Install the package:
 
 ```powershell
-npm i @wj/dataview
+npm i @wjfe/dataview
 ```
 
 Now import the data view component and use it:
 
 ```typescript
-import { WjDataView } from '@wj/dataview';
+import { WjDataView } from '@wjfe/dataview';
 ```
 
 The only two required properties are `columns` and `data`.  The former defines the columns in the data view; the 
 latter provides the data that shows in each column.  By default, the `key` property of each column is treated as the 
 key to retrieve data from the data row, but this can be overridden by providing `get` functions.
 
-> **[Demo Website](https://wj-dataview.vercel.app)**
-
-## Props
+Each column must have the `key` and the `text` properties.  Any other property is optional.  `key` is a unique string, 
+and by default, it is assumed to be the name of a property in the data objects given to the grid via the `data` 
+property.
 
-## Snippets (formerly slots)
+```html
+<script lang="ts">
+    import { WjDataView } from '@wjfe/dataview';
+    import { type MyDataModel } from 'path/to/my-model-types.js';
+
+    type MyDataModelGridRow = WjDvRow<MyDataModel>;
+    type MyColumn = WjDvColumn<Record<string, any>, MyDataModelGridRow>;
+    const columns = $state<MyColumn[]>([
+        {
+            key: 'id',
+            text: 'ID'
+        },
+        {
+            key: 'tagName',
+            text: 'Tag'
+        }
+    ]);
+    // Obtain the data somehow.  This could be part of the results of the universal or server load() SvelteKit 
+    // function, or could be obtained in non-SvelteKit projects with a fetch() call.
+    let data: $state<MyDataModel[]> = getDataSomehow();
+</script>
+...
+<WjDataView {columns} {data}>
+    <!-- snippets go here -->
+</WjDataView>
+```
 
-## Events
+This example would render the data view with two columns, whose captions will read `ID` and `Tag`.  The data shown in 
+each column will be extracted from the `MyDataModel.id` and `MyDataModel.tagName` properties of each of the data 
+objects in the `data` array.
 
 ## Theming the Data View
 
@@ -52,8 +81,8 @@ directly defining the CSS variables.
 ### The WjDataViewTheme Component
 
 This component is a mere convenience to setting up themes for data view components.  It works by defining the CSS 
-variables at the end of the section in a `<div>` element with its CSS `display` attribute set to `contets` that wraps 
-the target `WjDataView` component.
+variables in a `<div>` element with its CSS `display` attribute set to `contents` that wraps the target `WjDataView` 
+component.
 
 > **TIP**:  The `WjDataViewTheme` component doesn't have to be the immediate parent of a `WjDataView`.  It can be 
 > placed higher in the hierarchy to, for example, cover more than one `WjDataView` component.
@@ -82,11 +111,13 @@ export type Theme = {
 Since the amount of properties are a lot to set every time, the most effective way to create a theme is to spread the 
 stock theme (light or dark) and then modify what's needed.
 
+> In the future, deep merging instead of spreading will be enabled via the `wj-merge` package.
+
 For example, Bootstrap consumers might want to ensure that the data view always uses the body's background color.  In 
-this case, we could create the following theme in `dataViewThemes.ts`:
+this case, we could create the following theme in a `dataViewThemes.ts`:
 
 ```typescript
-import { stockLight, type Theme } from '@wj/dataview';
+import { stockLight, type Theme } from '@wjfe/dataview';
 
 export const bootstrapTheme: Theme = {
     ...stockLight,
@@ -106,15 +137,16 @@ export const bootstrapTheme: Theme = {
 };
 ```
 
-As seen, one can take advantage of CSS variables to define things.  In Bootstrap that provides light and dark modes, 
-have different definitions for these CSS variables, making the data view's theme immediately responsive to theme 
-selection changes.
+As seen, one can take advantage of CSS variables to define things.  Bootstrap provides light and dark modes, and these 
+variables have different definitions depending on the mode, making the data view's theme immediately responsive to 
+mode selection changes.
 
 This is not perfect, however, because Bootstrap doesn't have `-rgb` variables for every color, so not everything goes 
 as smoothly.  Create responsive CSS variables to perfect the theme.
 
 > **IMPORTANT**:  All background colors are composed using the provided color and an opacity value.  This is why the 
-> color must be specified in RGB format, or with a CSS variable that defines it in RGB format.
+> color must be specified in RGB format, or with a CSS variable that defines it in RGB format.  Formats like `#rrggbb` 
+> simply won't work.
 
 Anyway, use the `WjDataViewTheme` component as a wrapper for any `WjDataView` components that you may have.  This 
 wrapper doesn't have to be the immediate parent, so put it wherever is best according to your needs.
@@ -147,6 +179,42 @@ The complete list of CSS variables that can be set for the data view component a
 | `--wjdv-sticky-divider-width` | `0.1em` | `0.1em` | Width of the border that divides pinned columns from unpinned ones. |
 | `--wjdv-sticky-divider-style` | `solid` | `solid` | Style of the border that divides pinned columns from unpinned ones. |
 | `--wjdv-sticky-divider-color` | `darkgray` | `lightgray` | Color of the border that divides pinned columns from unpinned ones. |
+| `--wjdv-resizer-width` | `0.4em` | `0.4em` | Column resizer's width. |
+| `--wjdv-resizer-bg-color-rgb` | `0, 0, 0` | `255, 255, 255` | Resizer handle's background color. |
+| `--wjdv-resizer-bg-opacity` | `0.05` | `0.05` | Resizer handle's background's opacity. |
+| `--wjdv-resizer-overlay-opacity` | `0.7` | `0.7` | Opacity of the entire resizer overlay. |
+| `--wjdv-resizer-overlay-bg-color` | `lightblue` | `#0578ea` | Background color of the overlay section that represents the original column's size. |
+| `--wjdv-resizer-overlay-border-color` | `blue` | `#13aeff` | Border color of the overlay section that represents the original column's size. |
+| `--wjdv-resizer-deltapos-bg-color` | `lightgreen` | `lightgreen` | Background color of the overlay setion that represents the column's size increase. |
+| `--wjdv-resizer-deltapos-border-color` | `green` | `green` | Border color of the overlay setion that represents the column's size increase. |
+| `--wjdv-resizer-deltaneg-bg-color` | `pink` | `pink` | Background color of the overlay setion that represents the column's size reduction. |
+| `--wjdv-resizer-deltaneg-border-color` | `red` | `red` | Border color of the overlay setion that represents the column's size reduction. |
+
+## Reference
+
+### Props
+
+| Property | Type | Default Value | Description |
+| - | - | - | - |
+| `columns` | `WjDvColumn<TCol, TRow>[]` | (none) | Defines the columns the data view component will create. |
+| `data` | `WjDvRow<TRow>[]` | (none) | The data that is shown by the data view component. |
+| `get` | `(row: TRow, key: string) => any` | (function) | Function that retrieves a column's value using the row and provided key for columns that don't provide one. |
+| `defaultWidth` | `number` | `10` | The width for colums that don't specify its own width, in `em`'s. |
+| `rowHighlight` | `boolean` | `true` | Turns the row-highlighting-on-hover feature on and off. |
+| `striped` | `boolean` | `true` | Turns the striping of rows on and off. |
+| `pinnedDivider` | `boolean` | `true` | Turns the divider between pinned and unpinned columns on and off. |
+| `class` | `string` | `undefined` | Additional CSS classes that are applied to the data view's viewport (the top-level element). |
+
+### Snippets (formerly slots)
+
+| Name | Signature | Description |
+| - | - | - |
+| `headerCell` | `(col: WjDvColumn<TCol, TRow>)` | Renders header cells' content.  The snippet is passed the column definition. |
+| `dataCell` | `(col: WjDvColumn<TCol, TRow>, row: WjDvRow<TRow>])` | Renders data cells' content.  The snippet is passed the column definition and the data object for the row being rendered. |
+
+### Events
+
+None.
 
 ## Roadmap
 
@@ -154,15 +222,16 @@ The complete list of CSS variables that can be set for the data view component a
 - [x] Striped look
 - [x] Row highlighting effect on hover
 - [x] Column alignment
+- [x] Text wrap control
 - [x] Hideable columns
 - [x] Pinnable columns
 - [x] Customizable appearance
 - [x] Theme component
 - [x] headerCell snippet
 - [x] dataCell snippet
+- [x] Resizable columns
 - [ ] headerControl snippet
 - [ ] dataControl snippet
 - [ ] Expansible rows (expansionRow snippet)
-- [ ] Resizable columns
 - [ ] Make cell/row/column padding themeable
 - [ ] dataRow snippet
diff --git a/package.json b/package.json
index 0834fc4..d12bb56 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@wj/dataview",
+	"name": "@wjfe/dataview",
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "vite dev",
@@ -31,6 +31,7 @@
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"publint": "^0.1.9",
+		"sass": "^1.77.1",
 		"svelte": "^5.0.0-next.136",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
@@ -40,10 +41,5 @@
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module",
-	"dependencies": {
-		"bootstrap": "^5.3.3",
-		"bootstrap-icons": "^1.11.3",
-		"sass": "^1.77.1"
-	}
+	"type": "module"
 }
diff --git a/src/app.html b/src/app.html
index a88224c..be7e4cb 100644
--- a/src/app.html
+++ b/src/app.html
@@ -5,10 +5,11 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" class="" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-		<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css" crossorigin="anonymous">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div>%sveltekit.body%</div>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
 	</body>
 </html>
diff --git a/src/index.test.ts b/src/index.test.ts
deleted file mode 100644
index e07cbbd..0000000
--- a/src/index.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
diff --git a/src/lib/Resizer.svelte b/src/lib/Resizer.svelte
new file mode 100644
index 0000000..a63e954
--- /dev/null
+++ b/src/lib/Resizer.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+	import zoomRatio from './zoomRatio.js';
+	import { fade } from 'svelte/transition';
+	import { combineClasses, noop } from './utils.js';
+
+	let {
+		minSize = 3,
+		maxSize,
+		resizeStart,
+		resizeEnd,
+		resize,
+	}: {
+		/**
+		 * Minimum allowed final size, in em's.
+		 */
+		minSize?: number;
+		/**
+		 * Maximum allowed final size, in em's.  If not specified, then there is no maximum.
+		 */
+		maxSize?: number;
+		resizeStart?: () => void;
+		resizeEnd?: () => void;
+		resize: (size: number | undefined) => void;
+	} = $props();
+
+	let dragStart = $state<number | null>(null);
+	let delta = $state(0);
+	let parentW = $state(0);
+	let parentH = $state(0);
+	let minSizePx = $state(0);
+	let maxSizePx = $state<number | undefined>(undefined);
+	let handle: HTMLDivElement;
+
+	$effect(() => {
+		if (dragStart === null) {
+			delta = 0;
+		}
+	});
+
+	const itemOverlayWidth = $derived(delta >= 0 ?
+		parentW :
+		Math.max(parentW + delta / $zoomRatio, minSizePx)
+	);
+	const deltaOverlayWidth = $derived(delta >= 0 ?
+		(maxSizePx === undefined ? delta / $zoomRatio : Math.min(delta / $zoomRatio, maxSizePx - parentW)) :
+		parentW - itemOverlayWidth
+	);
+	$effect(() => {
+		minSizePx = convert(minSize, 'em', 'px')!;
+		maxSizePx = convert(maxSize, 'em', 'px');
+	});
+
+	function handleMouseDown(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		dragStart = e.screenX;
+		document.body.style.cursor = 'col-resize';
+		(resizeStart ?? noop)();
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		if (dragStart !== null) {
+			delta = e.screenX - dragStart;
+		}
+	}
+
+	function handleMouseUp(e: MouseEvent) {
+		if (dragStart === null) {
+			return;
+		}
+		dragStart = null;
+		document.body.style.cursor = 'auto';
+		(resizeEnd ?? noop)();
+		if (delta === 0) {
+			return;
+		}
+		(resize ?? noop)(convert(itemOverlayWidth + (delta < 0 ? 0 : deltaOverlayWidth), 'px', 'em'));
+	}
+
+	function convert(value: number | undefined, fromUnit: string, toUnit: string) {
+		if (value === undefined || !handle) {
+			return undefined;
+		}
+		if (fromUnit === toUnit) {
+			return value;
+		}
+		const measure = (v: number, u: string) => {
+			const ruler = document.createElement('div');
+			ruler.style.height = '1px';
+			ruler.style.position = 'absolute';
+			ruler.style.width = `${v}${u}`;
+			handle?.parentNode?.appendChild(ruler);
+			const r = getComputedStyle(ruler).width;
+			handle?.parentNode?.removeChild(ruler);
+			return +`${r.substring(0, r.length - 2)}`;
+		};
+		let result = value;
+		if (fromUnit !== 'px') {
+			result = measure(value, fromUnit);
+		}
+		if (toUnit === 'px') {
+			return result;
+		}
+		const cf = measure(1, toUnit);
+		return result / cf;
+	}
+</script>
+
+<svelte:document on:mousemove="{handleMouseMove}" on:mouseup="{handleMouseUp}" />
+
+{#if dragStart !== null}
+	<div class="parent-overlay" style:height={`${parentH}px`} transition:fade={{ duration: 170 }}>
+		<div class="overlay item-overlay" style:width="{itemOverlayWidth}px"></div>
+		<div
+			class={combineClasses('overlay delta-overlay', { 'delta-neg': delta < 0, 'delta-pos': delta > 0 })}
+			style:width="{deltaOverlayWidth}px"
+		></div>
+	</div>
+{/if}
+<div class="parent-template" bind:clientWidth={parentW} bind:clientHeight={parentH}></div>
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="handle"
+	bind:this={handle}
+	onmousedown={handleMouseDown}
+	style:height="{parentH}px"
+	role="separator"
+	aria-valuenow={delta}
+></div>
+
+<style>
+	div.handle {
+		width: var(--wjdv-resizer-width, 0.3em);
+		cursor: col-resize;
+		margin-left: auto;
+		background-color: rgba(var(--wjdv-resizer-bg-color-rgb, 0, 0, 0), var(--wjdv-resizer-bg-opacity, 0.05));
+	}
+
+	div.parent-template {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+	}
+
+	div.parent-overlay {
+		display: flex;
+		flex-flow: row;
+		position: absolute;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+		z-index: 10;
+	}
+
+	div.overlay {
+		box-sizing: border-box;
+		opacity: var(--wjdv-resizer-overlay-opacity, 0.7);
+		border-width: 0.15em;
+		border-style: dashed;
+	}
+
+	div.item-overlay {
+		box-sizing: border-box;
+		height: 100%;
+		background-color: var(--wjdv-resizer-overlay-bg-color, lightblue);
+		border-color: var(--wjdv-resizer-overlay-border-color, blue);
+	}
+
+	div.delta-overlay {
+		height: 100%;
+	}
+
+	div.delta-pos {
+		background-color: var(--wjdv-resizer-deltapos-bg-color, lightgreen);
+		border-color: var(--wjdv-resizer-deltapos-border-color, green);
+	}
+
+	div.delta-neg {
+		background-color: var(--wjdv-resizer-deltaneg-bg-color, pink);
+		border-color: var(--wjdv-resizer-deltaneg-border-color, red);
+	}
+</style>
diff --git a/src/lib/WjDataView.svelte b/src/lib/WjDataView.svelte
index 1bb814c..26b7dbe 100644
--- a/src/lib/WjDataView.svelte
+++ b/src/lib/WjDataView.svelte
@@ -3,24 +3,25 @@
 
     export type WjDvRow<TRow extends Record<string, any> = Record<string, any>> = TRow & {
         id: string | number;
-        selected?: boolean;
         expanded?: boolean;
-    }
+    };
 
     export type WjDvColumn<TCol extends Record<string, any> = Record<string, any>, TRow extends Record<string, any> = Record<string, any>> = TCol & {
         key: string;
         text: string;
         width?: number;
-        pinnable?: boolean;
+        minWidth?: number;
+        resizable?: boolean;
         pinned?: boolean;
         hidden?: boolean;
         alignment?: ColAlignment;
         noTextWrap?: boolean;
         get?: (row: TRow) => any;
-    }
+    };
 </script>
 
 <script lang="ts" generics="TCol extends Record<string, any> = Record<string, any>, TRow extends Record<string, any> = Record<string, any>">
+    import Resizer from "./Resizer.svelte";
     import { combineClasses } from "./utils.js";
     import { type Snippet } from "svelte";
 
@@ -37,15 +38,49 @@
         class: cssClass,
         ...restProps
     }: {
+        /**
+         * Defines the columns the data view component will create.
+         */
         columns: WjDvColumn<TCol, TRow>[];
+        /**
+         * The data that is shown by the data view component.
+         */
         data: WjDvRow<TRow>[];
+        /**
+         * Function that retrieves a column's value using the row and provided key for columns that don't provide one.
+         * 
+         * **HINT**:  Its signature matches that of `dot-prop`'s `getProperty()` function.
+         * @param row Data object for the row being rendered (hence its name).
+         * @param key Key of the column being rendered.
+         */
         get?: (row: TRow, key: string) => any;
+        /**
+         * The width for colums that don't specify its own width, in `em`'s.
+         */
         defaultWidth?: number;
+        /**
+         * Turns the row-highlighting-on-hover feature on and off.
+         */
         rowHighlight?: boolean;
+        /**
+         * Turns the striping of rows on and off.
+         */
         striped?: boolean;
+        /**
+         * Turns the divider between pinned and unpinned columns on and off.
+         */
         pinnedDivider?: boolean;
-        headerCell?: Snippet<[WjDvColumn<TCol, TRow>]>
-        dataCell?: Snippet<[WjDvColumn<TCol,TRow>, WjDvRow<TRow>]>
+        /**
+         * Snippet used to render the contents of header cells.
+         */
+        headerCell?: Snippet<[WjDvColumn<TCol, TRow>]>;
+        /**
+         * Snippet used to render the contents of data cells.
+         */
+        dataCell?: Snippet<[WjDvColumn<TCol,TRow>, WjDvRow<TRow>]>;
+        /**
+         * Additional CSS classes that are applied to the data view's viewport (the top-level element).
+         */
         class?: string;
     } = $props();
 
@@ -94,14 +129,22 @@
         role="columnheader"
         style:width={`${columnWidth(ci.column)}em`}
         style:left={ci.left !== undefined && !!ci.column.pinned ? `${ci.left}em` : undefined}
+        style:z-index={!!ci.column.pinned ? cols.length - index : undefined}
     >
-        {#if headerCell}
-            {@render headerCell(ci.column)}
-        {:else}
-            <div class="default-header-content">
-                {ci.column.text}
-            </div>
-        {/if}
+        <div>
+            {#if headerCell}
+                {@render headerCell(ci.column)}
+            {:else}
+                <div class="default-header-content">
+                    {ci.column.text}
+                </div>
+            {/if}
+            {#if ci.column.resizable ?? true}
+                <Resizer minSize={ci.column.minWidth} resize={newSize => ci.column.width = newSize} />
+            {:else}
+                <div></div>
+            {/if}
+        </div>
     </div>
     {/each}
 {/snippet}
@@ -228,12 +271,29 @@
     }
 
     div.col-header {
-        box-shadow: inset 0 -0.4em 1em rgba(0, 0, 0, 0.1);
+        // box-shadow: inset 0 -0.4em 1em rgba(0, 0, 0, 0.1);
         &.sticky-header {
             position: sticky;
             top: 0;
             background-color: var(--wjdv-bg-color);
         }
+
+        & > div {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            position: relative;
+            
+            & > :global(*:first-child) {
+                flex: 1;
+                overflow: hidden;
+            }
+
+            & > :global(*:last-child) {
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+        }
     }
 
     div.extra-header {
diff --git a/src/lib/WjDataViewTheme.svelte b/src/lib/WjDataViewTheme.svelte
index af5037e..8285905 100644
--- a/src/lib/WjDataViewTheme.svelte
+++ b/src/lib/WjDataViewTheme.svelte
@@ -25,6 +25,16 @@
     style:--wjdv-sticky-divider-width={theme.pinnedColumnsDivider?.width}
     style:--wjdv-sticky-divider-style={theme.pinnedColumnsDivider?.style}
     style:--wjdv-sticky-divider-color={theme.pinnedColumnsDivider?.color}
+    style:--wjdv-resizer-width={theme.resizer?.width}
+    style:--wjdv-resizer-bg-color-rgb={theme.resizer?.backgroundColor}
+    style:--wjdv-resizer-bg-opacity={theme.resizer?.opacity}
+    style:--wjdv-resizer-overlay-opacity={theme.resizer?.overlay?.opacity}
+    style:--wjdv-resizer-overlay-bg-color={theme.resizer?.overlay?.item?.backgroundColor}
+    style:--wjdv-resizer-overlay-border-color={theme.resizer?.overlay?.item?.borderColor}
+    style:--wjdv-resizer-deltapos-bg-color={theme.resizer?.overlay?.positiveDelta?.backgroundColor}
+    style:--wjdv-resizer-deltapos-border-color={theme.resizer?.overlay?.positiveDelta?.borderColor}
+    style:--wjdv-resizer-deltaneg-bg-color={theme.resizer?.overlay?.negativeDelta?.backgroundColor}
+    style:--wjdv-resizer-deltaneg-border-color={theme.resizer?.overlay?.negativeDelta?.borderColor}
 >
     {@render children()}
 </div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index a9a8034..b923847 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,3 +2,4 @@ export * from "./WjDataView.svelte";
 export { default as WjDataView } from "./WjDataView.svelte";
 export * from "./WjDataViewTheme.svelte";
 export { default as WjDataViewTheme } from "./WjDataViewTheme.svelte";
+export * from './stockTheme.js';
diff --git a/src/lib/stockTheme.ts b/src/lib/stockTheme.ts
index 2ac3926..946c6d8 100644
--- a/src/lib/stockTheme.ts
+++ b/src/lib/stockTheme.ts
@@ -4,6 +4,11 @@ export type ComponentColor = {
     color?: string;
 }
 
+export type ResizerColor = {
+    backgroundColor?: string;
+    borderColor?: string;
+}
+
 export type Theme = {
     table?: ComponentColor;
     stripes?: ComponentColor;
@@ -12,7 +17,16 @@ export type Theme = {
         width?: string;
         style?: 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' | 'ridge' | 'solid' | 'unset';
         color?: string;
-    }
+    },
+    resizer?: Omit<ComponentColor, 'color'> & {
+        width?: string;
+        overlay?: {
+            opacity?: number;
+            item?: ResizerColor;
+            positiveDelta?: ResizerColor;
+            negativeDelta?: ResizerColor;
+        }
+    };
 }
 
 export const stockLight: Theme = {
@@ -35,6 +49,26 @@ export const stockLight: Theme = {
         width: '0.1em',
         style: 'solid',
         color: 'darkgray'
+    },
+    resizer: {
+        width: '0.4em',
+        backgroundColor: '0, 0, 0',
+        opacity: 0.05,
+        overlay: {
+            opacity: 0.7,
+            item: {
+                backgroundColor: 'lightblue',
+                borderColor: 'blue'
+            },
+            positiveDelta: {
+                backgroundColor: 'lightgreen',
+                borderColor: 'green'
+            },
+            negativeDelta: {
+                backgroundColor: 'pink',
+                borderColor: 'red'
+            }
+        }
     }
 };
 
@@ -58,5 +92,25 @@ export const stockDark: Theme = {
         width: '0.1em',
         style: 'solid',
         color: 'lightgray'
+    },
+    resizer: {
+        width: '0.4em',
+        backgroundColor: '255, 255, 255',
+        opacity: 0.05,
+        overlay: {
+            opacity: 0.7,
+            item: {
+                backgroundColor: '#0578ea',
+                borderColor: '#13aeff'
+            },
+            positiveDelta: {
+                backgroundColor: 'lightgreen',
+                borderColor: 'green'
+            },
+            negativeDelta: {
+                backgroundColor: 'pink',
+                borderColor: 'red'
+            }
+        }
     }
 };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7389b1b..35a5a08 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -21,3 +21,5 @@ export function combineClasses(...classes: (string | Record<string, boolean> | n
     }
     return result.join(' ');
 }
+
+export function noop() { };
diff --git a/src/lib/zoomRatio.ts b/src/lib/zoomRatio.ts
new file mode 100644
index 0000000..385cba7
--- /dev/null
+++ b/src/lib/zoomRatio.ts
@@ -0,0 +1,50 @@
+import { readable } from "svelte/store";
+
+const wnd = globalThis.window;
+let initialPixelRatio = wnd?.devicePixelRatio;
+calibrateInitialPixelRatio();
+
+function calculateRatio() {
+    return 1.0 * wnd?.screen.availWidth / globalThis.document?.documentElement.clientWidth;
+}
+
+function isWindowMaximized() {
+    return wnd?.screenX === 0 && wnd?.screenY === 0
+        && wnd?.outerWidth === wnd?.screen.availWidth
+        && wnd?.outerHeight === wnd?.screen.availHeight;
+}
+
+function calibrateInitialPixelRatio() {
+    if (!isWindowMaximized()) {
+        return;
+    }
+    const maximizedRatio = calculateRatio();
+    if (Math.abs(maximizedRatio - 1) < 0.000000001) {
+        initialPixelRatio = wnd?.devicePixelRatio;
+    }
+    else {
+        // Zoom is applied.
+        initialPixelRatio = wnd?.devicePixelRatio / maximizedRatio;
+    }
+}
+
+function calculateZoomRatio() {
+    return 1 + 1.0 * (wnd?.devicePixelRatio - initialPixelRatio) / initialPixelRatio;
+}
+
+
+/**
+ * Read-only store that returns the current window's zoom level.
+ */
+export default readable(calculateZoomRatio(), set => {
+    wnd?.visualViewport?.addEventListener('resize', handleResize);
+
+    return () => {
+        wnd?.visualViewport?.removeEventListener('resize', handleResize);
+    }
+
+    function handleResize() {
+        calibrateInitialPixelRatio();
+        set(calculateZoomRatio());
+    }
+});
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 24ebe57..f79af4e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import ThemeSwitch from "./ThemeSwitch.svelte";
 
     let { children }: {
         children: Snippet
@@ -9,6 +10,7 @@
 <div class="d-flex flex-column doc-container">
     <nav class="navbar bg-primary-subtle px-3">
         <span class="navbar-brand">WjDataView Demo</span>
+        <ThemeSwitch />
     </nav>
     <div class="flex-fill overflow-auto">
         <div class="container overflow-auto h-100">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ecd9a96..46331a0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+    import { browser } from "$app/environment";
     import { goto } from "$app/navigation";
     import { page } from "$app/stores";
     import WjDataView, { type WjDvColumn, type WjDvRow } from "$lib/WjDataView.svelte";
     import WjDataViewTheme from "$lib/WjDataViewTheme.svelte";
-    import { stockDark, stockLight } from "$lib/stockTheme.js";
     import type { Person } from "../data-models.js";
     import { bootstrapTheme, mineralBlue, mineralGreen } from "./themes.js";
 
@@ -13,8 +13,6 @@
         data: { data: PersonGridRow[]; }
     } = $props();
 
-
-
     type PersonGridRow = WjDvRow<Person>;
 
     const columns = $state<WjDvColumn<Record<string, any>, PersonGridRow>[]>([
@@ -22,12 +20,14 @@
             key: 'id',
             text: 'ID',
             width: 4,
+            resizable: false,
             pinned: true
         },
         {
             key: 'first_name',
             text: 'First Name',
             width: 8,
+            minWidth: 5,
             hidden: false
         },
         {
@@ -98,9 +98,9 @@
                 <div class="col-lg-6 col-md-8">
                     <div class="alert alert-info mb-0 d-flex flex-row flex-nowrap gap-3">
                         <i class="bi bi-lightbulb-fill"></i>
-                        <pre class="mb-0">npm i @wj/dataview
+                        <pre class="mb-0">npm i @wjfe/dataview
 
-import &#123; WjDataView &#125; from '@wj/dataview';
+import &#123; WjDataView &#125; from '@wjfe/dataview';
                         </pre>
                     </div>
                 </div>
@@ -109,6 +109,14 @@ import &#123; WjDataView &#125; from '@wj/dataview';
         </div>
     </div>
     <div class="btn-toolbar py-3 gap-2">
+        <button
+            class="btn btn-sm btn-info"
+            title="Click to show additional information"
+            data-bs-toggle="offcanvas"
+            data-bs-target="#helpCanvas"
+        >
+            <i class="bi bi-info-circle"></i>
+        </button>
         <div class="btn-group btn-sm">
             <input type="checkbox" id="striped" bind:checked={striped} class="btn-check" />
             <label for="striped" class="btn btn-outline-primary">Striped</label>
@@ -116,9 +124,12 @@ import &#123; WjDataView &#125; from '@wj/dataview';
             <label for="rowHighlight" class="btn btn-outline-primary">Row Highlight</label>
         </div>
         <div class="btn-group btn-sm">
-            <div class="input-group-text">
+            <!-- <div class="input-group-text">
                 <span title="Row Count:"><i class="bi bi-person-lines-fill"></i></span>
-            </div>
+            </div> -->
+            <button class="btn" title="Row Count:" disabled>
+                <span title="Row Count:"><i class="bi bi-person-lines-fill"></i></span>
+            </button>
             {#each numRecordsOptions as nro (nro)}
             <input
                 type="radio"
@@ -132,6 +143,51 @@ import &#123; WjDataView &#125; from '@wj/dataview';
             </label>
             {/each}
         </div>
+        <div class="input-group">
+            <div class="input-group-text">
+                <span title="Theme:"><i class="bi bi-palette"></i></span>
+            </div>
+            <select class="form-control">
+                <option value="bootstrap">Bootstrap</option>
+            </select>
+        </div>
+    </div>
+    <div class="offcanvas offcanvas-end bg-info bg-glass" id="helpCanvas" data-bs-backdrop="false">
+        <div class="offcanvas-header">
+            <h3 class="offcanvas-title">WjDataView</h3>
+        </div>
+        <div class="offcanvas-body">
+            <p>
+                The data view component shows data in tabular format.
+            </p>
+            <p>
+                The following is the list of features.  Some of these may not be evident if the browser's width is 
+                enough to show all data at once, such as the pinnable columns.  To overcome this, either make the 
+                browser window smaller, or resize some columns until the data goes off view.
+            </p>
+            <h4>List of Features</h4>
+            <ul>
+                <li>Scrollable viewport</li>
+                <li>Striped rows</li>
+                <li>Row highlighting on hover</li>
+                <li>Hideable columns</li>
+                <li>Pinnable columns</li>
+                <li>Resizable columns</li>
+                <li>Customizable header content</li>
+                <li>Customizable data cell content</li>
+                <li>Customizable appearance via CSS variables</li>
+            </ul>
+            <h4>Can it be used to edit data?</h4>
+            <p>
+                The short answer is <strong>Yes!</strong>  The cell contents are rendered by providing a custom 
+                snippet named <span class="code">dataCell</span>.  However, note that <span class="code">WjDataView</span> 
+                will not provide any form of keyboard navigation of any kind.
+            </p>
+            <p>
+                Having said this, use <span class="code">dataCell</span> to provide cell content with controls such as 
+                textboxes, checkboxes, radio buttons, selects, etc.
+            </p>
+        </div>
     </div>
     <div
         class="flex-fill position-relative"
@@ -145,10 +201,12 @@ import &#123; WjDataView &#125; from '@wj/dataview';
                 class="position-absolute top-0 bottom-0"
             >
                 {#snippet headerCell(col)}
-                    <div class="d-flex flex-row px-2">
+                    <div class="d-flex flex-row ps-2">
                         <span class="fw-semibold text-nowrap text-truncate">{col.text}</span>
                         <button class="btn btn-sm ms-auto" onclick={() => col.pinned = !col.pinned}>
-                            <i class="bi bi-pin-{col.pinned ? 'fill' : 'angle'}"></i>
+                            <span title="Click to {col.pinned ? 'un' : ''}pin">
+                                <i class="bi bi-pin-{col.pinned ? 'fill' : 'angle'}"></i>
+                            </span>
                         </button>
                     </div>
                 {/snippet}
@@ -167,7 +225,7 @@ import &#123; WjDataView &#125; from '@wj/dataview';
 </div>
 
 {#snippet Numeric(value: number)}
-    {@const formatter = new Intl.NumberFormat('es-cr', { maximumFractionDigits: 4 })}
+    {@const formatter = new Intl.NumberFormat(browser ? navigator?.language : undefined, { maximumFractionDigits: 4 })}
     <span class="numeric">{formatter.format(value)}</span>
 
     <style>
@@ -175,4 +233,24 @@ import &#123; WjDataView &#125; from '@wj/dataview';
             font-family: monospace;
         }
     </style>
-{/snippet}
\ No newline at end of file
+{/snippet}
+
+<style lang="scss">
+    .bg-glass {
+        --bs-bg-opacity: 0.3;
+        backdrop-filter: blur(7px) saturate(110%);
+    }
+    span.code {
+        font-family: monospace;
+        background-color: rgba(0, 0, 0, 0.2);
+        padding: 0.2em 0.3em;
+        border-radius: 0.2em;
+
+        :global([data-bs-theme="dark"]) & {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+    :global([data-bs-theme="dark"]) .offcanvas.bg-info {
+        color: var(--bs-white);
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/ThemeSwitch.svelte b/src/routes/ThemeSwitch.svelte
new file mode 100644
index 0000000..f64d149
--- /dev/null
+++ b/src/routes/ThemeSwitch.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+
+    let darkTheme = $state(false);
+    let htmlEl = globalThis?.document?.querySelector("html");
+
+    $effect(() => htmlEl?.setAttribute("data-bs-theme", darkTheme ? "dark" : "light"));
+</script>
+
+<div class="form-check form-switch">
+    <label>
+        <input
+            type="checkbox"
+            class="form-check-input"
+            role="switch"
+            bind:checked={darkTheme}
+        />
+        <div class="animation">
+            {#key darkTheme}
+                <i
+                    in:fly={{ duration: 600, y: 20 }}
+                    out:fly={{ duration: 600, y: -20 }}
+                    class="bi"
+                    class:bi-brightness-high-fill={!darkTheme}
+                    class:bi-moon-stars-fill={darkTheme}
+                ></i>
+            {/key}
+        </div>
+    </label>
+</div>
+
+<style lang="scss">
+    .animation {
+        display: grid;
+        & i {
+            grid-area: 1/1/2/2;
+        }
+    }
+</style>
diff --git a/src/routes/themes.ts b/src/routes/themes.ts
index 2b50840..7b8b6e7 100644
--- a/src/routes/themes.ts
+++ b/src/routes/themes.ts
@@ -1,4 +1,4 @@
-import { stockLight, type Theme } from "$lib/stockTheme.js";
+import { stockLight, stockDark, type Theme } from "$lib/stockTheme.js";
 
 export const bootstrapTheme: Theme = {
     ...stockLight,
@@ -14,6 +14,9 @@ export const bootstrapTheme: Theme = {
         ...stockLight.rowHighlight,
         backgroundColor: 'var(--bs-primary-rgb)',
         opacity: 0.2
+    },
+    resizer: {
+        ...stockLight.resizer
     }
 };