@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-table.js

@@ -1 +1,412 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","striped","hoverable"];class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),l=this.getSortedData(),o=this.hasAttribute("loading"),d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",o&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),o){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("badge-style","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===l.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||l.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const VARIANTS = ['default', 'striped', 'hoverable'];
+class DbTable extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internalSelectedRows = [];
+        this.internalSortDirection = null;
+        this.internalPage = 1;
+    }
+    static get observedAttributes() {
+        return [
+            'columns',
+            'data',
+            'title',
+            'size',
+            'variant',
+            'empty-message',
+            'sortable',
+            'sort-column',
+            'sort-direction',
+            'selectable',
+            'multi-select',
+            'selected-rows',
+            'row-key',
+            'loading',
+            'pagination',
+            'page',
+            'page-size',
+            'total-items',
+            'show-count-badge',
+            'clickable',
+        ];
+    }
+    get columns() {
+        try {
+            return JSON.parse(this.getAttribute('columns') || '[]');
+        }
+        catch {
+            return [];
+        }
+    }
+    set columns(value) {
+        this.setAttribute('columns', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get data() {
+        try {
+            return JSON.parse(this.getAttribute('data') || '[]');
+        }
+        catch {
+            return [];
+        }
+    }
+    set data(value) {
+        this.setAttribute('data', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'selected-rows') {
+            this.syncSelectedRowsFromAttribute();
+        }
+        if (name === 'sort-column' || name === 'sort-direction') {
+            this.syncSortFromAttributes();
+        }
+        if (name === 'page') {
+            this.internalPage = Number(this.getAttribute('page') || 1);
+        }
+        this.render();
+    }
+    syncSelectedRowsFromAttribute() {
+        try {
+            this.internalSelectedRows = JSON.parse(this.getAttribute('selected-rows') || '[]');
+        }
+        catch {
+            this.internalSelectedRows = [];
+        }
+    }
+    syncSortFromAttributes() {
+        const column = this.getAttribute('sort-column');
+        const direction = this.getAttribute('sort-direction');
+        this.internalSortColumn = column || undefined;
+        this.internalSortDirection = direction === 'asc' || direction === 'desc' ? direction : null;
+    }
+    getRowKey(item, index) {
+        const rowKey = this.getAttribute('row-key') || 'id';
+        const value = item[rowKey];
+        return value !== undefined && value !== null ? String(value) : String(index);
+    }
+    getSortedData() {
+        const data = this.data;
+        const columnKey = this.getAttribute('sort-column') || this.internalSortColumn;
+        const direction = this.getAttribute('sort-direction') || this.internalSortDirection;
+        if (!columnKey || !direction)
+            return data;
+        const column = this.columns.find((col) => col.key === columnKey);
+        if (!column?.sortable)
+            return data;
+        return [...data].sort((a, b) => {
+            const aValue = a[columnKey];
+            const bValue = b[columnKey];
+            if (aValue === bValue)
+                return 0;
+            if (aValue === undefined || aValue === null)
+                return 1;
+            if (bValue === undefined || bValue === null)
+                return -1;
+            if (aValue < bValue)
+                return direction === 'asc' ? -1 : 1;
+            return direction === 'asc' ? 1 : -1;
+        });
+    }
+    handleSort(column) {
+        if (!this.hasAttribute('sortable') || !column.sortable)
+            return;
+        let nextDirection = 'asc';
+        if (this.internalSortColumn === column.key) {
+            if (this.internalSortDirection === 'asc')
+                nextDirection = 'desc';
+            else if (this.internalSortDirection === 'desc')
+                nextDirection = null;
+        }
+        this.internalSortColumn = nextDirection ? column.key : undefined;
+        this.internalSortDirection = nextDirection;
+        this.dispatchEvent(new CustomEvent('db-sort-change', {
+            bubbles: true,
+            composed: true,
+            detail: { column: column.key, direction: nextDirection },
+        }));
+        this.render();
+    }
+    handleRowSelect(rowKey, checked, event) {
+        event?.stopPropagation();
+        const multiSelect = this.hasAttribute('multi-select');
+        let next;
+        if (multiSelect) {
+            next = checked
+                ? [...this.internalSelectedRows, rowKey]
+                : this.internalSelectedRows.filter((key) => key !== rowKey);
+        }
+        else {
+            next = checked ? [rowKey] : [];
+        }
+        this.internalSelectedRows = next;
+        this.dispatchEvent(new CustomEvent('db-selection-change', {
+            bubbles: true,
+            composed: true,
+            detail: { selectedRows: next },
+        }));
+        this.render();
+    }
+    handleSelectAll(checked) {
+        const next = checked ? this.data.map((item, index) => this.getRowKey(item, index)) : [];
+        this.internalSelectedRows = next;
+        this.dispatchEvent(new CustomEvent('db-selection-change', {
+            bubbles: true,
+            composed: true,
+            detail: { selectedRows: next },
+        }));
+        this.render();
+    }
+    getPaginatedData() {
+        const sorted = this.getSortedData();
+        if (!this.hasAttribute('pagination'))
+            return sorted;
+        const pageSize = Number(this.getAttribute('page-size') || 10);
+        const totalItems = Number(this.getAttribute('total-items') || sorted.length);
+        const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+        const page = Math.min(this.internalPage, totalPages);
+        const start = (page - 1) * pageSize;
+        return sorted.slice(start, start + pageSize);
+    }
+    createSortIcon(column) {
+        const icon = document.createElement('span');
+        icon.className = 'designbase-wc-table__sort-icon';
+        const isSorted = this.internalSortColumn === column.key && Boolean(this.internalSortDirection);
+        if (!isSorted) {
+            icon.classList.add('designbase-wc-table__sort-icon--idle');
+            const stack = document.createElement('span');
+            stack.className = 'designbase-wc-table__sort-icon-stack';
+            stack.append(createDbIcon('chevron-up', 10), createDbIcon('chevron-down', 10));
+            icon.append(stack);
+            return icon;
+        }
+        icon.classList.add(this.internalSortDirection === 'asc'
+            ? 'designbase-wc-table__sort-icon--asc'
+            : 'designbase-wc-table__sort-icon--desc');
+        icon.append(createDbIcon(this.internalSortDirection === 'asc' ? 'chevron-up' : 'chevron-down', 14));
+        return icon;
+    }
+    createCheckbox(options) {
+        const checkbox = document.createElement('db-checkbox');
+        checkbox.setAttribute('size', 's');
+        checkbox.setAttribute('has-label', 'false');
+        if (options.checked)
+            checkbox.setAttribute('checked', '');
+        if (options.indeterminate)
+            checkbox.setAttribute('indeterminate', '');
+        if (options.stopPropagation) {
+            checkbox.addEventListener('click', (event) => event.stopPropagation());
+        }
+        checkbox.addEventListener('db-change', (event) => {
+            const detail = event.detail;
+            options.onChange?.(detail.checked);
+        });
+        return checkbox;
+    }
+    render() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const resolvedSize = SIZES.includes(size) ? size : 'm';
+        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'default';
+        const columns = this.columns;
+        const paginatedData = this.getPaginatedData();
+        const sortedData = this.getSortedData();
+        const loading = this.hasAttribute('loading');
+        const selectable = this.hasAttribute('selectable');
+        const sortable = this.hasAttribute('sortable');
+        const emptyMessage = this.getAttribute('empty-message') || '데이터가 없습니다.';
+        this.className = [
+            'designbase-wc-table',
+            `designbase-wc-table--${resolvedSize}`,
+            `designbase-wc-table--${resolvedVariant}`,
+            selectable && 'designbase-wc-table--selectable',
+            sortable && 'designbase-wc-table--sortable',
+            loading && 'designbase-wc-table--loading',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.replaceChildren();
+        if (loading) {
+            const loadingWrap = document.createElement('div');
+            loadingWrap.className = 'designbase-wc-table__loading';
+            const spinner = document.createElement('div');
+            spinner.className = 'designbase-wc-table__loading-spinner';
+            const text = document.createElement('span');
+            text.textContent = '로딩 중...';
+            loadingWrap.append(spinner, text);
+            this.append(loadingWrap);
+            return;
+        }
+        const title = this.getAttribute('title');
+        const showCountBadge = this.hasAttribute('show-count-badge');
+        if (title || showCountBadge) {
+            const header = document.createElement('div');
+            header.className = 'designbase-wc-table__header';
+            const left = document.createElement('div');
+            left.className = 'designbase-wc-table__header-left';
+            if (title) {
+                const heading = document.createElement('h3');
+                heading.className = 'designbase-wc-table__title';
+                heading.textContent = title;
+                left.append(heading);
+            }
+            if (showCountBadge) {
+                const badge = document.createElement('db-badge');
+                badge.setAttribute('count', String(this.data.length));
+                badge.setAttribute('badge-style', 'number');
+                badge.setAttribute('variant', 'primary');
+                badge.setAttribute('size', 's');
+                left.append(badge);
+            }
+            header.append(left);
+            this.append(header);
+        }
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-table__container';
+        const table = document.createElement('table');
+        table.className = 'designbase-wc-table__table';
+        const thead = document.createElement('thead');
+        thead.className = 'designbase-wc-table__thead';
+        const headRow = document.createElement('tr');
+        headRow.className = 'designbase-wc-table__tr';
+        const visibleKeys = paginatedData.map((item, index) => this.getRowKey(item, index));
+        const selectedVisible = visibleKeys.filter((key) => this.internalSelectedRows.includes(key));
+        const rowClickable = this.hasAttribute('clickable');
+        if (selectable) {
+            const th = document.createElement('th');
+            th.className = 'designbase-wc-table__th designbase-wc-table__th--checkbox';
+            const checkbox = this.createCheckbox({
+                checked: visibleKeys.length > 0 && selectedVisible.length === visibleKeys.length,
+                indeterminate: selectedVisible.length > 0 && selectedVisible.length < visibleKeys.length,
+                onChange: (checked) => this.handleSelectAll(checked),
+            });
+            th.append(checkbox);
+            headRow.append(th);
+        }
+        columns.forEach((column) => {
+            const th = document.createElement('th');
+            th.className = [
+                'designbase-wc-table__th',
+                `designbase-wc-table__th--${column.align || 'left'}`,
+                sortable && column.sortable && 'designbase-wc-table__th--sortable',
+                this.internalSortColumn === column.key &&
+                    this.internalSortDirection &&
+                    'designbase-wc-table__th--sorted',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            if (column.width)
+                th.style.width = typeof column.width === 'number' ? `${column.width}px` : column.width;
+            const content = document.createElement('div');
+            content.className = 'designbase-wc-table__th-content';
+            const text = document.createElement('span');
+            text.className = 'designbase-wc-table__th-text';
+            text.textContent = column.header;
+            content.append(text);
+            if (sortable && column.sortable)
+                content.append(this.createSortIcon(column));
+            th.append(content);
+            if (sortable && column.sortable) {
+                th.addEventListener('click', () => this.handleSort(column));
+            }
+            headRow.append(th);
+        });
+        thead.append(headRow);
+        const tbody = document.createElement('tbody');
+        tbody.className = 'designbase-wc-table__tbody';
+        if (sortedData.length === 0) {
+            const row = document.createElement('tr');
+            row.className = 'designbase-wc-table__tr';
+            const cell = document.createElement('td');
+            cell.className = 'designbase-wc-table__td designbase-wc-table__td--empty';
+            cell.colSpan = Math.max(columns.length + (selectable ? 1 : 0), 1);
+            const empty = document.createElement('db-empty-state');
+            empty.setAttribute('title', '데이터가 없습니다');
+            empty.setAttribute('description', emptyMessage);
+            empty.setAttribute('variant', 'no-data');
+            empty.setAttribute('size', 'm');
+            cell.append(empty);
+            row.append(cell);
+            tbody.append(row);
+        }
+        else {
+            paginatedData.forEach((item, index) => {
+                const rowKey = this.getRowKey(item, index);
+                const isSelected = this.internalSelectedRows.includes(rowKey);
+                const row = document.createElement('tr');
+                row.className = [
+                    'designbase-wc-table__tr',
+                    rowClickable && 'designbase-wc-table__tr--clickable',
+                    isSelected && 'designbase-wc-table__tr--selected',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                if (rowClickable) {
+                    row.addEventListener('click', () => {
+                        this.dispatchEvent(new CustomEvent('db-row-click', {
+                            detail: { item, index },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    });
+                }
+                if (selectable) {
+                    const cell = document.createElement('td');
+                    cell.className = 'designbase-wc-table__td designbase-wc-table__td--checkbox';
+                    const checkbox = this.createCheckbox({
+                        checked: isSelected,
+                        stopPropagation: true,
+                        onChange: (checked) => this.handleRowSelect(rowKey, checked),
+                    });
+                    cell.append(checkbox);
+                    row.append(cell);
+                }
+                columns.forEach((column) => {
+                    const cell = document.createElement('td');
+                    cell.className = [
+                        'designbase-wc-table__td',
+                        `designbase-wc-table__td--${column.align || 'left'}`,
+                    ].join(' ');
+                    cell.textContent = String(item[column.key] ?? '');
+                    row.append(cell);
+                });
+                tbody.append(row);
+            });
+        }
+        table.append(thead, tbody);
+        container.append(table);
+        this.append(container);
+        if (this.hasAttribute('pagination')) {
+            const pageSize = Number(this.getAttribute('page-size') || 10);
+            const totalItems = Number(this.getAttribute('total-items') || sortedData.length);
+            const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+            const footer = document.createElement('div');
+            footer.className = 'designbase-wc-table__footer';
+            const pagination = document.createElement('db-pagination');
+            pagination.setAttribute('current-page', String(this.internalPage));
+            pagination.setAttribute('total-pages', String(totalPages));
+            pagination.setAttribute('size', resolvedSize);
+            pagination.setAttribute('show-first-last', '');
+            pagination.addEventListener('db-change', (event) => {
+                const page = Number(event.detail?.page || 1);
+                this.internalPage = page;
+                this.dispatchEvent(new CustomEvent('db-page-change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { page },
+                }));
+                this.render();
+            });
+            footer.append(pagination);
+            this.append(footer);
+        }
+    }
+}
+if (!customElements.get('db-table'))
+    customElements.define('db-table', DbTable);
+
+export { DbTable };