@lazhus/kg-ui 0.10.9 → 0.10.11

package/custom-elements.json

@@ -1520,13 +1520,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
+              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
+              "default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
             },
             {
               "kind": "method",
@@ -1558,6 +1558,16 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_rowClasses",
+              "parameters": [
+                {
+                  "name": "row"
+                }
+              ],
+              "description": "Builds the class list for a body row: the built-in `selected` state plus\nany custom class names returned by the consumer's `rowClassName(row)`."
+            },
             {
               "kind": "method",
               "name": "_emitSelectionChange"
@@ -1571,6 +1581,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_getNormalizedPageSizeOptions"
+            },
             {
               "kind": "method",
               "name": "_getProcessedData"
@@ -1778,6 +1792,14 @@
               },
               "default": "1"
             },
+            {
+              "kind": "field",
+              "name": "rowClassName",
+              "type": {
+                "text": "((row: any) => string) | null"
+              },
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "_sortColumn",
@@ -1814,11 +1836,23 @@
                 "text": "CustomEvent"
               }
             },
+            {
+              "name": "kg-page-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "page-size-change",
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "kg-page-size-change",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {

package/dist/components/kg-datagrid.js

@@ -1,22 +1,22 @@
-var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as s}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class o extends i{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(e){if(!this.selectable||"single"===this.selectionMode)return;const t=e.detail.checked;this.selectedRows=t?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(e,t){if(this.selectable)if(t.stopPropagation(),"single"===this.selectionMode)this._isSelected(e)||(this.selectedRows=[e],this._emitSelectionChange());else{let i;i="change"===t.type&&void 0!==t.detail&&void 0!==t.detail.checked?t.detail.checked:!this._isSelected(e),this.selectedRows=i?[...this.selectedRows,e]:this.selectedRows.filter(t=>t!==e),this._emitSelectionChange()}}_isSelected(e){return this.selectedRows.includes(e)}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(e){(e.sortable||this.sortable)&&(this._sortColumn===e.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=e.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getProcessedData(){if(this.serverSide)return{data:this.data,total:this.total||this.data.length};let e=[...this.data];if(this._sortColumn&&e.sort((e,t)=>{const i=e[this._sortColumn],r=t[this._sortColumn];return i<r?"asc"===this._sortDirection?-1:1:i>r?"asc"===this._sortDirection?1:-1:0}),this.pagination){const t=(this.currentPage-1)*this.pageSize,i=t+this.pageSize;return{data:e.slice(t,i),total:e.length}}return{data:e,total:e.length}}_changePage(e){if(e<1)return;const t=this.serverSide&&this.total||this.data.length;e>Math.ceil(t/this.pageSize)||(this.currentPage=e,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.currentPage,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.target.value);this.pageSize=t,this.currentPage=1,this.dispatchEvent(new CustomEvent("page-size-change",{detail:{pageSize:t,page:1},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:{page:1,pageSize:t},bubbles:!0,composed:!0}))}_renderCellContent(e,t){if(!e.render)return t[e.field];const i=e.render(t);return"string"==typeof i?s(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?s(t):t}return e.label}_getMaxDepth(e){if(!e||0===e.length)return 1;let t=0;const i=(e,r)=>{t=Math.max(t,r),e.forEach(e=>{e.children&&e.children.length>0&&i(e.children,r+1)})};return i(e,1),t}_getLeafCount(e){return e.children&&0!==e.children.length?e.children.reduce((e,t)=>e+this._getLeafCount(t),0):1}_getLeafColumns(e=this.columns){if(!e)return[];const t=[],i=e=>{e.forEach(e=>{e.children&&e.children.length>0?i(e.children):t.push(e)})};return i(e),t}_getHeaderRows(){const e=this._getMaxDepth(this.columns),t=Array.from({length:e},()=>[]),i=(r,a)=>{r.forEach(r=>{const s=!r.children||0===r.children.length,o=this._getLeafCount(r),n=s?e-a:1;t[a].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,a+1)})};return i(this.columns,0),t}render(){const{data:e,total:t}=this._getProcessedData(),i=this.pagination?Math.ceil(t/this.pageSize):1,r=this.data.length>0&&this.selectedRows.length===this.data.length,s="single"===this.selectionMode,o=this._getHeaderRows(),n=o.length,l=this._getLeafColumns(),d=(()=>{const e=[],t=this.currentPage-2,r=this.currentPage+2+1;for(let a=1;a<=i;a++)(1===a||a===i||a>=t&&a<r)&&e.push(a);return e})();return a`
+var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as s}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class o extends i{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(e){if(!this.selectable||"single"===this.selectionMode)return;const t=e.detail.checked;this.selectedRows=t?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(e,t){if(this.selectable)if(t.stopPropagation(),"single"===this.selectionMode)this._isSelected(e)||(this.selectedRows=[e],this._emitSelectionChange());else{let i;i="change"===t.type&&void 0!==t.detail&&void 0!==t.detail.checked?t.detail.checked:!this._isSelected(e),this.selectedRows=i?[...this.selectedRows,e]:this.selectedRows.filter(t=>t!==e),this._emitSelectionChange()}}_isSelected(e){return this.selectedRows.includes(e)}_rowClasses(e){const t=[];if(this._isSelected(e)&&t.push("selected"),"function"==typeof this.rowClassName){const i=this.rowClassName(e);i&&t.push(i)}return t.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(e){(e.sortable||this.sortable)&&(this._sortColumn===e.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=e.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let e=this.pageSizeOptions;if("string"==typeof e)try{e=JSON.parse(e)}catch(t){e=e.split(",").map(e=>Number(e.trim()))}return Array.isArray(e)&&0!==e.length||(e=[10,20,50,100]),e.map(e=>Number(e))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let e=[...this.data||[]];if(this._sortColumn&&e.sort((e,t)=>{const i=e[this._sortColumn],r=t[this._sortColumn];return i<r?"asc"===this._sortDirection?-1:1:i>r?"asc"===this._sortDirection?1:-1:0}),this.pagination){const t=Number(this.pageSize)||10,i=((Number(this.currentPage)||1)-1)*t,r=i+t;return{data:e.slice(i,r),total:e.length}}return{data:e,total:e.length}}_changePage(e){const t=Number(e);if(t<1)return;const i=Number(this.pageSize)||10,r=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(t>Math.max(1,Math.ceil(r/i)))return;this.currentPage=t;const s={page:t,pageSize:i};this.dispatchEvent(new CustomEvent("page-change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:s,bubbles:!0,composed:!0}))}_handlePageSizeChange(e){const t=parseInt(e.target.value,10)||10;this.pageSize=t,this.currentPage=1,this.requestUpdate();const i={pageSize:t,page:1},r={page:1,pageSize:t};this.dispatchEvent(new CustomEvent("page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:r,bubbles:!0,composed:!0}))}_renderCellContent(e,t){if(!e.render)return t[e.field];const i=e.render(t);return"string"==typeof i?a(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?a(t):t}return e.label}_getMaxDepth(e){if(!e||0===e.length)return 1;let t=0;const i=(e,r)=>{t=Math.max(t,r),e.forEach(e=>{e.children&&e.children.length>0&&i(e.children,r+1)})};return i(e,1),t}_getLeafCount(e){return e.children&&0!==e.children.length?e.children.reduce((e,t)=>e+this._getLeafCount(t),0):1}_getLeafColumns(e=this.columns){if(!e)return[];const t=[],i=e=>{e.forEach(e=>{e.children&&e.children.length>0?i(e.children):t.push(e)})};return i(e),t}_getHeaderRows(){const e=this._getMaxDepth(this.columns),t=Array.from({length:e},()=>[]),i=(r,s)=>{r.forEach(r=>{const a=!r.children||0===r.children.length,o=this._getLeafCount(r),n=a?e-s:1;t[s].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,s+1)})};return i(this.columns,0),t}render(){const{data:e,total:t}=this._getProcessedData(),i=Number(this.pageSize)||10,r=Number(this.currentPage)||1,a=Number(t)||0,o=this.pagination?Math.max(1,Math.ceil(a/i)):1,n=this._getNormalizedPageSizeOptions(),l=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,d="single"===this.selectionMode,c=this._getHeaderRows(),h=c.length,g=this._getLeafColumns(),p=(()=>{const e=[],t=r-2,i=r+2+1;for(let r=1;r<=o;r++)(1===r||r===o||r>=t&&r<i)&&e.push(r);return e})();return s`
       <div class="wrapper">
           <div class="table-container">
             <table>
               <thead>
-                ${o.map((e,t)=>a`
+                ${c.map((e,t)=>s`
                   <tr>
-                    ${0===t&&this.selectable?a`
-                      <th class="checkbox-cell" rowspan="${n}">
-                         ${s?"":a`
+                    ${0===t&&this.selectable?s`
+                      <th class="checkbox-cell" rowspan="${h}">
+                         ${d?"":s`
                           <kg-checkbox 
-                              .checked="${r}"
+                              .checked="${l}"
                               @change="${this._handleSelectAll}"
                           ></kg-checkbox>
                          `}
                       </th>
                     `:""}
                     
-                    ${e.map(e=>a`
+                    ${e.map(e=>s`
                       <th 
                           colspan="${e.colspan}"
                           rowspan="${e.rowspan}"
@@ -25,7 +25,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                           @click="${()=>e.children?null:this._handleSort(e)}"
                       >
                         ${this._renderHeaderContent(e)}
-                        ${!e.sortable&&!this.sortable||e.children?"":a`
+                        ${!e.sortable&&!this.sortable||e.children?"":s`
                           <span class="sort-icon">
                               ${this._sortColumn===e.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
                           </span>
@@ -36,40 +36,40 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                 `)}
               </thead>
               <tbody>
-                ${this.loading?a`
-                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>a`
+                ${this.loading?s`
+                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>s`
                         <tr>
-                             ${this.selectable?a`
+                             ${this.selectable?s`
                                 <td class="checkbox-cell">
                                     <kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
                                 </td>
                              `:""}
-                             ${l.map(()=>a`
+                             ${g.map(()=>s`
                                 <td>
                                     <kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
                                 </td>
                              `)}
                         </tr>
                     `)}
-                `:0===e.length?a`
+                `:0===e.length?s`
                   <tr>
-                     <td colspan="${l.length+(this.selectable?1:0)}" class="empty-state">
+                     <td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
                         Veri bulunamadı.
                      </td>
                   </tr>
-                `:e.map(e=>a`
-                  <tr 
-                    class="${this._isSelected(e)?"selected":""}"
+                `:e.map(e=>s`
+                  <tr
+                    class="${this._rowClasses(e)}"
                     @click="${t=>this._handleRowSelect(e,t)}"
                   >
-                    ${this.selectable?a`
+                    ${this.selectable?s`
                       <td class="checkbox-cell">
-                        ${s?a`
+                        ${d?s`
                             <kg-radio 
                                 .checked="${this._isSelected(e)}"
                                 style="pointer-events: none;" 
                             ></kg-radio>
-                        `:a`
+                        `:s`
                             <kg-checkbox 
                                 .checked="${this._isSelected(e)}"
                                 @change="${t=>this._handleRowSelect(e,t)}"
@@ -79,7 +79,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                       </td>
                     `:""}
     
-                    ${l.map(t=>a`
+                    ${g.map(t=>s`
                       <td class="${t.align?`align-${t.align}`:""}">
                         ${this._renderCellContent(t,e)}
                       </td>
@@ -90,18 +90,18 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
             </table>
           </div>
 
-          ${this.pagination&&t>0?a`
+          ${this.pagination&&a>0?s`
             <div class="pagination-footer">
                 <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                     <div class="pagination-info">
-                        Toplam <strong>${t}</strong> kayıttan <strong>${(this.currentPage-1)*this.pageSize+1} - ${Math.min(this.currentPage*this.pageSize,t)}</strong> arası gösteriliyor
+                        Toplam <strong>${a}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,a)}</strong> arası gösteriliyor
                     </div>
 
                     <div class="page-size-selector">
                         <span>Sayfa başına:</span>
-                        <select class="page-size-select" @change="${this._handlePageSizeChange}">
-                            ${this.pageSizeOptions.map(e=>a`
-                                <option value="${e}" ?selected="${this.pageSize===e}">${e}</option>
+                        <select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
+                            ${n.map(e=>s`
+                                <option value="${e}" ?selected="${i===e}">${e}</option>
                             `)}
                         </select>
                     </div>
@@ -133,8 +133,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                     </kg-button>
 
                     <!-- Page Numbers -->
-                    ${d.map((e,t)=>a`
-                        ${t>0&&e-d[t-1]>1?a`<span class="pagination-info">...</span>`:""}
+                    ${p.map((e,t)=>s`
+                        ${t>0&&e-p[t-1]>1?s`<span class="pagination-info">...</span>`:""}
                         <kg-button 
                             @click="${()=>this._changePage(e)}"
                             color="${this.currentPage===e?"primary":"secondary"}"
@@ -148,7 +148,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
 
                     <!-- Next Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===i}"
+                        ?disabled="${this.currentPage===o}"
                         @click="${()=>this._changePage(this.currentPage+1)}"
                         text
                         color="secondary"
@@ -160,8 +160,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                     
                     <!-- Last Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===i}"
-                        @click="${()=>this._changePage(i)}"
+                        ?disabled="${this.currentPage===o}"
+                        @click="${()=>this._changePage(o)}"
                         text
                         color="secondary"
                         size="medium"
@@ -173,7 +173,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
             </div>
           `:""}
       </div>
-    `}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",r`
+    `}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},rowClassName:{attribute:!1},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",r`
     :host {
       display: block;
       width: 100%;
@@ -272,6 +272,12 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
       background-color: var(--datagrid-selected-bg) !important;
     }
 
+    /* Row status highlights (opt-in via the rowClassName property).
+       Uses !important so it wins over the striped/hover modifiers. */
+    tbody tr.row-danger {
+      background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
+    }
+
     /* Alignment */
     .align-left { text-align: left; }
     .align-center { text-align: center; }

package/dist/react/KgDataGrid.js

@@ -1 +1 @@
-import e,{useState as t,useRef as r,useMemo as n,useEffect as a}from"react";import{createPortal as c}from"react-dom";import{o}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdatagrid as s}from"../components/kg-datagrid.js";"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);const l=o({tagName:"kg-datagrid",elementClass:s,react:e,events:{onSelectionChange:"selection-change",onPageChange:"page-change",onPageSizeChange:"page-size-change",onSort:"sort"}}),d=({columns:o,...s})=>{const[d,i]=t(/* @__PURE__ */new Map),m=r(null),u=r(/* @__PURE__ */new WeakMap),g=r(/* @__PURE__ */new WeakMap),h=n(()=>{if(!o)return[];const t=r=>r.map(r=>{const n={...r};return r.render&&(n.render=t=>{const n=r.render(t);if(!e.isValidElement(n))return n;let a=u.current.get(t);a||(a=/* @__PURE__ */new Map,u.current.set(t,a));let c=a.get(r.field);return c||(c=document.createElement("div"),c.className="kg-react-cell-portal",c.style.display="contents",c.dataset.reactCellId=Math.random().toString(36).substr(2,9),a.set(r.field,c)),c._reactContent=n,c}),r.headerRender&&(n.headerRender=t=>{const n=r.headerRender(t);if(!e.isValidElement(n))return n;let a=g.current.get(r);return a||(a=document.createElement("div"),a.className="kg-react-cell-portal",a.style.display="contents",a.dataset.reactCellId="h-"+Math.random().toString(36).substr(2,9),g.current.set(r,a)),a._reactContent=n,a}),r.children&&r.children.length>0&&(n.children=t(r.children)),n});return t(o)},[o]);return a(()=>{const e=m.current;if(!e)return;const t=e.shadowRoot||e,r=()=>{const e=t.querySelectorAll(".kg-react-cell-portal"),r=/* @__PURE__ */new Map;e.forEach(e=>{e._reactContent&&r.set(e,e._reactContent)}),i(e=>{if(e.size!==r.size)return r;for(const[t,n]of r)if(e.get(t)!==n)return r;return e})},n=new MutationObserver(()=>{r()});return n.observe(t,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),r(),()=>n.disconnect()},[h,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:m,columns:h,...s}),Array.from(d.entries()).map(([e,t])=>c(t,e,e.dataset.reactCellId)))};export{d as KgDataGrid};
+import e,{useState as t,useRef as n,useMemo as r,useEffect as a}from"react";import{createPortal as o}from"react-dom";import{o as c}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdatagrid as s}from"../components/kg-datagrid.js";"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);const l=c({tagName:"kg-datagrid",elementClass:s,react:e,events:{onSelectionChange:"selection-change",onKgSelectionChange:"selection-change",onPageChange:"page-change",onKgPageChange:"page-change",onPageSizeChange:"page-size-change",onKgPageSizeChange:"page-size-change",onSort:"sort",onKgSort:"sort"}}),i=({columns:c,...s})=>{const[i,d]=t(/* @__PURE__ */new Map),g=n(null),m=n(/* @__PURE__ */new WeakMap),u=n(/* @__PURE__ */new WeakMap),h=r(()=>{if(!c)return[];const t=n=>n.map(n=>{const r={...n};return n.render&&(r.render=t=>{const r=n.render(t);if(!e.isValidElement(r))return r;let a=m.current.get(t);a||(a=/* @__PURE__ */new Map,m.current.set(t,a));let o=a.get(n.field);return o||(o=document.createElement("div"),o.className="kg-react-cell-portal",o.style.display="contents",o.dataset.reactCellId=Math.random().toString(36).substr(2,9),a.set(n.field,o)),o._reactContent=r,o}),n.headerRender&&(r.headerRender=t=>{const r=n.headerRender(t);if(!e.isValidElement(r))return r;let a=u.current.get(n);return a||(a=document.createElement("div"),a.className="kg-react-cell-portal",a.style.display="contents",a.dataset.reactCellId="h-"+Math.random().toString(36).substr(2,9),u.current.set(n,a)),a._reactContent=r,a}),n.children&&n.children.length>0&&(r.children=t(n.children)),r});return t(c)},[c]);return a(()=>{const e=g.current;if(!e)return;const t=e.shadowRoot||e,n=()=>{const e=t.querySelectorAll(".kg-react-cell-portal"),n=/* @__PURE__ */new Map;e.forEach(e=>{e._reactContent&&n.set(e,e._reactContent)}),d(e=>{if(e.size!==n.size)return n;for(const[t,r]of n)if(e.get(t)!==r)return n;return e})},r=new MutationObserver(()=>{n()});return r.observe(t,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),n(),()=>r.disconnect()},[h,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:g,columns:h,...s}),Array.from(i.entries()).map(([e,t])=>o(t,e,e.dataset.reactCellId)))};export{i as KgDataGrid};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.9",
+  "version": "0.10.11",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-datagrid.d.ts

@@ -34,6 +34,8 @@ export class kgdatagrid extends LitElement {
   serverSide: boolean;
   /**  */
   currentPage: number;
+  /**  */
+  rowClassName: ((row: any) => string) | null;
 }
 
 declare global {
@@ -60,10 +62,13 @@ declare global {
       total?: number;
       serverSide?: boolean;
       currentPage?: number;
+      rowClassName?: ((row: any) => string) | null;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onKgPageChange?: (e: any) => void;
       onPageSizeChange?: (e: any) => void;
+      onKgPageSizeChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -206,10 +206,13 @@ declare global {
       total?: number;
       serverSide?: boolean;
       currentPage?: number;
+      rowClassName?: ((row: any) => string) | null;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onKgPageChange?: (e: any) => void;
       onPageSizeChange?: (e: any) => void;
+      onKgPageSizeChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-datepicker': {