@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/collection/components/table/table.js

@@ -1,838 +1,236 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { Host, readTask, } from "@stencil/core";
-import { h } from "../../utils/renderer";
-import { cyrb53 } from "../../utils/math";
+import { Build, Host, } from "@stencil/core";
 import { debounce } from "../../utils/throttle";
-import { findScrollParent } from "../../utils/scroll-parent";
-import { TableColHead } from "./table.header";
-import { TableRow, TableHeadFootRow } from "./table.row";
-import { TableCell } from "./table.cell";
-import { CSSNAMESPACE } from "./table.constants";
-import { generateStore, storeSearch, storeSetConfig, storeSetData, storeSort, storeFilter, } from "./table.store";
-import { isInViewport } from "./table.utils";
-import { TablePinService } from "./table.pin-service";
-const measurePerf = false;
-function perMark(name, end = false) {
-    if (!performance || !measurePerf)
-        return;
-    if (end) {
-        performance?.mark('end' + name);
-        performance?.measure(name, 'start' + name, 'end' + name);
-        const entries = performance?.getEntriesByName(name);
-        console.info(entries[entries.length ? entries.length - 1 : 0]);
-    }
-    else {
-        performance?.mark('start' + name);
-    }
-}
-let id = 0;
+import { transformTag, h } from "../../utils/renderer";
 /**
- * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
- *
- *- Built-in search
- *- Built-in column filter
- *- Built-in column sort
- *- Easily swap in API / async based search / filter & sort
- *- Pin headers, footers, rows, columns
- *- Add custom rendering at every level
- *- Add custom properties at every level
+ * Displays tabular data in rows and columns.
  *
- * @slot caption - The table's caption. You must either use this or the `caption` attribute.
- * @slot no-results - text to display when search or filtering yields no results
+ * @status new
+ * @version 8.0.0
+ * @type Progressively enhanced
  */
