@onereach/ui-components 13.0.2-beta.4620.0 → 13.0.2-beta.4625.0

package/dist/esm/v2/{OrDataGrid-95f93a07.js → OrDataGrid-e63e7e8b.js}

@@ -5,7 +5,7 @@ import { _ as __vue_component__$h } from './OrSearch-e837ee15.js';
 import './OrSkeletonCircle.vue_rollup-plugin-vue_script-f572f02f.js';
 import './OrSkeletonRect.vue_rollup-plugin-vue_script-d2b78065.js';
 import { _ as __vue_component__$i } from './OrSkeletonText-b6e51e70.js';
-import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-883e722a.js';
+import { _ as __vue_component__$2, a as __vue_component__$3, b as __vue_component__$4, c as __vue_component__$5, d as __vue_component__$6, e as __vue_component__$7, f as __vue_component__$8, g as __vue_component__$9, h as __vue_component__$a, i as __vue_component__$b, j as __vue_component__$c, k as __vue_component__$d, l as __vue_component__$e, m as __vue_component__$f, D as DataGridVariant } from './OrDataGridToolbar-7eeadaf3.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DataGrid = [
@@ -226,7 +226,13 @@ var __vue_render__ = function () {
     attrs: {
       "variant": _vm.variant
     }
-  }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell', [_c('OrCheckbox', {
+  }, [_vm.features.selecting ? [_c('OrDataGridTableHeaderCell', {
+    attrs: {
+      "column": {
+        stickiness: 'start'
+      }
+    }
+  }, [_c('OrCheckbox', {
     class: {
       'invisible': _vm.items.length === 0 || _vm.loading
     },
@@ -263,6 +269,9 @@ var __vue_render__ = function () {
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       attrs: {
+        "column": {
+          stickiness: 'start'
+        },
         "override": true
       }
     }, [_c('OrSkeletonText')], 1)] : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column) {
@@ -284,6 +293,9 @@ var __vue_render__ = function () {
       }
     }, [_vm.features.selecting ? [_c('OrDataGridTableContentCell', {
       attrs: {
+        "column": {
+          stickiness: 'start'
+        },
         "force-state": 'none'
       }
     }, [_c('OrCheckbox', {

package/dist/esm/v2/{OrDataGridToolbar-883e722a.js → OrDataGridToolbar-7eeadaf3.js}

@@ -210,7 +210,7 @@ var script$b = defineComponent({
     const root = ref();
     const rootStyles = computed(() => {
       var _a;
-      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`, 'z-20'] : [])];
+      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -772,8 +772,8 @@ var script$5 = defineComponent({
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => {
-      var _a, _b;
-      return ['or-data-grid-table-header-cell-v3', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`, 'z-20'] : []), ...(((_b = props.features) === null || _b === void 0 ? void 0 : _b.sorting) && props.column ? ['interactivity-click'] : [])];
+      var _a, _b, _c;
+      return ['or-data-grid-table-header-cell-v3', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : []), ...(((_b = props.features) === null || _b === void 0 ? void 0 : _b.sorting) && ((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) ? ['interactivity-click'] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -1101,7 +1101,9 @@ const DataGridTable = [
 // Overflow
 'overflow-auto',
 // Interactivity
-'interactivity-default'];
+'interactivity-default',
+// Spacing
+'-mx-[calc(theme(outlineWidth.2))]', '-my-0', 'px-[calc(theme(outlineWidth.2))]', 'py-0'];
 
 var script$1 = defineComponent({
   name: 'OrDataGridTable',

package/dist/esm/v2/components/index.js

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-da2fc9f0.js';
 export { _ as OrConfirm } from '../OrConfirm-8f6d47e1.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-5994da81.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-a6fee3eb.js';
-export { _ as OrDataGridV3 } from '../OrDataGrid-95f93a07.js';
-export { D as DataGridVariant } from '../OrDataGridToolbar-883e722a.js';
+export { _ as OrDataGridV3 } from '../OrDataGrid-e63e7e8b.js';
+export { D as DataGridVariant } from '../OrDataGridToolbar-7eeadaf3.js';
 export { _ as OrDateFormatV3 } from '../OrDateFormat-2ff9c3f0.js';
 export { _ as OrDatePickerV3 } from '../OrDatePicker-4f0cb374.js';
 export { _ as OrDateRangePickerV3 } from '../OrDateRangePicker-f46faeae.js';

package/dist/esm/v2/components/or-data-grid-v3/OrDataGrid.vue.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     filteringModel: import("vue-demi").WritableComputedRef<undefined>;
     searchingModel: import("vue-demi").WritableComputedRef<import("../../types").ModelValue<string>>;
     sortingModel: import("vue-demi").WritableComputedRef<import("../../types").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>>;
     pagingModel: import("vue-demi").WritableComputedRef<import("../or-pagination-v3").PaginationModelValue>;

package/dist/esm/v2/components/or-data-grid-v3/index.js

@@ -1,5 +1,5 @@
-export { _ as OrDataGridV3 } from '../../OrDataGrid-95f93a07.js';
-export { D as DataGridVariant } from '../../OrDataGridToolbar-883e722a.js';
+export { _ as OrDataGridV3 } from '../../OrDataGrid-e63e7e8b.js';
+export { D as DataGridVariant } from '../../OrDataGridToolbar-7eeadaf3.js';
 import 'vue-demi';
 import '../../OrCheckbox-f2dc364e.js';
 import '../../useIdAttribute-3a339b79.js';

package/dist/esm/v2/components/or-data-grid-v3/partials/index.js

@@ -1,4 +1,4 @@
-export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-883e722a.js';
+export { _ as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-7eeadaf3.js';
 import 'vue-demi';
 import '../../../normalize-component-6e8e3d80.js';
 import '../../../TimeFormat-a7f5565b.js';

package/dist/esm/v2/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue.d.ts

@@ -3,7 +3,7 @@ import { DataGridColumn, DataGridFeatures } from '../../types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<import("../../../..").ModelValue<{
-            column: string;
+            column: string | undefined;
             direction: "asc" | "desc";
         }>>;
         default: undefined;
@@ -21,14 +21,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     rootInlineStyles: import("vue-demi").ComputedRef<Partial<CSSStyleDeclaration>>;
     model: import("vue-demi").WritableComputedRef<import("../../../..").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>>;
     toggleSorting: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<import("../../../..").ModelValue<{
-            column: string;
+            column: string | undefined;
             direction: "asc" | "desc";
         }>>;
         default: undefined;
@@ -45,7 +45,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: import("../../../..").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>;
     column: DataGridColumn;

package/dist/esm/v2/components/or-data-grid-v3/types.d.ts

@@ -13,8 +13,8 @@ export type DataGridModelValue = ModelValue<{
 }>;
 export type DataGridItem<T extends DataModel> = T;
 export type DataGridColumn = {
-    name: string;
-    label: string;
+    name?: string;
+    label?: string;
     width?: string;
     alignment?: 'start' | 'end' | 'center';
     stickiness?: 'start' | 'end';

package/dist/esm/v2/index.js

@@ -34,8 +34,8 @@ export { _ as OrCombinedInputV3 } from './OrCombinedInput-da2fc9f0.js';
 export { _ as OrConfirm } from './OrConfirm-8f6d47e1.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-5994da81.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-a6fee3eb.js';
-export { _ as OrDataGridV3 } from './OrDataGrid-95f93a07.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-883e722a.js';
+export { _ as OrDataGridV3 } from './OrDataGrid-e63e7e8b.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-7eeadaf3.js';
 export { _ as OrDateFormatV3 } from './OrDateFormat-2ff9c3f0.js';
 export { _ as OrDatePickerV3 } from './OrDatePicker-4f0cb374.js';
 export { _ as OrDateRangePickerV3 } from './OrDateRangePicker-f46faeae.js';

package/dist/esm/v3/{OrDataGrid-be779c61.js → OrDataGrid-bbd22378.js}

@@ -5,7 +5,7 @@ import { s as script$h } from './OrSearch-b7a558ef.js';
 import './OrSkeletonCircle-a3eb5f53.js';
 import './OrSkeletonRect-d0b8b2cf.js';
 import { s as script$i } from './OrSkeletonText-5e9579c1.js';
-import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, m as script$f, D as DataGridVariant } from './OrDataGridToolbar-4425e714.js';
+import { s as script$2, a as script$3, b as script$4, c as script$5, d as script$6, e as script$7, f as script$8, g as script$9, h as script$a, i as script$b, j as script$c, k as script$d, l as script$e, m as script$f, D as DataGridVariant } from './OrDataGridToolbar-31757ba2.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createSlots, withCtx, renderSlot, createVNode, createCommentVNode, Fragment, renderList, createTextVNode, toDisplayString } from 'vue';
 
 const DataGrid = [
@@ -234,7 +234,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         variant: _ctx.variant
       }, {
         default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableHeaderCell, {
-          key: 0
+          key: 0,
+          column: {
+            stickiness: 'start'
+          }
         }, {
           default: withCtx(() => [createVNode(_component_OrCheckbox, {
             modelValue: _ctx.selectingIndicator,
@@ -270,6 +273,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
+            column: {
+              stickiness: 'start'
+            },
             override: true
           }, {
             default: withCtx(() => [createVNode(_component_OrSkeletonText)]),
@@ -297,6 +303,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [_ctx.features.selecting ? (openBlock(), createBlock(_component_OrDataGridTableContentCell, {
             key: 0,
+            column: {
+              stickiness: 'start'
+            },
             "force-state": 'none'
           }, {
             default: withCtx(() => [createVNode(_component_OrCheckbox, {

package/dist/esm/v3/{OrDataGridToolbar-4425e714.js → OrDataGridToolbar-31757ba2.js}

@@ -168,7 +168,7 @@ var script$b = defineComponent({
     const root = ref();
     const rootStyles = computed(() => {
       var _a;
-      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`, 'z-20'] : [])];
+      return ['or-data-grid-table-content-cell-v3', ...DataGridTableContentCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -546,8 +546,8 @@ var script$5 = defineComponent({
     // Refs & Styles
     const root = ref();
     const rootStyles = computed(() => {
-      var _a, _b;
-      return ['or-data-grid-table-header-cell-v3', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`, 'z-20'] : []), ...(((_b = props.features) === null || _b === void 0 ? void 0 : _b.sorting) && props.column ? ['interactivity-click'] : [])];
+      var _a, _b, _c;
+      return ['or-data-grid-table-header-cell-v3', ...DataGridTableHeaderCell, ...(((_a = props.column) === null || _a === void 0 ? void 0 : _a.stickiness) ? [`sticky-${props.column.stickiness}`] : []), ...(((_b = props.features) === null || _b === void 0 ? void 0 : _b.sorting) && ((_c = props.column) === null || _c === void 0 ? void 0 : _c.name) ? ['interactivity-click'] : [])];
     });
     const rootInlineStyles = computed(() => {
       if (props.column) {
@@ -776,7 +776,9 @@ const DataGridTable = [
 // Overflow
 'overflow-auto',
 // Interactivity
-'interactivity-default'];
+'interactivity-default',
+// Spacing
+'-mx-[calc(theme(outlineWidth.2))]', '-my-0', 'px-[calc(theme(outlineWidth.2))]', 'py-0'];
 
 var script$1 = defineComponent({
   name: 'OrDataGridTable',

package/dist/esm/v3/components/index.js

@@ -32,8 +32,8 @@ export { s as OrCombinedInputV3 } from '../OrCombinedInput-75b556fa.js';
 export { s as OrConfirm } from '../OrConfirm-05a78778.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-beae75d5.js';
 export { s as OrContextMenuV3 } from '../OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from '../OrDataGrid-be779c61.js';
-export { D as DataGridVariant } from '../OrDataGridToolbar-4425e714.js';
+export { s as OrDataGridV3 } from '../OrDataGrid-bbd22378.js';
+export { D as DataGridVariant } from '../OrDataGridToolbar-31757ba2.js';
 export { s as OrDateFormatV3 } from '../OrDateFormat-616cd68b.js';
 export { s as OrDatePickerV3 } from '../OrDatePicker-cbd5183d.js';
 export { s as OrDateRangePickerV3 } from '../OrDateRangePicker-7546b7be.js';

package/dist/esm/v3/components/or-data-grid-v3/OrDataGrid.vue.d.ts

@@ -37,7 +37,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     filteringModel: import("vue-demi").WritableComputedRef<undefined>;
     searchingModel: import("vue-demi").WritableComputedRef<import("../../types").ModelValue<string>>;
     sortingModel: import("vue-demi").WritableComputedRef<import("../../types").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>>;
     pagingModel: import("vue-demi").WritableComputedRef<import("../or-pagination-v3").PaginationModelValue>;

package/dist/esm/v3/components/or-data-grid-v3/index.js

@@ -1,5 +1,5 @@
-export { s as OrDataGridV3 } from '../../OrDataGrid-be779c61.js';
-export { D as DataGridVariant } from '../../OrDataGridToolbar-4425e714.js';
+export { s as OrDataGridV3 } from '../../OrDataGrid-bbd22378.js';
+export { D as DataGridVariant } from '../../OrDataGridToolbar-31757ba2.js';
 import 'vue-demi';
 import '../../OrCheckbox-e353ee89.js';
 import '../../useIdAttribute-3a339b79.js';

package/dist/esm/v3/components/or-data-grid-v3/partials/index.js

@@ -1,4 +1,4 @@
-export { s as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-4425e714.js';
+export { s as OrDataGridFooter, a as OrDataGridHeader, b as OrDataGridTable, c as OrDataGridTableContent, d as OrDataGridTableContentCell, e as OrDataGridTableContentRow, f as OrDataGridTableFooter, g as OrDataGridTableFooterCell, h as OrDataGridTableFooterRow, i as OrDataGridTableHeader, j as OrDataGridTableHeaderCell, k as OrDataGridTableHeaderRow, l as OrDataGridTablePlaceholder, m as OrDataGridToolbar } from '../../../OrDataGridToolbar-31757ba2.js';
 import 'vue-demi';
 import 'vue';
 import '../../../TimeFormat-a7f5565b.js';

package/dist/esm/v3/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue.d.ts

@@ -3,7 +3,7 @@ import { DataGridColumn, DataGridFeatures } from '../../types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: PropType<import("../../../..").ModelValue<{
-            column: string;
+            column: string | undefined;
             direction: "asc" | "desc";
         }>>;
         default: undefined;
@@ -21,14 +21,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     rootInlineStyles: import("vue-demi").ComputedRef<Partial<CSSStyleDeclaration>>;
     model: import("vue-demi").WritableComputedRef<import("../../../..").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>>;
     toggleSorting: () => void;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: PropType<import("../../../..").ModelValue<{
-            column: string;
+            column: string | undefined;
             direction: "asc" | "desc";
         }>>;
         default: undefined;
@@ -45,7 +45,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: import("../../../..").ModelValue<{
-        column: string;
+        column: string | undefined;
         direction: "asc" | "desc";
     }>;
     column: DataGridColumn;

package/dist/esm/v3/components/or-data-grid-v3/types.d.ts

@@ -13,8 +13,8 @@ export type DataGridModelValue = ModelValue<{
 }>;
 export type DataGridItem<T extends DataModel> = T;
 export type DataGridColumn = {
-    name: string;
-    label: string;
+    name?: string;
+    label?: string;
     width?: string;
     alignment?: 'start' | 'end' | 'center';
     stickiness?: 'start' | 'end';

package/dist/esm/v3/index.js

@@ -32,8 +32,8 @@ export { s as OrCombinedInputV3 } from './OrCombinedInput-75b556fa.js';
 export { s as OrConfirm } from './OrConfirm-05a78778.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-beae75d5.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-d8c71891.js';
-export { s as OrDataGridV3 } from './OrDataGrid-be779c61.js';
-export { D as DataGridVariant } from './OrDataGridToolbar-4425e714.js';
+export { s as OrDataGridV3 } from './OrDataGrid-bbd22378.js';
+export { D as DataGridVariant } from './OrDataGridToolbar-31757ba2.js';
 export { s as OrDateFormatV3 } from './OrDateFormat-616cd68b.js';
 export { s as OrDatePickerV3 } from './OrDatePicker-cbd5183d.js';
 export { s as OrDateRangePickerV3 } from './OrDateRangePicker-7546b7be.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "13.0.2-beta.4620.0",
+  "version": "13.0.2-beta.4625.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,

package/src/components/or-data-grid-v3/OrDataGrid.vue

@@ -41,7 +41,9 @@
           :variant="variant"
         >
           <template v-if="features.selecting">
-            <OrDataGridTableHeaderCell>
+            <OrDataGridTableHeaderCell
+              :column="{ stickiness: 'start' }"
+            >
               <OrCheckbox
                 v-model="selectingIndicator"
                 :class="{ 'invisible': items.length === 0 || loading }"
@@ -71,6 +73,7 @@
           >
             <template v-if="features.selecting">
               <OrDataGridTableContentCell
+                :column="{ stickiness: 'start' }"
                 :override="true"
               >
                 <OrSkeletonText />
@@ -98,6 +101,7 @@
           >
             <template v-if="features.selecting">
               <OrDataGridTableContentCell
+                :column="{ stickiness: 'start' }"
                 :force-state="'none'"
               >
                 <OrCheckbox

package/src/components/or-data-grid-v3/partials/or-data-grid-table/styles.ts

@@ -7,4 +7,11 @@ export const DataGridTable: string[] = [
 
   // Interactivity
   'interactivity-default',
+
+  // Spacing
+  '-mx-[calc(theme(outlineWidth.2))]',
+  '-my-0',
+
+  'px-[calc(theme(outlineWidth.2))]',
+  'py-0',
 ];

package/src/components/or-data-grid-v3/partials/or-data-grid-table-content-cell/OrDataGridTableContentCell.vue

@@ -164,7 +164,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-data-grid-table-content-cell-v3',
       ...Styles.DataGridTableContentCell,
-      ...props.column?.stickiness ? [`sticky-${props.column.stickiness}`, 'z-20'] : [],
+      ...props.column?.stickiness ? [`sticky-${props.column.stickiness}`] : [],
     ]);
 
     const rootInlineStyles = computed(() => {

package/src/components/or-data-grid-v3/partials/or-data-grid-table-header-cell/OrDataGridTableHeaderCell.vue

@@ -65,8 +65,8 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-data-grid-table-header-cell-v3',
       ...Styles.DataGridTableHeaderCell,
-      ...props.column?.stickiness ? [`sticky-${props.column.stickiness}`, 'z-20'] : [],
-      ...props.features?.sorting && props.column ? ['interactivity-click'] : [],
+      ...props.column?.stickiness ? [`sticky-${props.column.stickiness}`] : [],
+      ...props.features?.sorting && props.column?.name ? ['interactivity-click'] : [],
     ]);
 
     const rootInlineStyles = computed(() => {

package/src/components/or-data-grid-v3/types.ts

@@ -21,8 +21,8 @@ export type DataGridModelValue = ModelValue<{
 export type DataGridItem<T extends DataModel> = T;
 
 export type DataGridColumn = {
-  name: string;
-  label: string;
+  name?: string;
+  label?: string;
 
   width?: string;