@nuralyui/table 0.0.6 → 0.0.8

package/table.style.js

@@ -57,6 +57,33 @@ export default css `
     color: var(--nuraly-table-background, #ffffff);
   }
 
+  /* Fixed Header Styles */
+  .table-content-wrapper.fixed-header {
+    overflow-y: auto;
+    overflow-x: auto;
+  }
+
+  .table-content-wrapper.fixed-header table {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .table-content-wrapper.fixed-header thead {
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  .table-content-wrapper.fixed-header thead th {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  .table-content-wrapper.fixed-header thead tr {
+    box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
   .actions-container button {
     cursor: pointer;
     border: none;
@@ -120,19 +147,19 @@ export default css `
     --nuraly-icon-color: var(--nuraly-table-text-color);
   }
 
-  tr {
+  tbody tr {
     background-color: var(--nuraly-table-row-background, #ffffff);
   }
 
-  tr:hover {
+  tbody tr:hover {
     background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
   }
 
-  tr:first-child {
+  thead tr {
     background-color: var(--nuraly-table-header-background, #fafafa);
   }
 
-  tr:has(:not(th) > input:checked) {
+  tbody tr:has(input:checked) {
     background-color: var(--nuraly-table-row-selected-background, #e6f7ff);
   }
 
@@ -157,13 +184,14 @@ export default css `
   .pagination-container {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     background-color: var(--nuraly-pagination-background-color);
     color: var(--nuraly-pagination-text-color);
   }
 
   .pagination-container .left-content {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
   }
 
   .pagination-container .left-content .items-details {
@@ -184,8 +212,9 @@ export default css `
     white-space: nowrap;
   }
 
-  .pagination-container .left-content .select-details hy-select {
-    min-width: 80px;
+  .pagination-container .left-content .select-details nr-select {
+    min-width: 60px;
+    max-width: 80px;
     --select-border-color: var(--nuraly-table-border-color, #d9d9d9);
     --select-background: var(--nuraly-table-pagination-background, #fafafa);
     --select-text-color: var(--nuraly-table-pagination-text, #000000);
@@ -193,13 +222,13 @@ export default css `
 
   .pagination-container .right-content {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
     border-left: var(--nuraly-pagination-borders);
   }
 
   .pagination-container .right-content .icon-container {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
     border-left: var(--nuraly-pagination-borders);
   }
 
@@ -261,5 +290,399 @@ export default css `
   .pagination-container[data-size='large'] .icon-container .right-arrow {
     padding: 15px;
   }
+
+  /* Column Filter Styles */
+  th .th-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    position: relative;
+  }
+
+  th .th-text {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex: 1;
+  }
+
+  th .filter-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-trigger {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+  }
+
+  .filter-trigger:hover {
+    background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));
+  }
+
+  .filter-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .filter-icon.has-filter {
+    color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  .filter-indicator {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  .column-filter-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    background: var(--nuraly-table-background, #ffffff);
+    border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    min-width: 200px;
+    padding: 8px;
+  }
+
+  .column-filter-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .column-filter-input {
+    padding: 8px;
+    border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);
+    border-radius: 4px;
+    font-size: 14px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .column-filter-input:focus {
+    outline: none;
+    border-color: var(--nuraly-table-filter-active, #1890ff);
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+
+  .column-filter-clear {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--nuraly-table-text-color, #000);
+    align-self: flex-end;
+  }
+
+  .column-filter-clear:hover {
+    color: var(--nuraly-table-filter-active, #1890ff);
+  }
+
+  /* Fixed Columns Styles */
+  th.fixed-column,
+  td.fixed-column {
+    position: sticky;
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  /* Fixed columns in header - highest priority */
+  thead th.fixed-column {
+    z-index: 20;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  /* When table has fixed header, fixed columns in header need even higher z-index */
+  .table-content-wrapper.fixed-header thead th.fixed-column {
+    z-index: 25;
+    background-color: var(--nuraly-table-header-background, #fafafa);
+  }
+
+  /* Fixed columns in body */
+  tbody td.fixed-column {
+    z-index: 8;
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  /* Ensure fixed columns in tbody have proper background */
+  tbody tr td.fixed-column {
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  tbody tr:hover td.fixed-column {
+    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);
+  }
+
+  th.fixed-column-left,
+  td.fixed-column-left {
+    left: 0;
+    border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  th.fixed-column-right,
+  td.fixed-column-right {
+    right: 0;
+    border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);
+  }
+
+  /* Shadow effect for fixed columns */
+  th.fixed-column-left::after,
+  td.fixed-column-left::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    width: 10px;
+    pointer-events: none;
+    transition: box-shadow 0.3s;
+    box-shadow: none;
+  }
+
+  .table-content-wrapper.has-scroll th.fixed-column-left::after,
+  .table-content-wrapper.has-scroll td.fixed-column-left::after {
+    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  }
+
+  th.fixed-column-right::before,
+  td.fixed-column-right::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -10px;
+    bottom: 0;
+    width: 10px;
+    pointer-events: none;
+    transition: box-shadow 0.3s;
+    box-shadow: none;
+  }
+
+  .table-content-wrapper.has-scroll th.fixed-column-right::before,
+  .table-content-wrapper.has-scroll td.fixed-column-right::before {
+    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  }
+
+  /* ============================================ */
+  /* Loading State Styles */
+  /* ============================================ */
+  
+  /* Skeleton Loading Rows */
+  .skeleton-row {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+  }
+
+  .skeleton-cell {
+    padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .skeleton-cell.selection-skeleton {
+    width: 48px;
+    text-align: center;
+  }
+
+  .skeleton-checkbox {
+    width: 16px;
+    height: 16px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: 2px;
+    margin: 0 auto;
+  }
+
+  .skeleton-content {
+    height: 16px;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: 4px;
+    width: 80%;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes skeleton-pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+
+  /* Spinner Loading */
+  .loading-row {
+    background-color: var(--nuraly-table-row-background, #ffffff);
+  }
+
+  .loading-cell {
+    padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);
+    text-align: center;
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .loading-spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nuraly-spacing-4, 1rem);
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid var(--nuraly-table-border-color, #f0f0f0);
+    border-top-color: var(--nuraly-color-primary, #1890ff);
+    border-radius: 50%;
+    animation: spinner-rotate 0.8s linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    margin: 0;
+    color: var(--nuraly-color-text-secondary, #666666);
+    font-size: 14px;
+  }
+
+  /* Empty State Styles */
+  .empty-row {
+    background: var(--nuraly-table-row-bg-color, #ffffff);
+  }
+
+  .empty-row:hover {
+    background: var(--nuraly-table-row-bg-color, #ffffff);
+  }
+
+  .empty-cell {
+    padding: 64px 24px;
+    text-align: center;
+    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    color: var(--nuraly-color-text-quaternary, #bfbfbf);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .empty-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .empty-icon nr-icon {
+    font-size: 64px;
+  }
+
+  .empty-text {
+    margin: 0;
+    color: var(--nuraly-color-text-secondary, #666666);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  /* Expansion Row Styles */
+  .expand-icon {
+    text-align: center;
+    vertical-align: middle;
+    transition: transform 0.3s ease;
+    outline: none;
+  }
+
+  .expand-icon:hover {
+    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
+  }
+
+  .expand-icon:focus {
+    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);
+    box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);
+  }
+
+  .expand-icon nr-icon {
+    transition: transform 0.3s ease;
+  }
+
+  .expand-icon.expanded nr-icon {
+    transform: rotate(180deg);
+  }
+
+  .expansion-row {
+    transition: all 0.3s ease;
+  }
+
+  .expansion-row.collapsed {
+    opacity: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .expansion-row.expanded {
+    opacity: 1;
+    animation: slideDown 0.3s ease;
+  }
+
+  .expansion-content {
+    padding: 16px;
+    background-color: var(--nuraly-color-fill-quaternary, #fafafa);
+    border-top: 1px solid var(--nuraly-color-border, #d9d9d9);
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 `;
 //# sourceMappingURL=table.style.js.map

package/table.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    width: 100%;\n    font-family: var(--nuraly-font-family, Arial, sans-serif);\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n  }\n\n  /* Filter Container Styles */\n  .filter-container {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n    padding: var(--nuraly-spacing-2, 0.5rem) 0;\n    position: relative;\n    margin-bottom: 5px;\n  }\n\n  .filter-container input {\n    padding: 5px;\n    padding-left: 30px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--nuraly-table-filter-background, #ffffff);\n    color: var(--nuraly-table-filter-text, #000000);\n  }\n\n  .filter-container input:focus {\n    outline-style: none;\n    border: 1px solid var(--nuraly-table-filter-border, #1890ff);\n  }\n\n  .filter-container .icon-container {\n    height: 25px;\n    width: 35px;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .filter-container .search-icon {\n    position: absolute;\n    left: 10px;\n    top: 25%;\n  }\n\n  /* Actions Bar Styles */\n  .actions-container {\n    background-color: var(--nuraly-table-action-color, #0f62fe);\n    padding: 10px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    color: var(--nuraly-table-background, #ffffff);\n  }\n\n  .actions-container button {\n    cursor: pointer;\n    border: none;\n    color: var(--nuraly-table-background, #ffffff);\n    background-color: var(--nuraly-table-action-color, #0f62fe);\n  }\n\n  .actions-container[data-size='small'] {\n    padding: 5px;\n  }\n\n  .actions-container[data-size='large'] {\n    padding: 15px;\n  }\n\n  /* Table Content Wrapper Styles */\n  .table-content-wrapper {\n    display: block;\n    overflow: auto;\n  }\n\n  input[type='checkbox'][data-indeterminate='true']::after {\n    width: 13px;\n    height: 13px;\n    background-color: var(--nuraly-table-checkbox-checked, #161616);\n    color: var(--nuraly-table-background, #ffffff);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    content: '-';\n  }\n\n  /* Table Styles */\n  table {\n    width: 100%;\n    border-spacing: 0px;\n    color: var(--nuraly-table-text-color);\n  }\n\n  td {\n    text-align: center;\n    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n    padding: 10px;\n  }\n\n  th {\n    cursor: pointer;\n    padding: 10px;\n  }\n\n  th span {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n  }\n\n  nr-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    --nuraly-icon-color: var(--nuraly-table-text-color);\n  }\n\n  tr {\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  tr:hover {\n    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n  }\n\n  tr:first-child {\n    background-color: var(--nuraly-table-header-background, #fafafa);\n  }\n\n  tr:has(:not(th) > input:checked) {\n    background-color: var(--nuraly-table-row-selected-background, #e6f7ff);\n  }\n\n  input,\n  .expand-icon {\n    cursor: pointer;\n    accent-color: var(--nuraly-table-checkbox-checked, #1890ff);\n  }\n\n  /* Size Variants for Table Content */\n  :host([size='small']) td,\n  :host([size='small']) th {\n    padding: 5px;\n  }\n\n  :host([size='large']) td,\n  :host([size='large']) th {\n    padding: 15px;\n  }\n\n  /* Pagination Styles */\n  .pagination-container {\n    display: flex;\n    justify-content: space-between;\n    background-color: var(--nuraly-pagination-background-color);\n    color: var(--nuraly-pagination-text-color);\n  }\n\n  .pagination-container .left-content {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .pagination-container .left-content .items-details {\n    border-left: var(--nuraly-pagination-borders);\n    padding: 10px;\n  }\n\n  .pagination-container .left-content .select-details {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px;\n  }\n\n  .pagination-container .left-content .select-details label {\n    font-size: var(--nuraly-font-size-input, 14px);\n    color: var(--nuraly-table-pagination-text, #000000);\n    white-space: nowrap;\n  }\n\n  .pagination-container .left-content .select-details hy-select {\n    min-width: 80px;\n    --select-border-color: var(--nuraly-table-border-color, #d9d9d9);\n    --select-background: var(--nuraly-table-pagination-background, #fafafa);\n    --select-text-color: var(--nuraly-table-pagination-text, #000000);\n  }\n\n  .pagination-container .right-content {\n    display: flex;\n    justify-content: space-between;\n    border-left: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container .right-content .icon-container {\n    display: flex;\n    justify-content: space-between;\n    border-left: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container .right-content .page-details {\n    padding: 10px;\n  }\n\n  .pagination-container .icon-container .left-arrow,\n  .pagination-container .icon-container .right-arrow {\n    padding: 10px;\n    --nuraly-icon-color: var(--nuraly-pagination-text-color);\n  }\n\n  .pagination-container .icon-container .left-arrow {\n    border-right: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container nr-icon[data-enabled='false'] {\n    cursor: not-allowed;\n  }\n\n  .pagination-container nr-icon[data-enabled='true'] {\n    cursor: pointer;\n  }\n\n  /* Size Variants for Pagination */\n  .pagination-container[data-size='small'] .left-content .items-details {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .left-content .items-details {\n    padding: 15px;\n  }\n\n  .pagination-container[data-size='small'] .left-content .select-details {\n    padding: 5px;\n    gap: 6px;\n  }\n\n  .pagination-container[data-size='large'] .left-content .select-details {\n    padding: 15px;\n    gap: 10px;\n  }\n\n  .pagination-container[data-size='small'] .right-content .page-details {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .right-content .page-details {\n    padding: 15px;\n  }\n\n  .pagination-container[data-size='small'] .icon-container .left-arrow,\n  .pagination-container[data-size='small'] .icon-container .right-arrow {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .icon-container .left-arrow,\n  .pagination-container[data-size='large'] .icon-container .right-arrow {\n    padding: 15px;\n  }\n`;\n"]}
+{"version":3,"file":"table.style.js","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6qBjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    width: 100%;\n    font-family: var(--nuraly-font-family, Arial, sans-serif);\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n  }\n\n  /* Filter Container Styles */\n  .filter-container {\n    display: flex;\n    justify-content: flex-end;\n    width: 100%;\n    padding: var(--nuraly-spacing-2, 0.5rem) 0;\n    position: relative;\n    margin-bottom: 5px;\n  }\n\n  .filter-container input {\n    padding: 5px;\n    padding-left: 30px;\n    width: 100%;\n    box-sizing: border-box;\n    background-color: var(--nuraly-table-filter-background, #ffffff);\n    color: var(--nuraly-table-filter-text, #000000);\n  }\n\n  .filter-container input:focus {\n    outline-style: none;\n    border: 1px solid var(--nuraly-table-filter-border, #1890ff);\n  }\n\n  .filter-container .icon-container {\n    height: 25px;\n    width: 35px;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .filter-container .search-icon {\n    position: absolute;\n    left: 10px;\n    top: 25%;\n  }\n\n  /* Actions Bar Styles */\n  .actions-container {\n    background-color: var(--nuraly-table-action-color, #0f62fe);\n    padding: 10px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: space-between;\n    color: var(--nuraly-table-background, #ffffff);\n  }\n\n  /* Fixed Header Styles */\n  .table-content-wrapper.fixed-header {\n    overflow-y: auto;\n    overflow-x: auto;\n  }\n\n  .table-content-wrapper.fixed-header table {\n    border-collapse: separate;\n    border-spacing: 0;\n  }\n\n  .table-content-wrapper.fixed-header thead {\n    background-color: var(--nuraly-table-header-background, #fafafa);\n  }\n\n  .table-content-wrapper.fixed-header thead th {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--nuraly-table-header-background, #fafafa);\n    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n  }\n\n  .table-content-wrapper.fixed-header thead tr {\n    box-shadow: 0 1px 0 0 var(--nuraly-table-row-border-color, #f0f0f0);\n  }\n\n  .actions-container button {\n    cursor: pointer;\n    border: none;\n    color: var(--nuraly-table-background, #ffffff);\n    background-color: var(--nuraly-table-action-color, #0f62fe);\n  }\n\n  .actions-container[data-size='small'] {\n    padding: 5px;\n  }\n\n  .actions-container[data-size='large'] {\n    padding: 15px;\n  }\n\n  /* Table Content Wrapper Styles */\n  .table-content-wrapper {\n    display: block;\n    overflow: auto;\n  }\n\n  input[type='checkbox'][data-indeterminate='true']::after {\n    width: 13px;\n    height: 13px;\n    background-color: var(--nuraly-table-checkbox-checked, #161616);\n    color: var(--nuraly-table-background, #ffffff);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    content: '-';\n  }\n\n  /* Table Styles */\n  table {\n    width: 100%;\n    border-spacing: 0px;\n    color: var(--nuraly-table-text-color);\n  }\n\n  td {\n    text-align: center;\n    border-bottom: var(--nuraly-table-border-width, 1px) solid var(--nuraly-table-row-border-color, #f0f0f0);\n    padding: 10px;\n  }\n\n  th {\n    cursor: pointer;\n    padding: 10px;\n  }\n\n  th span {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n  }\n\n  nr-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    --nuraly-icon-color: var(--nuraly-table-text-color);\n  }\n\n  tbody tr {\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  tbody tr:hover {\n    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n  }\n\n  thead tr {\n    background-color: var(--nuraly-table-header-background, #fafafa);\n  }\n\n  tbody tr:has(input:checked) {\n    background-color: var(--nuraly-table-row-selected-background, #e6f7ff);\n  }\n\n  input,\n  .expand-icon {\n    cursor: pointer;\n    accent-color: var(--nuraly-table-checkbox-checked, #1890ff);\n  }\n\n  /* Size Variants for Table Content */\n  :host([size='small']) td,\n  :host([size='small']) th {\n    padding: 5px;\n  }\n\n  :host([size='large']) td,\n  :host([size='large']) th {\n    padding: 15px;\n  }\n\n  /* Pagination Styles */\n  .pagination-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: var(--nuraly-pagination-background-color);\n    color: var(--nuraly-pagination-text-color);\n  }\n\n  .pagination-container .left-content {\n    display: flex;\n    align-items: center;\n  }\n\n  .pagination-container .left-content .items-details {\n    border-left: var(--nuraly-pagination-borders);\n    padding: 10px;\n  }\n\n  .pagination-container .left-content .select-details {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px;\n  }\n\n  .pagination-container .left-content .select-details label {\n    font-size: var(--nuraly-font-size-input, 14px);\n    color: var(--nuraly-table-pagination-text, #000000);\n    white-space: nowrap;\n  }\n\n  .pagination-container .left-content .select-details nr-select {\n    min-width: 60px;\n    max-width: 80px;\n    --select-border-color: var(--nuraly-table-border-color, #d9d9d9);\n    --select-background: var(--nuraly-table-pagination-background, #fafafa);\n    --select-text-color: var(--nuraly-table-pagination-text, #000000);\n  }\n\n  .pagination-container .right-content {\n    display: flex;\n    align-items: center;\n    border-left: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container .right-content .icon-container {\n    display: flex;\n    align-items: center;\n    border-left: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container .right-content .page-details {\n    padding: 10px;\n  }\n\n  .pagination-container .icon-container .left-arrow,\n  .pagination-container .icon-container .right-arrow {\n    padding: 10px;\n    --nuraly-icon-color: var(--nuraly-pagination-text-color);\n  }\n\n  .pagination-container .icon-container .left-arrow {\n    border-right: var(--nuraly-pagination-borders);\n  }\n\n  .pagination-container nr-icon[data-enabled='false'] {\n    cursor: not-allowed;\n  }\n\n  .pagination-container nr-icon[data-enabled='true'] {\n    cursor: pointer;\n  }\n\n  /* Size Variants for Pagination */\n  .pagination-container[data-size='small'] .left-content .items-details {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .left-content .items-details {\n    padding: 15px;\n  }\n\n  .pagination-container[data-size='small'] .left-content .select-details {\n    padding: 5px;\n    gap: 6px;\n  }\n\n  .pagination-container[data-size='large'] .left-content .select-details {\n    padding: 15px;\n    gap: 10px;\n  }\n\n  .pagination-container[data-size='small'] .right-content .page-details {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .right-content .page-details {\n    padding: 15px;\n  }\n\n  .pagination-container[data-size='small'] .icon-container .left-arrow,\n  .pagination-container[data-size='small'] .icon-container .right-arrow {\n    padding: 5px;\n  }\n\n  .pagination-container[data-size='large'] .icon-container .left-arrow,\n  .pagination-container[data-size='large'] .icon-container .right-arrow {\n    padding: 15px;\n  }\n\n  /* Column Filter Styles */\n  th .th-content {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    position: relative;\n  }\n\n  th .th-text {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex: 1;\n  }\n\n  th .filter-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  .filter-trigger {\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    transition: background-color 0.2s;\n  }\n\n  .filter-trigger:hover {\n    background-color: var(--nuraly-table-filter-hover, rgba(0, 0, 0, 0.04));\n  }\n\n  .filter-icon {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .filter-icon.has-filter {\n    color: var(--nuraly-table-filter-active, #1890ff);\n  }\n\n  .filter-indicator {\n    position: absolute;\n    top: -2px;\n    right: -2px;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: var(--nuraly-table-filter-active, #1890ff);\n  }\n\n  .column-filter-dropdown {\n    position: absolute;\n    top: calc(100% + 4px);\n    right: 0;\n    background: var(--nuraly-table-background, #ffffff);\n    border: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n    border-radius: 4px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n    z-index: 100;\n    min-width: 200px;\n    padding: 8px;\n  }\n\n  .column-filter-content {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .column-filter-input {\n    padding: 8px;\n    border: 1px solid var(--nuraly-table-row-border-color, #d9d9d9);\n    border-radius: 4px;\n    font-size: 14px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .column-filter-input:focus {\n    outline: none;\n    border-color: var(--nuraly-table-filter-active, #1890ff);\n    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n  }\n\n  .column-filter-clear {\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    padding: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--nuraly-table-text-color, #000);\n    align-self: flex-end;\n  }\n\n  .column-filter-clear:hover {\n    color: var(--nuraly-table-filter-active, #1890ff);\n  }\n\n  /* Fixed Columns Styles */\n  th.fixed-column,\n  td.fixed-column {\n    position: sticky;\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  /* Fixed columns in header - highest priority */\n  thead th.fixed-column {\n    z-index: 20;\n    background-color: var(--nuraly-table-header-background, #fafafa);\n  }\n\n  /* When table has fixed header, fixed columns in header need even higher z-index */\n  .table-content-wrapper.fixed-header thead th.fixed-column {\n    z-index: 25;\n    background-color: var(--nuraly-table-header-background, #fafafa);\n  }\n\n  /* Fixed columns in body */\n  tbody td.fixed-column {\n    z-index: 8;\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  /* Ensure fixed columns in tbody have proper background */\n  tbody tr td.fixed-column {\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  tbody tr:hover td.fixed-column {\n    background-color: var(--nuraly-table-row-hover-background, #f5f5f5);\n  }\n\n  th.fixed-column-left,\n  td.fixed-column-left {\n    left: 0;\n    border-right: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n  }\n\n  th.fixed-column-right,\n  td.fixed-column-right {\n    right: 0;\n    border-left: 1px solid var(--nuraly-table-row-border-color, #f0f0f0);\n  }\n\n  /* Shadow effect for fixed columns */\n  th.fixed-column-left::after,\n  td.fixed-column-left::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: -10px;\n    bottom: 0;\n    width: 10px;\n    pointer-events: none;\n    transition: box-shadow 0.3s;\n    box-shadow: none;\n  }\n\n  .table-content-wrapper.has-scroll th.fixed-column-left::after,\n  .table-content-wrapper.has-scroll td.fixed-column-left::after {\n    box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);\n  }\n\n  th.fixed-column-right::before,\n  td.fixed-column-right::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -10px;\n    bottom: 0;\n    width: 10px;\n    pointer-events: none;\n    transition: box-shadow 0.3s;\n    box-shadow: none;\n  }\n\n  .table-content-wrapper.has-scroll th.fixed-column-right::before,\n  .table-content-wrapper.has-scroll td.fixed-column-right::before {\n    box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);\n  }\n\n  /* ============================================ */\n  /* Loading State Styles */\n  /* ============================================ */\n  \n  /* Skeleton Loading Rows */\n  .skeleton-row {\n    animation: skeleton-pulse 1.5s ease-in-out infinite;\n  }\n\n  .skeleton-cell {\n    padding: var(--nuraly-spacing-3, 0.75rem) var(--nuraly-spacing-4, 1rem);\n    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n  }\n\n  .skeleton-cell.selection-skeleton {\n    width: 48px;\n    text-align: center;\n  }\n\n  .skeleton-checkbox {\n    width: 16px;\n    height: 16px;\n    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n    background-size: 200% 100%;\n    animation: skeleton-shimmer 1.5s ease-in-out infinite;\n    border-radius: 2px;\n    margin: 0 auto;\n  }\n\n  .skeleton-content {\n    height: 16px;\n    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n    background-size: 200% 100%;\n    animation: skeleton-shimmer 1.5s ease-in-out infinite;\n    border-radius: 4px;\n    width: 80%;\n  }\n\n  @keyframes skeleton-shimmer {\n    0% {\n      background-position: 200% 0;\n    }\n    100% {\n      background-position: -200% 0;\n    }\n  }\n\n  @keyframes skeleton-pulse {\n    0%, 100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.6;\n    }\n  }\n\n  /* Spinner Loading */\n  .loading-row {\n    background-color: var(--nuraly-table-row-background, #ffffff);\n  }\n\n  .loading-cell {\n    padding: var(--nuraly-spacing-8, 2rem) var(--nuraly-spacing-4, 1rem);\n    text-align: center;\n    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n  }\n\n  .loading-spinner-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--nuraly-spacing-4, 1rem);\n  }\n\n  .loading-spinner {\n    width: 40px;\n    height: 40px;\n    border: 4px solid var(--nuraly-table-border-color, #f0f0f0);\n    border-top-color: var(--nuraly-color-primary, #1890ff);\n    border-radius: 50%;\n    animation: spinner-rotate 0.8s linear infinite;\n  }\n\n  @keyframes spinner-rotate {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .loading-text {\n    margin: 0;\n    color: var(--nuraly-color-text-secondary, #666666);\n    font-size: 14px;\n  }\n\n  /* Empty State Styles */\n  .empty-row {\n    background: var(--nuraly-table-row-bg-color, #ffffff);\n  }\n\n  .empty-row:hover {\n    background: var(--nuraly-table-row-bg-color, #ffffff);\n  }\n\n  .empty-cell {\n    padding: 64px 24px;\n    text-align: center;\n    border-bottom: 1px solid var(--nuraly-table-border-color, #f0f0f0);\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .empty-icon {\n    width: 64px;\n    height: 64px;\n    color: var(--nuraly-color-text-quaternary, #bfbfbf);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .empty-icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .empty-icon nr-icon {\n    font-size: 64px;\n  }\n\n  .empty-text {\n    margin: 0;\n    color: var(--nuraly-color-text-secondary, #666666);\n    font-size: 14px;\n    line-height: 1.5;\n  }\n\n  /* Expansion Row Styles */\n  .expand-icon {\n    text-align: center;\n    vertical-align: middle;\n    transition: transform 0.3s ease;\n    outline: none;\n  }\n\n  .expand-icon:hover {\n    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n  }\n\n  .expand-icon:focus {\n    background-color: var(--nuraly-color-fill-tertiary, #f5f5f5);\n    box-shadow: inset 0 0 0 2px var(--nuraly-color-primary, #1890ff);\n  }\n\n  .expand-icon nr-icon {\n    transition: transform 0.3s ease;\n  }\n\n  .expand-icon.expanded nr-icon {\n    transform: rotate(180deg);\n  }\n\n  .expansion-row {\n    transition: all 0.3s ease;\n  }\n\n  .expansion-row.collapsed {\n    opacity: 0;\n    height: 0;\n    overflow: hidden;\n  }\n\n  .expansion-row.expanded {\n    opacity: 1;\n    animation: slideDown 0.3s ease;\n  }\n\n  .expansion-content {\n    padding: 16px;\n    background-color: var(--nuraly-color-fill-quaternary, #fafafa);\n    border-top: 1px solid var(--nuraly-color-border, #d9d9d9);\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n`;\n\n"]}

package/table.types.d.ts

@@ -1,9 +1,40 @@
+/**
+ * Column filter types
+ */
+export declare const enum FilterType {
+    Text = "text",
+    Select = "select",
+    Number = "number",
+    Date = "date"
+}
+/**
+ * Column filter configuration
+ */
+export interface ColumnFilter {
+    type: FilterType;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+}
+/**
+ * Active filter state for a column
+ */
+export interface ActiveColumnFilter {
+    columnKey: string;
+    value: string | number | null;
+}
 /**
  * Table header configuration
  */
 export interface IHeader {
     name: string;
     key: string;
+    filterable?: boolean;
+    filterConfig?: ColumnFilter;
+    fixed?: 'left' | 'right';
+    width?: number | string;
 }
 /**
  * Selection mode for table rows
@@ -43,5 +74,12 @@ export interface SortAttribute {
     index: number;
     order: SortOrder;
 }
+/**
+ * Expansion content render function
+ * @param row - The row data
+ * @param index - The row index
+ * @returns Template result for the expanded content
+ */
+export declare type ExpansionContentRenderer = (row: any, index: number) => any;
 export declare const EMPTY_STRING = "";
 //# sourceMappingURL=table.types.d.ts.map

package/table.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"AAmDA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Table header configuration\n */\nexport interface IHeader {\n  name: string;\n  key: string;\n}\n\n/**\n * Selection mode for table rows\n */\nexport const enum SelectionMode {\n  Single = 'single',\n  Multiple = 'multiple',\n}\n\n/**\n * Table size variants\n */\nexport const enum Sizes {\n  Small = 'small',\n  Normal = 'normal',\n  Large = 'large',\n}\n\n/**\n * Sort order states\n */\nexport const enum SortOrder {\n  Default = 'default',\n  Ascending = 'ascending',\n  Descending = 'descending',\n}\n\n/**\n * Sort direction values\n */\nexport const enum SortValue {\n  Default = 0,\n  Ascending = 1,\n  Descending = -1,\n}\n\n/**\n * Sort attribute configuration\n */\nexport interface SortAttribute {\n  index: number;\n  order: SortOrder;\n}\n\nexport const EMPTY_STRING = '';\n"]}
+{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"AA0FA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Column filter types\n */\nexport const enum FilterType {\n  Text = 'text',\n  Select = 'select',\n  Number = 'number',\n  Date = 'date',\n}\n\n/**\n * Column filter configuration\n */\nexport interface ColumnFilter {\n  type: FilterType;\n  placeholder?: string;\n  options?: Array<{ label: string; value: string | number }>;\n}\n\n/**\n * Active filter state for a column\n */\nexport interface ActiveColumnFilter {\n  columnKey: string;\n  value: string | number | null;\n}\n\n/**\n * Table header configuration\n */\nexport interface IHeader {\n  name: string;\n  key: string;\n  filterable?: boolean;\n  filterConfig?: ColumnFilter;\n  fixed?: 'left' | 'right';\n  width?: number | string;\n}\n\n/**\n * Selection mode for table rows\n */\nexport const enum SelectionMode {\n  Single = 'single',\n  Multiple = 'multiple',\n}\n\n/**\n * Table size variants\n */\nexport const enum Sizes {\n  Small = 'small',\n  Normal = 'normal',\n  Large = 'large',\n}\n\n/**\n * Sort order states\n */\nexport const enum SortOrder {\n  Default = 'default',\n  Ascending = 'ascending',\n  Descending = 'descending',\n}\n\n/**\n * Sort direction values\n */\nexport const enum SortValue {\n  Default = 0,\n  Ascending = 1,\n  Descending = -1,\n}\n\n/**\n * Sort attribute configuration\n */\nexport interface SortAttribute {\n  index: number;\n  order: SortOrder;\n}\n\n/**\n * Expansion content render function\n * @param row - The row data\n * @param index - The row index\n * @returns Template result for the expanded content\n */\nexport type ExpansionContentRenderer = (row: any, index: number) => any;\n\nexport const EMPTY_STRING = '';\n"]}