@stonecrop/atable 0.4.24 → 0.4.26

package/README.md

@@ -61,7 +61,53 @@ The primary API for ATable is the column object.
 }
 ```
 
-## Column Data Types
+## v-model:rows and v-model:columns
+
+ATable now requires both rows and columns to be passed as model values using `v-model:rows` and `v-model:columns`. This allows you to dynamically modify both the table data and structure at runtime.
+
+### Basic Usage
+
+```vue
+<template>
+  <ATable
+    v-model:rows="tableData"
+    v-model:columns="tableColumns"
+    @columns:update="onColumnsChange" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const tableData = ref([...])
+const tableColumns = ref([
+  { name: 'id', label: 'ID', width: '80px', type: 'Data' },
+  { name: 'name', label: 'Name', width: '150px', type: 'Data' },
+])
+
+const onColumnsChange = (columns) => {
+  console.log('Columns updated:', columns)
+}
+</script>
+```
+
+### Features
+
+- **Reactive rows and columns**: Both data and structure can be modified at runtime
+- **Column resizing**: When users resize columns, the model is automatically updated
+- **Event emission**: The `columns:update` event is emitted whenever columns change
+- **Required models**: Both `v-model:rows` and `v-model:columns` are required
+
+### Migration
+
+**Breaking Change**: The `:columns` prop has been removed. Update your existing code:
+
+```vue
+<!-- OLD: This no longer works -->
+<ATable v-model="data" :columns="columns" />
+
+<!-- NEW: Required syntax -->
+<ATable v-model:rows="data" v-model:columns="columns" />
+```## Column Data Types
 
 `v0.1`
 

package/dist/assets/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch;border-top:1px solid var(--sc-row-border-color)}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.cell-modified{font-weight:700;font-style:italic}.cell-modified-highlight{background-color:var(--sc-cell-changed-color)}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height)}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.expandable-row.changed-row-gradient[data-v-5ad4bb41]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.aganttcell[data-v-a77cc6d2]{background-color:#f9f9f9;width:100%;padding:0;height:100%}.gantt-container[data-v-a77cc6d2]{position:relative;height:100%;background-color:#f0f0f0;border-radius:4px;overflow:visible}.gantt-bar[data-v-a77cc6d2]{position:absolute;border-radius:4px;display:flex;align-items:center;justify-content:space-between;cursor:grab;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);transition:left .1s ease-out,width .1s ease-out;height:80%;top:50%;z-index:2;transform:translateY(-50%)}.gantt-bar[data-v-a77cc6d2]:active{cursor:grabbing}.gantt-bar.is-dragging[data-v-a77cc6d2]{z-index:10}.gantt-label[data-v-a77cc6d2]{flex:1;text-align:center;font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;-webkit-user-select:none;user-select:none}.resize-handle[data-v-a77cc6d2]{position:relative;width:12px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:0;background:#00000040}.left-resize-handle[data-v-a77cc6d2]{border-right:1px solid rgba(0,0,0,.5)}.right-resize-handle[data-v-a77cc6d2]{border-left:1px solid rgba(0,0,0,.5)}.handle-grip[data-v-a77cc6d2]{width:4px;height:12px;border-radius:2px;background:#000c}.resize-handle[data-v-a77cc6d2]:hover{background-color:#ffffff80}.vertical-indicator[data-v-a77cc6d2]{position:absolute;width:2px;opacity:0;pointer-events:none;transition:opacity .2s ease;top:-100vh;height:100vh;z-index:5;background-color:var(--52017849)}.left-indicator[data-v-a77cc6d2]{left:50%;transform:translate(-50%)}.right-indicator[data-v-a77cc6d2]{right:50%;transform:translate(50%)}.resize-handle.is-dragging .vertical-indicator[data-v-a77cc6d2]{opacity:.7}.gantt-container[data-v-a77cc6d2]:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:calc(100% / var(--0d200c71)) 100%;background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px);pointer-events:none;z-index:1}.connection-handle[data-v-a77cc6d2]{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:0;transition:opacity .2s ease;cursor:crosshair;z-index:15;display:flex;align-items:center;justify-content:center}.connection-handle.visible[data-v-a77cc6d2]{opacity:1}.left-connection-handle[data-v-a77cc6d2]{left:-16px}.right-connection-handle[data-v-a77cc6d2]{right:-16px}.connection-dot[data-v-a77cc6d2]{width:8px;height:8px;border-radius:50%;background-color:#2196f3;border:2px solid white;box-shadow:0 1px 3px #0000004d}.connection-handle:hover .connection-dot[data-v-a77cc6d2]{background-color:#1976d2;transform:scale(1.2)}.connection-handle.is-dragging[data-v-a77cc6d2]{opacity:1!important}.connection-handle.is-dragging .connection-dot[data-v-a77cc6d2]{background-color:#1976d2;transform:scale(1.3);box-shadow:0 2px 8px #2196f366}.atable-row{background-color:#fff}.atable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-row:has(td.cell-modified)>td.sticky-column,.atable-row:has(td.cell-modified)>th.sticky-column,.atable-row:has(td.cell-modified)>td.sticky-index,.atable-row:has(td.cell-modified)>th.sticky-index{background:var(--sc-cell-changed-color)}.atable-row.changed-row-gradient[data-v-c554ee0f]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.gantt-connection-overlay[data-v-955111b6]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-path[data-v-955111b6]{transition:stroke-width .2s ease;pointer-events:auto;cursor:pointer;stroke-dasharray:5px;stroke:var(--sc-cell-text-color)}#arrowhead-marker polygon[data-v-955111b6]{fill:var(--sc-cell-text-color)}.animated-path[data-v-955111b6]{animation:animated-dash-955111b6 infinite 1.5s linear}.connection-path[data-v-955111b6]:hover{stroke-width:3px}.connection-hitbox[data-v-955111b6]{pointer-events:auto;cursor:pointer}@keyframes animated-dash-955111b6{0%{stroke-dashoffset:0px}to{stroke-dashoffset:-10px}}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color);position:relative}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:5}.atable-container{position:relative}.sticky-index{position:sticky;left:0;z-index:10;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:10;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color)}[data-v-8533f0fc]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-8533f0fc]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto;overflow:clip;height:1px}.atable th[data-v-8533f0fc]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-8533f0fc]:focus{outline:none}.atable[data-v-8533f0fc]:tbody{overflow:hidden;position:relative}.atable[data-v-8533f0fc]:tbody:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:transparent;z-index:100}.aloading[data-v-a930a25b]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-a930a25b]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:gradient-a930a25b infinite 2s;z-index:0}.aloading-header[data-v-a930a25b]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-a930a25b]:after{content:"...";animation:ellipse-a930a25b 2s;animation-iteration-count:infinite}@keyframes gradient-a930a25b{0%{left:-100%}to{left:100%}}@keyframes ellipse-a930a25b{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}.aloading[data-v-e1165876]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-e1165876]{width:50%;height:3px;position:absolute;left:-100%;bottom:0;background:var(--sc-row-border-color);animation:bar-left-e1165876 infinite 2s;z-index:0}.aloading-header[data-v-e1165876]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-e1165876]:after{content:"...";animation:ellipse-e1165876 2s;animation-iteration-count:infinite}@keyframes bar-left-e1165876{0%{left:-50%}to{left:100%}}@keyframes ellipse-e1165876{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}
+@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch;border-top:1px solid var(--sc-row-border-color)}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.cell-modified{font-weight:700;font-style:italic}.cell-modified-highlight{background-color:var(--sc-cell-changed-color)}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height)}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.expandable-row.changed-row-gradient[data-v-5ad4bb41]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.aganttcell[data-v-a77cc6d2]{background-color:#f9f9f9;width:100%;padding:0;height:100%}.gantt-container[data-v-a77cc6d2]{position:relative;height:100%;background-color:#f0f0f0;border-radius:4px;overflow:visible}.gantt-bar[data-v-a77cc6d2]{position:absolute;border-radius:4px;display:flex;align-items:center;justify-content:space-between;cursor:grab;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);transition:left .1s ease-out,width .1s ease-out;height:80%;top:50%;z-index:2;transform:translateY(-50%)}.gantt-bar[data-v-a77cc6d2]:active{cursor:grabbing}.gantt-bar.is-dragging[data-v-a77cc6d2]{z-index:10}.gantt-label[data-v-a77cc6d2]{flex:1;text-align:center;font-size:12px;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;-webkit-user-select:none;user-select:none}.resize-handle[data-v-a77cc6d2]{position:relative;width:12px;height:100%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:0;background:#00000040}.left-resize-handle[data-v-a77cc6d2]{border-right:1px solid rgba(0,0,0,.5)}.right-resize-handle[data-v-a77cc6d2]{border-left:1px solid rgba(0,0,0,.5)}.handle-grip[data-v-a77cc6d2]{width:4px;height:12px;border-radius:2px;background:#000c}.resize-handle[data-v-a77cc6d2]:hover{background-color:#ffffff80}.vertical-indicator[data-v-a77cc6d2]{position:absolute;width:2px;opacity:0;pointer-events:none;transition:opacity .2s ease;top:-100vh;height:100vh;z-index:5;background-color:var(--52017849)}.left-indicator[data-v-a77cc6d2]{left:50%;transform:translate(-50%)}.right-indicator[data-v-a77cc6d2]{right:50%;transform:translate(50%)}.resize-handle.is-dragging .vertical-indicator[data-v-a77cc6d2]{opacity:.7}.gantt-container[data-v-a77cc6d2]:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:calc(100% / var(--0d200c71)) 100%;background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px);pointer-events:none;z-index:1}.connection-handle[data-v-a77cc6d2]{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:0;transition:opacity .2s ease;cursor:crosshair;z-index:15;display:flex;align-items:center;justify-content:center}.connection-handle.visible[data-v-a77cc6d2]{opacity:1}.left-connection-handle[data-v-a77cc6d2]{left:-16px}.right-connection-handle[data-v-a77cc6d2]{right:-16px}.connection-dot[data-v-a77cc6d2]{width:8px;height:8px;border-radius:50%;background-color:#2196f3;border:2px solid white;box-shadow:0 1px 3px #0000004d}.connection-handle:hover .connection-dot[data-v-a77cc6d2]{background-color:#1976d2;transform:scale(1.2)}.connection-handle.is-dragging[data-v-a77cc6d2]{opacity:1!important}.connection-handle.is-dragging .connection-dot[data-v-a77cc6d2]{background-color:#1976d2;transform:scale(1.3);box-shadow:0 2px 8px #2196f366}.atable-row{background-color:#fff}.atable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-row:has(td.cell-modified)>td.sticky-column,.atable-row:has(td.cell-modified)>th.sticky-column,.atable-row:has(td.cell-modified)>td.sticky-index,.atable-row:has(td.cell-modified)>th.sticky-index{background:var(--sc-cell-changed-color)}.atable-row.changed-row-gradient[data-v-c554ee0f]:has(td.cell-modified){--cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);--cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);background:linear-gradient(90deg,var(--cell-color-start),var(--cell-color-end))}.gantt-connection-overlay[data-v-955111b6]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-path[data-v-955111b6]{transition:stroke-width .2s ease;pointer-events:auto;cursor:pointer;stroke-dasharray:5px;stroke:var(--sc-cell-text-color)}#arrowhead-marker polygon[data-v-955111b6]{fill:var(--sc-cell-text-color)}.animated-path[data-v-955111b6]{animation:animated-dash-955111b6 infinite 1.5s linear}.connection-path[data-v-955111b6]:hover{stroke-width:3px}.connection-hitbox[data-v-955111b6]{pointer-events:auto;cursor:pointer}@keyframes animated-dash-955111b6{0%{stroke-dashoffset:0px}to{stroke-dashoffset:-10px}}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color);position:relative}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:5}.atable-container{position:relative}.sticky-index{position:sticky;left:0;z-index:10;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:10;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color)}[data-v-7b5f2870]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-5);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-table-loading-color: 204, 204, 204;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-7b5f2870]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto;overflow:clip;height:1px}.atable th[data-v-7b5f2870]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-7b5f2870]:focus{outline:none}.atable[data-v-7b5f2870]:tbody{overflow:hidden;position:relative}.atable[data-v-7b5f2870]:tbody:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background-color:transparent;z-index:100}.aloading[data-v-a930a25b]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-a930a25b]{width:100%;height:100%;position:absolute;left:-100%;top:0;background:linear-gradient(90deg,rgba(var(--sc-table-loading-color),0),rgba(var(--sc-table-loading-color),1),rgba(var(--sc-table-loading-color),0));animation:gradient-a930a25b infinite 2s;z-index:0}.aloading-header[data-v-a930a25b]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-a930a25b]:after{content:"...";animation:ellipse-a930a25b 2s;animation-iteration-count:infinite}@keyframes gradient-a930a25b{0%{left:-100%}to{left:100%}}@keyframes ellipse-a930a25b{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}.aloading[data-v-e1165876]{width:100%;border-top:1px solid var(--sc-row-border-color);border-bottom:1px solid var(--sc-row-border-color);display:flex;background-color:#fff;border-left:4px solid var(--sc-row-border-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);align-items:center;box-sizing:border-box;background:var(--sc-focus-cell-background);overflow:hidden;position:relative}.aloading-bar[data-v-e1165876]{width:50%;height:3px;position:absolute;left:-100%;bottom:0;background:var(--sc-row-border-color);animation:bar-left-e1165876 infinite 2s;z-index:0}.aloading-header[data-v-e1165876]{color:var(--sc-cell-text-color);font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);padding:0;margin:0;font-weight:400;z-index:1}.aloading-header[data-v-e1165876]:after{content:"...";animation:ellipse-e1165876 2s;animation-iteration-count:infinite}@keyframes bar-left-e1165876{0%{left:-50%}to{left:100%}}@keyframes ellipse-e1165876{0%{content:""}20%{content:""}40%{content:"."}60%{content:".."}80%{content:"..."}}

package/dist/atable.d.ts

@@ -14,6 +14,7 @@ import { Ref } from 'vue';
 import type { ShallowRef } from 'vue';
 import { Store } from 'pinia';
 import { useElementBounding } from '@vueuse/core';
+import { WritableComputedRef } from 'vue';
 
 export { ACell }
 
@@ -148,10 +149,6 @@ export declare const createTableStore: (initData: {
     rows: TableRow[];
     id?: string;
     config?: TableConfig;
-    table?: {
-        [key: string]: any;
-    };
-    display?: TableDisplay[];
     modal?: TableModal;
 }) => Store<`table-${string}`, Pick<{
 columns: Ref<    {
@@ -254,25 +251,7 @@ width?: number | undefined;
 } | undefined;
 label?: string | undefined;
 }[]>;
-display: Ref<    {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[], TableDisplay[] | {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[]>;
+display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -344,7 +323,7 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
-table: Ref<    {}, {}>;
+table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
@@ -402,7 +381,8 @@ toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "columns" | "config" | "connectionHandles" | "connectionPaths" | "display" | "ganttBars" | "modal" | "rows" | "table" | "updates">, Pick<{
+updateRows: (newRows: TableRow[]) => void;
+}, "columns" | "config" | "connectionHandles" | "connectionPaths" | "ganttBars" | "modal" | "rows" | "updates">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -503,25 +483,7 @@ width?: number | undefined;
 } | undefined;
 label?: string | undefined;
 }[]>;
-display: Ref<    {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[], TableDisplay[] | {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[]>;
+display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -593,7 +555,7 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
-table: Ref<    {}, {}>;
+table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
@@ -651,7 +613,8 @@ toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "hasPinnedColumns" | "isGanttView" | "isTreeView" | "numberedRowWidth" | "zeroColumn">, Pick<{
+updateRows: (newRows: TableRow[]) => void;
+}, "display" | "table" | "hasPinnedColumns" | "isGanttView" | "isTreeView" | "numberedRowWidth" | "zeroColumn">, Pick<{
 columns: Ref<    {
 name: string;
 align?: CanvasTextAlign | undefined;
@@ -752,25 +715,7 @@ width?: number | undefined;
 } | undefined;
 label?: string | undefined;
 }[]>;
-display: Ref<    {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[], TableDisplay[] | {
-expanded?: boolean | undefined;
-childrenOpen?: boolean | undefined;
-isParent?: boolean | undefined;
-isRoot?: boolean | undefined;
-open?: boolean | undefined;
-indent?: number | undefined;
-parent?: number | undefined;
-rowModified?: boolean | undefined;
-}[]>;
+display: WritableComputedRef<TableDisplay[], TableDisplay[]>;
 ganttBars: Ref<    {
 id: string;
 rowIndex: number;
@@ -842,7 +787,7 @@ endIndex?: number | undefined;
 colspan?: number | undefined;
 } | undefined;
 }[]>;
-table: Ref<    {}, {}>;
+table: ComputedRef<    {}>;
 updates: Ref<Record<string, string>, Record<string, string>>;
 hasPinnedColumns: ComputedRef<boolean>;
 isGanttView: ComputedRef<boolean>;
@@ -900,7 +845,8 @@ toggleRowExpand: (rowIndex: number) => void;
 unregisterConnectionHandle: (handleId: string) => void;
 unregisterGanttBar: (barId: string) => void;
 updateGanttBar: (event: GanttDragEvent) => void;
-}, "closeModal" | "createConnection" | "deleteConnection" | "getCellData" | "getCellDisplayValue" | "getConnectionsForBar" | "getFormattedValue" | "getHandlesForBar" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "registerConnectionHandle" | "registerGanttBar" | "resizeColumn" | "setCellData" | "setCellText" | "toggleRowExpand" | "unregisterConnectionHandle" | "unregisterGanttBar" | "updateGanttBar">>;
+updateRows: (newRows: TableRow[]) => void;
+}, "closeModal" | "createConnection" | "deleteConnection" | "getCellData" | "getCellDisplayValue" | "getConnectionsForBar" | "getFormattedValue" | "getHandlesForBar" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "registerConnectionHandle" | "registerGanttBar" | "resizeColumn" | "setCellData" | "setCellText" | "toggleRowExpand" | "unregisterConnectionHandle" | "unregisterGanttBar" | "updateGanttBar" | "updateRows">>;
 
 /**
  * Gantt bar information for VueFlow integration.