-export class Table {
-    constructor() {
-        this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
-    }
-    // Public API
-    // Props
-    /** Function called whenever `col.cellTemplate` renders an unknown object.
-     * The function should render a valid HTMLElement to the cell arg.
-     * Example usage - render JSX from a 3rd party lib and append the result to the cell element. */
-    customRenderer;
-    /** The type of table. Grid type will make cells navigable by keyboard */
-    type = 'table';
-    /** A descriptive title of the table.
-     * You must use this or the `slot="caption"` for accessibility */
-    caption;
-    /** Show the caption on-screen */
-    showCaption = false;
-    /** Will show a loading state when set to true.
-     * By default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy
-     * *or* when performing custom filtering or sorting.
-     * *Note* when set manually, will overwrite any internal loading state.
-     * Set to 'undefined' to revert to default behaviour. */
-    loading = undefined;
-    get _loading() {
-        return this.loading !== undefined ? this.loading : this.internalLoading;
-    }
-    set _loading(l) {
-        if (this.loading !== undefined)
-            return;
-        this.debounceSetLoading(l);
-    }
-    debounceSetLoading(l) {
-        this.internalLoading = l;
-    }
-    internalLoading = true;
-    /** When loading rows asynchronously, this will render this number of placeholder rows */
-    placeholderSize = 5;
-    /** The data to place in the table */
-    rows;
-    handleRowsChange() {
-        if (!this.rows) {
-            this._loading = true;
-            return;
-        }
-        this._loading = true;
-        Promise.resolve(this.rows).then(async (rows) => {
-            await storeSetData(this.host, rows);
-            // reset everything
-            this.currentFilters = '';
-            this.currentSort = '';
-            await this.columnInit();
-            if (!this.isReady)
-                requestAnimationFrame(() => this.setInitialBlockDimension());
-            this._loading = false;
-            if (this.tablePinnedService)
-                this.tablePinnedService.assessRows();
-        });
-    }
-    /** The column config used to present the rows of data */
-    columns = [];
-    async handleColsChange() {
-        await storeSetConfig(this.host, this.columns);
-        if (this.isReady)
-            this.columnInit();
-    }
-    /** Used for custom thead row rendering */
-    headRender = { pinned: 'top' };
-    /** Used for custom row rendering */
-    rowRender;
-    /** Used for custom tfoot row rendering */
-    footRender = { pinned: 'bottom' };
-    /** Whether to show a `<tfoot>` component */
-    showFooter = false;
-    /** To improve performance, data is split into blocks
-     * which are shown / hidden and rendered as they become visible.
-     * Use this to control the number of hits within a block -
-     * A block should fill a scrolling viewport.
-     * The less perBlock the better for performance */
-    perBlock = 50;
-    /** The number of total blocks currently rendered in the table. @readonly */
-    get blocksLength() {
-        return this.blocks.length;
-    }
-    /** Term to search for in the data */
-    searchTerm;
-    /** A custom filtering function. Should return a promise.
-     * If the promise resolves as `true` the column UI will be updated.
-     * If the promise resolves as falsy, the sort will be performed by the component.
-     * A good use-case would be performing the filter on a server / via fetch.
-     * Then on success, updating the table's data via the `rows` property */
-    customFilterFn;
-    /** A custom sorting function. Should return a promise.
-     * If the promise resolves as `true` the column UI will be updated.
-     * If the promise resolves as falsey, the sort will be performed by the component.
-     * A good use-case would be performing the sort on a server / via fetch.
-     * Then on success, updating the table's data via the `rows` property */
-    customSortFn;
-    /**
-     * The default sortable option for all columns.
-     * `true` will enable column sorting unless you set `sortable: false` on a column
-     * `false` will disable column sorting unless you set `sortable: true` on a column
-     */
-    defaultSort = true;
-    handleSearchTermChange() {
-        this.searchStart();
-    }
-    /** Use this to render the table with roughly the correct dimensions.
-     * a use-case might be; fetch a small initial dataset to minimise load-time,
-     * render the table with the correct dimensions, the table becomes interactive,
-     * load the rest of the data
-     */
-    virtualTotalItems = 0;
-    virtualTotalItemsChangeHandler() {
-        this.setBlocks();
-    }
-    /** @readonly - shows the currently applied filters */
-    get appliedFilters() {
-        return this.filters;
-    }
-    /** Fired when the table has done it's first complete render */
-    nanoTblReady;
-    /** Fired whenever a block is activated by scrolling into view / becoming visible
-     * This could be leveraged for infinite scrolling / to fetch more data.
-     */
-    nanoTblBlockRendered;
-    /** Fired before a column is sorted.
-     * `event.preventDefault()` to stop sorting.  */
-    nanoTblBeforeSort;
-    /** Fired after a column is sorted */
-    nanoTblAfterSort;
-    /** Fired before a column is filtered.
-     * `event.preventDefault()` to stop filtering. */
-    nanoTblBeforeFilter;
-    /** Fired after a column is sorted */
-    nanoTblAfterFilter;
-    /** Fired before a general search.
-     * `event.preventDefault()` to stop searching.  */
-    nanoTblBeforeSearch;
-    /** Fired after a general / cross column search */
-    nanoTblAfterSearch;
-    /** Fired before a general search.
-     * `event.preventDefault()` to stop searching.  */
-    nanoTblBeforeEdit;
-    /** Remove any column sorts currently applied
-     * @returns a promise which resolves when complete */
-    async resetSorting() {
-        const col = this.columns.find((c) => !!c.order);
-        if (!col)
-            return;
-        return this.sortStart(null, col.prop);
-    }
-    /** Apply a sort on a column
-     * @returns a promise which resolves when complete */
-    async addSort(column, order) {
-        const col = this.columns.find((c) => c.prop === column);
-        if (!col)
-            throw new Error('Cannot find column with ' + column);
-        return this.sortStart(order, col.prop);
-    }
-    /** Remove any column filters currently applied
-     * @returns a promise which resolves when complete */
-    async resetFilters() {
-        this.filters = [];
-        return this.filterStart();
-    }
-    /** Apply a filter on a column
-     * @param filters - the filters to apply
-     * @param additive - if true, will add the filters to any currently applied
-     * @returns a promise which resolves when complete
-     */
-    async addFilters(filters, additive = true) {
-        if (!additive)
-            this.filters = [];
-        return this.filterStart(filters, additive);
-    }
-    /** Remove filters from a column
-     * @param columnNames - the filters to apply
-     * @returns a promise which resolves when complete
-     */
-    async removeFilters(columnNames) {
-        this.filters = this.filters.filter((f) => !columnNames.includes(f.prop));
-        return this.filterStart();
-    }
-    /** Updates a row model at a given index
-     * @param row - the row to update.
-     * @param rowIndex - the row index to insert this row
-     */
-    async updateRow(row, rowIndex) {
-        this.rows.splice(rowIndex, 1, row);
-        this.handleRowsChange();
-    }
-    // TODO.
-    // change this.rows to be a Map instead?
-    // this will allow 'padding' < inserting row data at a non-adjacent index
-    // /**
-    //  * During pagination or infinite scroll
-    //  * you may not always want to load data in serial order.
-    //  * This method allows you to insert a block of results at a particular index.
-    //  * Use in-conjunction with `virtualTotalItems`
-    //  * @param blockIndex - where to insert
-    //  * @param rows - what to insert
-    //  */
-    //  @Method()
-    //  async insertBlock(blockIndex: number, rows: TableTypes.NanoTable['rows']) {
-    //    this.pauseAutoBlockAssign = true;
-    //    const cRows = (this.rows as TableTypes.NanoTable['rows']);
-    //    if (cRows.length < (blockIndex * this.perBlock)) {
-    //      (this.rows as TableTypes.NanoTable['rows'])
-    //    }
-    //    (this.rows as TableTypes.NanoTable['rows']).splice((blockIndex * this.perBlock)-1, 0, ...rows);
-    //    console.log(this.rows)
-    //    debugger;
-    //    await this.handleRowsChange(this.rows);
-    //    this.blocks[blockIndex] = {rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join())};
-    //    this.blocks = this.blocks;
-    //    this.pauseAutoBlockAssign = true;
-    //    console.log(this.rows, this.blocks)
-    //  }
-    // Private State
+export class NanoTable {
     host;
-    renderId = 'tbl-' + id++;
-    store;
-    filters = [];
-    currentFilters = '[]';
-    currentSort = '';
-    tableEle;
-    topAnchorEle;
-    tableWrapperEle;
-    activeWatcherIo;
-    tablePinnedService;
-    // Block view management
-    /** `tr` elements split into units - defined by `perBlock`
-      These are show / hidden for perf */
-    blocks = [];
-    activeBlocks = [0, 1];
-    measureHeight = 0;
-    blockElements;
-    blockHeights = [];
-    // uses the first 'tr' of an active block as our yard stick
-    set measureEle(el) {
-        if (!el)
+    propsReady = false;
+    /** If true, the table will be rendered in a compact style. */
+    compact = 'auto';
+    handleCompactChange() {
+        this.setupProperties();
+    }
+    /** If true, will render any nested table in a scrollable container (using `overflow: auto`) */
+    scrollable = true;
+    /** Visually hide the table's caption */
+    hideCaption = false;
+    handleHideCaptionChange() {
+        const caption = this.caption;
+        if (!caption)
             return;
-        const potentialHeight = el.getBoundingClientRect().height;
-        this.measureHeight =
-            Math.abs(this.measureHeight - potentialHeight) < 5
-                ? this.measureHeight
-                : potentialHeight;
-        this.unitHeight =
-            el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
-    }
-    unitHeight = 0;
-    get scrollParent() {
-        return this._scrollParent;
-    }
-    set scrollParent(ele) {
-        if (ele === this._scrollParent)
-            return;
-        if (this._scrollParent) {
-            (this._scrollParent === document.documentElement
-                ? document
-                : this._scrollParent).removeEventListener('scroll', this.scrollHandler);
+        caption.classList.toggle('visually-hidden', this.hideCaption);
+    }
+    resizeObserver;
+    mutationObserver;
+    intersectionObserver;
+    settingUp = false;
+    get table() {
+        return this.host.querySelector('table');
+    }
+    get caption() {
+        const caption = this.host.querySelector('caption');
+        if (!caption) {
+            console.error('nano-table: No caption found. For better a11y, please add a <caption> element to the table.');
+            return null;
         }
-        (ele === document.documentElement ? document : ele).addEventListener('scroll', this.scrollHandler);
-        this._scrollParent = ele;
-    }
-    _scrollParent;
-    // used to fire `nanoTblBlockRendered` on block render change
-    get primaryBlockIndex() {
-        return this._primaryBlockIndex;
+        return caption;
     }
-    set primaryBlockIndex(blockIndex) {
-        if (this._primaryBlockIndex === blockIndex)
+    setupProperties = () => {
+        const table = this.table;
+        if (!table || this.settingUp)
             return;
-        this._primaryBlockIndex = blockIndex;
-        // fire block change event
-        this.nanoTblBlockRendered.emit({
-            block: blockIndex,
-            totalBlocks: this.blockElements.length,
-        });
-    }
-    _primaryBlockIndex;
-    // Misc.
-    get isReady() {
-        return this._isReady;
-    }
-    set isReady(ready) {
-        if (ready === this._isReady)
-            return;
-        this._isReady = ready;
-        if (this.isReady)
-            requestAnimationFrame(() => this.handleReady());
-    }
-    _isReady = false;
-    // Private Logic
-    // Listeners
-    handleReady() {
-        const hash = window.location.hash;
-        if (hash.length > 1) {
-            try {
-                const idRow = document.querySelector(hash);
-                if (idRow)
-                    idRow.scrollIntoView();
-                // eslint-disable-next-line no-empty
+        this.settingUp = true;
+        // Clickable rows
+        const rows = Array.from(this.host.querySelectorAll('tr'));
+        for (const row of rows) {
+            if (this.getRowClickElements(row).length === 1) {
+                row.setAttribute('clickable', 'true');
+                row.addEventListener('click', this.rowClickHandler);
+            }
+            else {
+                row.removeAttribute('clickable');
+                row.removeEventListener('click', this.rowClickHandler);
             }
-            catch (_e) { }
         }
-        this.nanoTblReady.emit();
-    }
-    /**
-     * Start a sort - can be cancelled by `preventDefault`
-     * @param order - column order
-     * @param column - column config object
-     * @returns A promise
-     */
-    sortStart = async (order, column, element) => {
-        // did order change?
-        if (this.currentSort === order + ':' + column)
-            return;
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
-        if (sortEvent.defaultPrevented)
-            return;
-        perMark('sort');
-        this.currentSort = order + ':' + column;
-        // doesn't make sense to leave user in place for a sort
-        this.scrollToTop(element);
-        if (this.customSortFn) {
-            try {
-                const res = await this.customSortFn(column, order);
-                // if the response is 'true', the custom sort did it's thing
-                // handover to finish and stop loading state.
-                // if response is falsey, carry on to do a FE sort
-                if (res === true) {
-                    this.sortComplete(order, column);
-                    this._loading = false;
-                    return;
+        // Sticky columns and rows
+        const tableSections = table.querySelectorAll('thead, tbody, tfoot');
+        let offset = 0;
+        if (table.querySelector('[sticky=start], [sticky=end]')) {
+            for (const section of tableSections) {
+                const sectionHeight = section.offsetHeight;
+                // this is used to make the column shadows when the columns stick;
+                // it allows to have one long shadow instead of one per row
+                section.style.setProperty('--section-height', `${sectionHeight}px`);
+            }
+            const headCols = Array.from(this.host.querySelectorAll('thead th, thead td'));
+            for (const col of headCols) {
+                if (col.matches('[sticky=start]')) {
+                    this.makeCellsSticky(col, 'start', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-start', `${offset}px`);
+                    }
+                    offset += col.offsetWidth - 1;
                 }
             }
-            catch (e) {
-                // if response errored, stop loading state
-                // clear current sort cache
-                console.warn('custom sort failed', e);
-                this.currentSort = '';
-                this._loading = false;
-                return;
+            offset = 0;
+            for (const col of [...headCols].reverse()) {
+                if (col.matches('[sticky=end]')) {
+                    this.makeCellsSticky(col, 'end', offset);
+                    if (offset > 0) {
+                        col.style.setProperty('--sticky-end', `${offset}px`);
+                    }
+                    offset += col.offsetWidth - 1;
+                }
             }
         }
-        try {
-            await storeSort(this.host, column, order);
-            this.sortComplete(order, column);
-        }
-        catch (e) {
-            console.warn('sort failed', e);
-            this.currentSort = '';
-        }
-        finally {
-            if (this.blocks.length)
-                this._loading = false;
+        if (table.querySelector('[sticky=top]')) {
+            // sticky rows are slightly different; we only want one per section to be visible (the rest will overlap)
+            // e.g. 1 tr in thead, 1 tr in tbody, 1 tr in tfoot
+            offset = 0;
+            for (const section of tableSections) {
+                const stickyRows = Array.from(section.querySelectorAll('tr[sticky]'));
+                for (const [idx, row] of stickyRows.entries()) {
+                    if (row.matches('[sticky=top]') && offset > 0) {
+                        row.style.setProperty('--sticky-top', `${offset}px`);
+                    }
+                    if (idx === stickyRows.length - 1) {
+                        offset += row.offsetHeight - 1;
+                    }
+                }
+            }
         }
+        this.settingUp = false;
+        this.propsReady = true;
     };
-    /**
-     * Complete a sort. Reflects the order to ui.
-     * @param order - column order
-     * @param column - column config object
-     */
-    sortComplete(order, column) {
-        this.columns = this.columns.map((c) => {
-            if (c.prop === column)
-                return { ...c, order };
-            return { ...c, order: null };
+    getRowClickElements(row) {
+        const anchors = row.querySelectorAll('a');
+        const buttons = row.querySelectorAll('button');
+        const cbs = Array.from(row.querySelectorAll('input[type="checkbox"]')).filter((cb) => {
+            // filter out checkboxes that are not nano-checkboxes
+            return !cb.closest('nano-checkbox');
+        });
+        const radios = Array.from(row.querySelectorAll('input[type="radio"]')).filter((radio) => {
+            // filter out radios that are not nano-checkboxes
+            return !radio.closest('nano-checkbox');
         });
-        this.nanoTblAfterSort.emit({ column: column, order });
-        perMark('sort', true);
+        const nanoCbs = row.querySelectorAll('nano-checkbox');
+        return [...anchors, ...buttons, ...nanoCbs, ...cbs, ...radios];
     }
-    async searchStart() {
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
-        if (sortEvent.defaultPrevented)
+    rowClickHandler = (e) => {
+        const target = e.target;
+        const row = target.closest('tr');
+        if (!row)
             return;
-        perMark('search');
-        // doesn't make sense to leave user in place for a search
-        this.scrollToTop();
-        try {
-            await storeSearch(this.host, this.searchTerm);
-            this.nanoTblAfterSearch.emit({ term: this.searchTerm });
-            perMark('search', true);
-        }
-        catch (e) {
-            console.warn('search failed', e);
+        const clickEle = this.getRowClickElements(row);
+        if (clickEle.length === 1 &&
+            target.closest(clickEle[0].tagName) !== clickEle[0]) {
+            clickEle[0].click();
         }
-        finally {
-            this._loading = false;
-        }
-    }
-    async filterStart(filters, additive = true) {
-        if (filters) {
-            if (additive) {
-                this.filters = [
-                    ...this.filters.filter((f) => !filters.find((ff) => ff.prop === f.prop)),
-                    ...filters,
-                ];
-            }
-            else {
-                this.filters = filters;
-            }
+    };
+    makeCellsSticky(thElement, sticky, offset = 0) {
+        const table = thElement.closest('table');
+        const theadRow = thElement.closest('tr');
+        const ths = Array.from(theadRow.cells);
+        // Step 1: Get the visual column index of the target th (respecting colspan)
+        let targetColIndex = 0;
+        for (const th of ths) {
+            if (th === thElement)
+                break;
+            targetColIndex += th.colSpan || 1;
         }
-        if (this.currentFilters === JSON.stringify(this.filters))
-            return;
-        this._loading = true;
-        const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
-        if (sortEvent.defaultPrevented)
-            return;
-        perMark('filter');
-        this.currentFilters = JSON.stringify(this.filters);
-        // doesn't make sense to leave user in place for a search
-        this.scrollToTop();
-        if (this.customFilterFn) {
-            try {
-                const res = await this.customFilterFn(this.filters);
-                // if the response is 'true', the custom filter did it's thing
-                // handover to finish and stop loading state.
-                // if response is falsy, carry on to do a FE filter
-                if (res === true) {
-                    await this.filterComplete();
-                    this._loading = false;
-                    return;
+        // Step 2: Iterate through tbody rows and find the corresponding cell
+        for (const tbody of table.tBodies) {
+            for (const row of tbody.rows) {
+                let colIndex = 0;
+                for (const cell of row.cells) {
+                    const span = cell.colSpan || 1;
+                    if (colIndex <= targetColIndex && targetColIndex < colIndex + span) {
+                        cell.setAttribute('sticky', sticky);
+                        if (offset > 0) {
+                            cell.style.setProperty('--sticky-' + sticky, `${offset}px`);
+                        }
+                        break;
+                    }
+                    colIndex += span;
                 }
             }
-            catch (e) {
-                // if response errored, stop loading state
-                // clear current sort cache
-                console.warn('custom filter failed', e);
-                this.currentFilters = '';
-                this._loading = false;
-                return;
-            }
-        }
-        try {
-            await this.filterComplete();
-        }
-        catch (e) {
-            console.warn('filter failed', e);
-        }
-        finally {
-            this._loading = false;
         }
     }
-    async filterComplete() {
-        this.columns = this.columns.map((c) => {
-            const cFilter = this.filters.find((f) => f.prop === c.prop);
-            // if we found a filter AND
-            // it isn't true / false and has a length OR
-            // it is true or false
-            if (cFilter &&
-                ((typeof cFilter.filter !== 'boolean' && cFilter.filter.length) ||
-                    typeof cFilter.filter === 'boolean'))
-                c.filter = cFilter.filter;
-            // if a filter value is not set OR
-            // it isn't true / false and has no length
-            else if ((c.filter !== null && c.filter !== undefined) ||
-                (!!c.filter && typeof c.filter !== 'boolean' && !c.filter.length))
-                c.filter = undefined;
-            return c;
-        });
-        await storeFilter(this.host, this.filters);
-        this.nanoTblAfterFilter.emit({ filters: this.filters });
-        perMark('filter', true);
-    }
-    /** Scrolls to the top immediately - used whilst sorting / filtering */
-    scrollToTop(element) {
-        const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
-        const scrollX = this.scrollParent.scrollLeft;
-        this.scrollParent.style.scrollBehavior = 'auto';
-        if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1)) {
-            this.host.scrollIntoView();
-        }
-        if (element && !isInViewport(element, 1))
-            setTimeout(() => element.scrollIntoView({ block: 'start' }), 500);
-        if (scrollX)
-            this.scrollParent.scrollLeft = scrollX;
-        if (scrollBehaviour)
-            this.scrollParent.style.scrollBehavior = scrollBehaviour;
-        this.scrollHandler();
-    }
-    setMeasureElement() {
-        return new Promise((resolve) => {
-            readTask(() => {
-                this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
-                resolve();
-            });
-        });
-    }
-    /**
-     * Makes sure we have dimensions on at least one, active tbody element.
-     * We'll use this is a yard stick for inactive tbody elements in future.
-     * These elements have no natural height (on account of all their rows being hidden)
-     */
-    setInitialBlockDimension() {
-        if (!this.blockElements?.length)
+    addObservers() {
+        if (!Build.isBrowser)
             return;
-        perMark('blockDims');
-        const testForDimensions = async () => {
-            await this.setMeasureElement();
-            if (this.unitHeight)
-                return true;
-            return false;
-        };
-        const dimensionsReady = new Promise((resolve) => {
-            testForDimensions().then(async (ready) => {
-                if (ready)
-                    resolve();
-                else {
-                    // it's likely this table is hidden in the dom.
-                    // we need to wait until it's visible
-                    const observer = new IntersectionObserver(async () => {
-                        if (await testForDimensions()) {
-                            resolve();
-                            observer.disconnect();
-                        }
-                    }, { root: this.scrollParent });
-                    observer.observe(this.tableEle);
-                }
-            });
+        this.resizeObserver = new ResizeObserver(() => {
+            this.setupProperties();
         });
-        // we're all finished.
-        dimensionsReady.then(() => {
-            perMark('blockDims', true);
-            perMark('init', true);
-            requestAnimationFrame(() => (this.isReady = true));
+        this.resizeObserver.observe(this.host);
+        this.mutationObserver = new MutationObserver(() => {
+            this.setupProperties();
         });
-    }
-    /** Apply initial columns settings */
-    async columnInit() {
-        this.filters = this.columns
-            .filter((c) => c.filter !== undefined && c.filter !== null)
-            .map((c) => {
-            const { filter, prop } = c;
-            return { prop, filter };
+        const table = this.table;
+        this.mutationObserver.observe(table, {
+            childList: true,
+            subtree: true,
         });
-        if (this.searchTerm) {
-            await this.searchStart();
-        }
-        if (this.filters.length) {
-            await this.filterStart();
-        }
-        // apply sort
-        const col = this.columns.find((c) => !!c.order);
-        if (col) {
-            await this.sortStart(col.order, col.prop);
-        }
-        if (this.tablePinnedService)
-            this.tablePinnedService.assessCols();
-    }
-    /** Split up all incoming rows into 'blocks' split amongst tbody elements.
-     * These can then be hidden / shown to improve performance.
-     */
-    setBlocks() {
-        const dRows = this.store.data.state.rows;
-        if (!dRows.length) {
-            this.blocks = [];
-            return;
-        }
-        perMark('setBlocks');
-        // this.ignoreIO = true;
-        let i = 1;
-        const l = this.virtualTotalItems > dRows.length
-            ? this.virtualTotalItems
-            : dRows.length;
-        let rows = [];
-        const blocks = [];
-        // old skool loop for perf
-        for (i; i <= l; i++) {
-            rows.push(this.store.data.state.rows[i - 1] || { __uuid: '' });
-            if (i % this.perBlock === 0) {
-                // assign a UUID for the whole block
-                // for block diffing
-                blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
-                rows = [];
-            }
+        // dimensions will not be accurate until table is in the viewport
+        this.intersectionObserver = new IntersectionObserver(() => {
+            this.setupProperties();
+            this.intersectionObserver.disconnect();
+        }, { threshold: 1 });
+        this.intersectionObserver.observe(table);
+    }
+    cleanUpObservers() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
         }
-        // any leftover rows
-        if (rows.length) {
-            blocks.push({ rows, __uuid: cyrb53(rows.map((b) => b.__uuid).join()) });
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
         }
-        this.blocks = blocks;
-        perMark('setBlocks', true);
-    }
-    /**
-     * Returns a block render height.
-     * If it's currently active - let auto do it's thing
-     * If we've rendered it before - return that
-     * If all else fails, let's guess it
-     * @param blockIndex
-     * @returns a height string (incl px)
-     */
-    getBlockHeight(blockIndex) {
-        if (this.blockHeights.length) {
-            const cachedBlockHeight = this.blockHeights.find((bh) => bh.blockIndex === blockIndex);
-            if (cachedBlockHeight && cachedBlockHeight.height)
-                return cachedBlockHeight.height;
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
         }
-        const blockLength = this.blocks[blockIndex].rows.length;
-        if (blockLength === this.perBlock && this.measureHeight) {
-            return this.measureHeight;
-        }
-        return this.unitHeight ? this.unitHeight * blockLength : 100;
-    }
-    /** cache the height for all active blocks for later renders */
-    setBlockHeight() {
-        this.activeBlocks.forEach((blockIndex) => {
-            const el = this.blockElements[blockIndex];
-            if (!el)
-                return;
-            readTask(() => {
-                if (el.classList.contains(`${CSSNAMESPACE}__inactive`))
-                    return;
-                const height = el.getBoundingClientRect().height;
-                // cache height to our block heights array
-                // for subsequent renders
-                const fBhIdx = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
-                if (fBhIdx > -1) {
-                    this.blockHeights[fBhIdx] = { height, blockIndex };
-                }
-                else
-                    this.blockHeights.push({ height, blockIndex });
-            });
-        });
     }
-    /**
-     * On scroll, loop through all blocks' heights and cumulatively, add them together.
-     * When we find that the scroll position is less than this cumulative block height -
-     * stop loop - it's on the current active block.
-     */
-    scrollHandler = () => {
-        let scrollPos = 0;
-        perMark('scrollHandler');
-        // don't listen if this table isn't in the viewport
-        if (!this.store?.general.state.isActive || !this.rows)
-            return;
-        if (this.primaryBlockIndex === undefined)
-            this.primaryBlockIndex = 0;
-        readTask(() => {
-            scrollPos =
-                typeof this.scrollParent.scrollTop !== 'undefined'
-                    ? this.scrollParent.scrollTop
-                    : window.scrollY;
-            scrollPos += this.host.offsetTop;
-            if (this.tablePinnedService) {
-                this.tablePinnedService.onScroll({
-                    x: typeof this.scrollParent.scrollLeft !== 'undefined'
-                        ? this.scrollParent.scrollLeft
-                        : window.scrollX,
-                    y: scrollPos,
-                });
-            }
-            let cumulativeHeight = this.host.offsetTop;
-            let blockIndex = 0;
-            const blockLen = this.blocks.length;
-            while (blockIndex < blockLen && scrollPos >= cumulativeHeight) {
-                cumulativeHeight += this.getBlockHeight(blockIndex);
-                if (scrollPos < cumulativeHeight) {
-                    const potentialBlocks = [
-                        blockIndex,
-                        blockIndex + 1,
-                        // Math.max(0, blockIndex - 1),
-                    ];
-                    if (potentialBlocks.toString() !== this.activeBlocks.toString()) {
-                        this.activeBlocks = potentialBlocks;
-                    }
-                    this.primaryBlockIndex = blockIndex;
-                }
-                blockIndex++;
-            }
-            perMark('scrollHandler', true);
-        });
-    };
-    /** Process slotted content */
-    processSlots() {
-        // see if we have slot content
-        if (!this.caption && !this.host.querySelector('[slot="caption"]')) {
-            console.error('For accessibility you must set a `caption` prop or use the `caption` slot');
-        }
-    }
-    handleResizeChange = (e) => {
-        this.tableWrapperEle.className = '';
-        let classes = [`${CSSNAMESPACE}__wrap`];
-        if (e.target?.className)
-            classes = [...e.target.className.split(' '), ...classes];
-        this.tableWrapperEle.classList.add(...classes.filter((cl) => !!cl));
-    };
-    /** Adds an IO. Makes sure our scroll listener is only active when
-     * the table is in viewport */
-    setupActiveWatcher() {
-        if (!this.host || !this.scrollParent || !this.store)
-            return;
-        if (this.activeWatcherIo) {
-            this.activeWatcherIo.disconnect();
-            this.activeWatcherIo = undefined;
-        }
-        const io = (this.activeWatcherIo = new IntersectionObserver(([e]) => {
-            if (e.isIntersecting)
-                this.store.general.state.isActive = true;
-            else
-                this.store.general.state.isActive = false;
-        }, { root: this.scrollParent, threshold: 0 }));
-        io.observe(this.host);
-    }
-    // Component lifecycle
-    async componentWillLoad() {
-        perMark('init');
-        // setup stores
-        this.store = await generateStore(this.host, this.columns, this.scrollParent, this.isReady);
-        this.handleRowsChange();
-        this.store.general.onChange('isActive', () => {
-            this.scrollHandler();
-        });
-        this.store.data.onChange('rows', () => this.setBlocks());
-        // setup dom and attach listeners
-        this.processSlots();
-        this.setBlocks();
-        this.scrollParent = findScrollParent(this.host);
-        this.setupActiveWatcher();
+    constructor() {
+        this.setupProperties = debounce(this.setupProperties, 100);
     }
     connectedCallback() {
-        this.scrollParent = findScrollParent(this.host);
-        this.setupActiveWatcher();
-    }
-    componentDidLoad() {
-        this.setInitialBlockDimension();
-        if (!this.tablePinnedService) {
-            this.tablePinnedService = new TablePinService(this.tableEle, this.scrollParent);
-        }
-    }
-    componentShouldUpdate(_newVal, _oldVal, stateName) {
-        // stop double rendering - we use the store for rendering internally
-        // the public facing props are kept in-sync with the store
-        // but we don't want it to cause renders
-        if (['rows', 'columns'].includes(stateName))
-            return false;
-        if (measurePerf)
-            console.info(stateName, _newVal, _oldVal);
-    }
-    componentWillRender() {
-        perMark('render');
+        this.addObservers();
+        this.handleHideCaptionChange();
     }
     componentDidRender() {
-        this.setMeasureElement().then(() => this.setBlockHeight());
-        perMark('render', true);
+        if (this.scrollable !== false && this.table) {
+            // a hack. Revise in-future.
+            // the table is always rendered in the light DOM - so it should always be visible, but
+            // if we conditionally render the slot within the masked overflow there's quite a noticeable
+            //  CLS as it moves before the nano-masked-overflow is bootstrapped.
+            customElements
+                .whenDefined(transformTag('nano-masked-overflow'))
+                .then(() => {
+                this.host
+                    .querySelector('.nano-table__overflow')
+                    ?.appendChild(this.table);
+            });
+        }
     }
     disconnectedCallback() {
-        if (!this.activeWatcherIo)
-            return;
-        this.activeWatcherIo.disconnect();
-        this.activeWatcherIo = undefined;
-        (this.scrollParent === document.documentElement
-            ? document
-            : this.scrollParent).removeEventListener('scroll', this.scrollHandler);
+        this.cleanUpObservers();
     }
     render() {
-        this.blockElements = [];
-        return (h(Host, { key: '7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa', class: "nano-table" }, h("div", { key: 'acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9', class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("nano-resize-observe", { key: '9a38da33f0cfb64329331510f196ef7c42e51ca3', states: "576w sm, 768w md", class: "sm md", onNanoResizeStateChange: this.handleResizeChange, onNanoResize: () => {
-                if (this.tablePinnedService)
-                    this.tablePinnedService.onResize();
-            } }), h("div", { key: '25aad643f108a5e48319a20a70a36066eb099d5d', class: `${CSSNAMESPACE}__wrap sm md`, ref: (div) => (this.tableWrapperEle = div), "aria-labelledby": 'nano-table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { key: '519fc388c4926af6bd9dfaba2112fa2db1dbc3cd', indeterminate: true, class: {
-                [`${CSSNAMESPACE}__progress-bar`]: true,
-                [`${CSSNAMESPACE}__progress-bar--show`]: this._loading,
-            } }), h("table", { key: 'b58a665666893b4b15aad6ab7e7a08bd20527cb2', role: this.type === 'grid' ? 'grid' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl), id: 'nano-table-' + this.renderId }, h("caption", { key: '5bc653ff3a487546e652cd787996dfde662fdf67', class: {
-                [`${CSSNAMESPACE}__caption`]: true,
-                [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
-            }, id: 'nano-table-caption-' + this.renderId }, h("slot", { key: 'a6c855db5a74c123d08ad4e65954f17573c9ea3a', name: "caption" }, this.caption)), h("thead", { key: '743820b2abc85adac1fe4babf918be10a8e62a26' }, h(TableHeadFootRow, { key: 'e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036', rowRenderer: this.headRender }, this.store.config.state.columns.map((colModel) => [
-            h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnSortClick: this.sortStart, defaults: {
-                    sortable: this.defaultSort,
-                } }),
-        ]))), this._loading && !this.blocks.length && (h("tbody", { key: '6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa', class: `${CSSNAMESPACE}__active ${CSSNAMESPACE}__loading` }, [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: () => h("nano-skeleton", null) })))))))), h("tr", { key: '092f27f8726f12b7fa10d166b560d6df6593bbc1', hidden: !!this._loading || !!this.blocks.length }, h("th", { key: 'edfbca925f99550897c3b460a6efcb326863a591', class: `${CSSNAMESPACE}__th`, colSpan: this.store.config.state.columns.length }, h("div", { key: '5d4b996c3141b6583317a2b28357fe7af3a873bc', class: "nano-tbl__cell-content nano-tbl__cell-content--no-result" }, h("slot", { key: '00db3e5649ccdc97062881ff7b3801fb1847c2db', name: "no-results" }, "No results found")))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
-                this.blockElements.push(tb);
-            }, class: {
-                [`${CSSNAMESPACE}__inactive`]: !this.activeBlocks.includes(blockIndex),
-                [`${CSSNAMESPACE}__active`]: this.activeBlocks.includes(blockIndex),
-            } }, this.activeBlocks.includes(blockIndex) ? (block.rows.map((row, i) => {
-            const rowIndex = blockIndex > 0 ? blockIndex * this.perBlock + i : i;
-            return (h(TableRow, { rowRenderer: this.rowRender, rowModel: row, rowIndex: rowIndex }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
-        })) : (h("tr", { class: `${CSSNAMESPACE}__tr--placeholder` }, h("td", { colSpan: this.store.config.state.columns.length, style: {
-                height: this.getBlockHeight(blockIndex) + 'px',
-            } })))))), this.showFooter && (h("tfoot", { key: '15a1a79049ad87f63c87e2d905bc401a7d4bbb60' }, h(TableHeadFootRow, { key: 'ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea', rowRenderer: this.footRender }, this.store.config.state.columns.map((colModel) => [
-            h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnSortClick: this.sortStart, defaults: {
-                    sortable: this.defaultSort,
-                } }),
-        ]))))), !!this.blocks.length && (h("nano-spinner", { key: 'dd0041a5232a79a9f1882d2b9e5beebd79587a5d', type: "circle", class: {
-                [`${CSSNAMESPACE}__spinner`]: true,
-                [`${CSSNAMESPACE}__spinner--show`]: this._loading,
-            } })))));
+        return (h(Host, { key: '61d6bc7ce049b636466f22e2ebec084752ecfd29', class: {
+                'nano-table': true,
+                'nano-table--props-ready': this.propsReady,
+            } }, this.scrollable && (h("nano-masked-overflow", { key: '0534fae03c985ea7f1247bce7abdb5deac889feb', hideScrollbars: false, scrollControls: false, label: this.caption?.textContent || undefined, class: "nano-table__overflow-container" }, h("div", { key: '8e911ddbf727b07c8cd56dab2d56568b73a745b2', class: "nano-table__overflow" }))), h("slot", { key: '2d57257dc468275502d1c1a1d2c07e32f8cfa881' })));
     }
     static get is() { return "nano-table"; }
     static get originalStyleUrls() {
@@ -847,77 +245,29 @@ export class Table {
     }
     static get properties() {
         return {
-            "customRenderer": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(\n    node: any,\n    cell: HTMLElement | DocumentFragment\n  ) => void | Promise<string>",
-                    "resolved": "(node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        },
-                        "DocumentFragment": {
-                            "location": "global",
-                            "id": "global::DocumentFragment"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element."
-                },
-                "getter": false,
-                "setter": false
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'grid' | 'table'",
-                    "resolved": "\"grid\" | \"table\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of table. Grid type will make cells navigable by keyboard"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "type",
-                "reflect": false,
-                "defaultValue": "'table'"
-            },
-            "caption": {
-                "type": "string",
+            "compact": {
+                "type": "any",
+                "attribute": "compact",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean | 'auto'",
+                    "resolved": "\"auto\" | boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility"
+                    "text": "If true, the table will be rendered in a compact style."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "'auto'"
             },
-            "showCaption": {
+            "scrollable": {
                 "type": "boolean",
+                "attribute": "scrollable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -928,178 +278,16 @@ export class Table {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show the caption on-screen"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "show-caption",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "loading",
-                "reflect": false,
-                "defaultValue": "undefined"
-            },
-            "placeholderSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When loading rows asynchronously, this will render this number of placeholder rows"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "placeholder-size",
-                "reflect": false,
-                "defaultValue": "5"
-            },
-            "rows": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "| TableTypes.NanoTable['rows']\n    | Promise<TableTypes.NanoTable['rows']>",
-                    "resolved": "Promise<RowGeneric[]> | RowGeneric[]",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The data to place in the table"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "columns": {
-                "type": "unknown",
-                "mutable": true,
-                "complexType": {
-                    "original": "TableTypes.NanoTable<any>['columns']",
-                    "resolved": "ColumnConfig<any>[]",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The column config used to present the rows of data"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "headRender": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableTypes.HeadFootRenderer",
-                    "resolved": "HeadFootRenderer<RowData<RowGeneric>>",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Used for custom thead row rendering"
+                    "text": "If true, will render any nested table in a scrollable container (using `overflow: auto`)"
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{ pinned: 'top' }"
-            },
-            "rowRender": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableTypes.RowRenderer",
-                    "resolved": "RowRenderer<RowData<RowGeneric>>",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Used for custom row rendering"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "footRender": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableTypes.HeadFootRenderer",
-                    "resolved": "HeadFootRenderer<RowData<RowGeneric>>",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Used for custom tfoot row rendering"
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "{ pinned: 'bottom' }"
+                "reflect": true,
+                "defaultValue": "true"
             },
-            "showFooter": {
+            "hideCaption": {
                 "type": "boolean",
+                "attribute": "hide-caption",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1110,571 +298,28 @@ export class Table {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show a `<tfoot>` component"
+                    "text": "Visually hide the table's caption"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-footer",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
-            },
-            "perBlock": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "per-block",
-                "reflect": false,
-                "defaultValue": "50"
-            },
-            "blocksLength": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "readonly",
-                            "text": undefined
-                        }],
-                    "text": "The number of total blocks currently rendered in the table."
-                },
-                "getter": true,
-                "setter": false,
-                "attribute": "blocks-length",
-                "reflect": false
-            },
-            "searchTerm": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Term to search for in the data"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "search-term",
-                "reflect": false
-            },
-            "customFilterFn": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(\n    filters: TableTypes.Filter[]\n  ) => Promise<true | TableTypes.Falsy>",
-                    "resolved": "(filters: Filter[]) => Promise<true | Falsy>",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsy, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "customSortFn": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(\n    property: TableTypes.Prop,\n    order: TableTypes.Order\n  ) => Promise<true | TableTypes.Falsy>",
-                    "resolved": "(property: keyof RowGeneric, order: Order) => Promise<true | Falsy>",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A custom sorting function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property"
-                },
-                "getter": false,
-                "setter": false
-            },
-            "defaultSort": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "default-sort",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "virtualTotalItems": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "virtual-total-items",
-                "reflect": false,
-                "defaultValue": "0"
-            },
-            "appliedFilters": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "TableTypes.Filter[]",
-                    "resolved": "Filter[]",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "readonly",
-                            "text": "- shows the currently applied filters"
-                        }],
-                    "text": ""
-                },
-                "getter": true,
-                "setter": false,
-                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "internalLoading": {},
-            "blocks": {},
-            "activeBlocks": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "nanoTblReady",
-                "name": "nanoTblReady",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired when the table has done it's first complete render"
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }, {
-                "method": "nanoTblBlockRendered",
-                "name": "nanoTblBlockRendered",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data."
-                },
-                "complexType": {
-                    "original": "{\n    block: number;\n    totalBlocks: number;\n  }",
-                    "resolved": "{ block: number; totalBlocks: number; }",
-                    "references": {}
-                }
-            }, {
-                "method": "nanoTblBeforeSort",
-                "name": "nanoTblBeforeSort",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired before a column is sorted.\n`event.preventDefault()` to stop sorting."
-                },
-                "complexType": {
-                    "original": "{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }",
-                    "resolved": "{ column: keyof RowGeneric; order: Order; }",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                }
-            }, {
-                "method": "nanoTblAfterSort",
-                "name": "nanoTblAfterSort",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired after a column is sorted"
-                },
-                "complexType": {
-                    "original": "{\n    column: TableTypes.Prop;\n    order: TableTypes.Order;\n  }",
-                    "resolved": "{ column: keyof RowGeneric; order: Order; }",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                }
-            }, {
-                "method": "nanoTblBeforeFilter",
-                "name": "nanoTblBeforeFilter",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired before a column is filtered.\n`event.preventDefault()` to stop filtering."
-                },
-                "complexType": {
-                    "original": "{ filters: TableTypes.Filter[] }",
-                    "resolved": "{ filters: Filter[]; }",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                }
-            }, {
-                "method": "nanoTblAfterFilter",
-                "name": "nanoTblAfterFilter",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired after a column is sorted"
-                },
-                "complexType": {
-                    "original": "{ filters: TableTypes.Filter[] }",
-                    "resolved": "{ filters: Filter[]; }",
-                    "references": {
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    }
-                }
-            }, {
-                "method": "nanoTblBeforeSearch",
-                "name": "nanoTblBeforeSearch",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired before a general search.\n`event.preventDefault()` to stop searching."
-                },
-                "complexType": {
-                    "original": "{ term: string }",
-                    "resolved": "{ term: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "nanoTblAfterSearch",
-                "name": "nanoTblAfterSearch",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired after a general / cross column search"
-                },
-                "complexType": {
-                    "original": "{ term: string }",
-                    "resolved": "{ term: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "nanoTblBeforeEdit",
-                "name": "nanoTblBeforeEdit",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Fired before a general search.\n`event.preventDefault()` to stop searching."
-                },
-                "complexType": {
-                    "original": "{ term: string }",
-                    "resolved": "{ term: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "resetSorting": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Remove any column sorts currently applied",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "a promise which resolves when complete"
-                        }]
-                }
-            },
-            "addSort": {
-                "complexType": {
-                    "signature": "(column: TableTypes.Prop, order: TableTypes.Order) => Promise<void>",
-                    "parameters": [{
-                            "name": "column",
-                            "type": "keyof RowGeneric",
-                            "docs": ""
-                        }, {
-                            "name": "order",
-                            "type": "\"desc\" | \"asc\"",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Apply a sort on a column",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "a promise which resolves when complete"
-                        }]
-                }
-            },
-            "resetFilters": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Remove any column filters currently applied",
-                    "tags": [{
-                            "name": "returns",
-                            "text": "a promise which resolves when complete"
-                        }]
-                }
-            },
-            "addFilters": {
-                "complexType": {
-                    "signature": "(filters: TableTypes.Filter[], additive?: boolean) => Promise<void>",
-                    "parameters": [{
-                            "name": "filters",
-                            "type": "Filter[]",
-                            "docs": "- the filters to apply"
-                        }, {
-                            "name": "additive",
-                            "type": "boolean",
-                            "docs": "- if true, will add the filters to any currently applied"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Apply a filter on a column",
-                    "tags": [{
-                            "name": "param",
-                            "text": "filters - the filters to apply"
-                        }, {
-                            "name": "param",
-                            "text": "additive - if true, will add the filters to any currently applied"
-                        }, {
-                            "name": "returns",
-                            "text": "a promise which resolves when complete"
-                        }]
-                }
-            },
-            "removeFilters": {
-                "complexType": {
-                    "signature": "(columnNames: TableTypes.Prop[]) => Promise<void>",
-                    "parameters": [{
-                            "name": "columnNames",
-                            "type": "(keyof RowGeneric)[]",
-                            "docs": "- the filters to apply"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Remove filters from a column",
-                    "tags": [{
-                            "name": "param",
-                            "text": "columnNames - the filters to apply"
-                        }, {
-                            "name": "returns",
-                            "text": "a promise which resolves when complete"
-                        }]
-                }
-            },
-            "updateRow": {
-                "complexType": {
-                    "signature": "(row: TableTypes.RowData, rowIndex: number) => Promise<void>",
-                    "parameters": [{
-                            "name": "row",
-                            "type": "RowGeneric & { __uuid?: string | number; __index?: number; }",
-                            "docs": "- the row to update."
-                        }, {
-                            "name": "rowIndex",
-                            "type": "number",
-                            "docs": "- the row index to insert this row"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "TableTypes": {
-                            "location": "import",
-                            "path": "./table-interface",
-                            "id": "src/components/table/table-interface.d.ts::TableTypes"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Updates a row model at a given index",
-                    "tags": [{
-                            "name": "param",
-                            "text": "row - the row to update."
-                        }, {
-                            "name": "param",
-                            "text": "rowIndex - the row index to insert this row"
-                        }]
-                }
-            }
+            "propsReady": {}
         };
     }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "rows",
-                "methodName": "handleRowsChange"
-            }, {
-                "propName": "columns",
-                "methodName": "handleColsChange"
-            }, {
-                "propName": "searchTerm",
-                "methodName": "handleSearchTermChange"
+                "propName": "compact",
+                "methodName": "handleCompactChange"
             }, {
-                "propName": "virtualTotalItems",
-                "methodName": "virtualTotalItemsChangeHandler"
+                "propName": "hideCaption",
+                "methodName": "handleHideCaptionChange"
             }];
     }
 }
-//# sourceMappingURL=table.js.map