kelt-ui-kit-react 2.0.8 → 2.1.0

package/src/dataTable/dataTable.css

@@ -1,208 +1,333 @@
-.data-table-footer-action {
-  position: fixed;
-  left: 5px;
-  right: 5px;
-  bottom: 5px;
-  border-radius: 4px;
-  z-index: 1000;
-  overflow: hidden;
-  background: #fff;
-  border-top: 1px solid #e5e5e5;
-  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
-  animation: data-table-footer-action-enter 180ms ease-out;
-
-  & .data-table-footer-action__content {
-    position: relative;
-    padding: 0.75rem 1rem;
-  }
-
-  & .data-table-footer-action__close {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    cursor: pointer;
-
-    .bi {
-      color: #333;
-    }
-  }
-}
-
-
-
-
-@keyframes data-table-footer-action-enter {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.data-table-container {
-  overflow: auto;
-  position: relative;
-
-  .data-table-mobile-cards {
-    display: grid;
-    gap: 0.75rem;
-
-    .data-table-mobile-card {
-      width: 100%;
-      max-width: none;
-      height: auto;
-      padding: 0;
-      border-radius: 8px;
-    }
-
-    .data-table-mobile-card__content {
-      width: 100%;
-      min-width: 0;
-    }
-
-    .data-table-mobile-card__field {
-      display: grid;
-      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
-      gap: 0.75rem;
-      align-items: center;
-      padding: 0.625rem 0.75rem;
-      border-bottom: 1px solid #e5e5e5;
-    }
-
-    .data-table-mobile-card__label {
-      color: var(--tertiary-color);
-      font-size: 0.875rem;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-
-    .data-table-mobile-card__actions {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-      justify-content: flex-end;
-      padding: 0.75rem;
-    }
-
-    .data-table-mobile-cards__empty {
-      padding: 1rem;
-      text-align: center;
-      color: #666;
-    }
-  }
-
-  &.data-table-container--with-footer-action {
-    scroll-padding-bottom: 80px;
-  }
-
-  .data-table {
-    width: 100%;
-    border-spacing: 0;
-    font-size: 16px;
-    color: #333;
-
-    .select-cell {
-      min-width: 40px !important;
-
-      .input-container {
-        min-width: 20px;
-
-        input {
-          min-width: 20px;
-          width: 20px;
-          cursor: pointer;
-        }
-      }
-    }
-
-
-    thead {
-      margin-bottom: 1rem;
-      position: sticky;
-      top: 0;
-      z-index: 1;
-      background-color: #fff;
-
-      th {
-        position: sticky;
-        top: 0;
-        z-index: 2;
-        background-color: #fff;
-        color: var(--tertiary-color);
-        min-width: 100px;
-        padding: .5rem;
-      }
-    }
-
-    tbody {
-      td {
-        padding: 0.5rem;
-
-        &:not(:first-child) {
-          padding-left: 0 !important;
-        }
-      }
-
-      tr.even {
-        background-color: #ffffff;
-      }
-
-      tr.odd {
-        background-color: #f5f5f5;
-      }
-
-      .data-table-input-number-wrapper {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-
-        button.data-table-step-btn {
-          min-width: 28px !important;
-          width: 28px !important;
-          height: 28px !important;
-          max-height: 28px !important;
-          padding: 0 !important;
-          display: inline-flex !important;
-          align-items: center !important;
-          justify-content: center !important;
-          border-radius: 4px;
-          border: 1px solid #dcdcdc;
-          background-color: #f8f9fa;
-          color: #333;
-          font-size: 16px;
-          line-height: 1;
-          cursor: pointer;
-          transition: background-color 0.15s, border-color 0.15s;
-
-          &:hover:not(:disabled) {
-            background-color: #e9ecef;
-            border-color: #adb5bd;
-          }
-
-          &:active:not(:disabled) {
-            background-color: #dee2e6;
-          }
-
-          &:disabled {
-            opacity: 0.4;
-            cursor: not-allowed;
-            background-color: #f8f9fa;
-          }
-
-          .bi {
-            font-size: 13px;
-            line-height: 1;
-          }
-        }
-
-        input {
-          margin: 0;
-        }
-      }
-    }
-  }
-}
+.data-table-footer-action {
+  position: fixed;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 4px;
+  z-index: 1000;
+  overflow: hidden;
+  background: #fff;
+  border-top: 1px solid #e5e5e5;
+  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
+  animation: data-table-footer-action-enter 180ms ease-out;
+
+  & .data-table-footer-action__content {
+    position: relative;
+    padding: 0.75rem 1rem;
+  }
+
+  & .data-table-footer-action__close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    cursor: pointer;
+
+    .bi {
+      color: #333;
+    }
+  }
+}
+
+
+
+
+@keyframes data-table-footer-action-enter {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.data-table-container {
+  overflow: auto;
+  position: relative;
+
+  .data-table-mobile-cards {
+    display: grid;
+    gap: 0.75rem;
+
+    .data-table-mobile-card {
+      width: 100%;
+      max-width: none;
+      height: auto;
+      padding: 0;
+      border-radius: 8px;
+    }
+
+    .data-table-mobile-card__content {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .data-table-mobile-card__field {
+      display: grid;
+      grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
+      gap: 0.75rem;
+      align-items: center;
+      padding: 0.625rem 0.75rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    .data-table-mobile-card__label {
+      color: var(--tertiary-color);
+      font-size: 0.875rem;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+    }
+
+    .data-table-mobile-card__actions {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0.75rem;
+    }
+
+    .data-table-mobile-cards__empty {
+      padding: 1rem;
+      text-align: center;
+      color: #666;
+    }
+  }
+
+  &.data-table-container--with-footer-action {
+    scroll-padding-bottom: 80px;
+  }
+
+  .data-table {
+    width: 100%;
+    border-spacing: 0;
+    font-size: 16px;
+    color: #333;
+
+    .select-cell {
+      min-width: 40px !important;
+
+      .input-container {
+        min-width: 20px;
+
+        input {
+          min-width: 20px;
+          width: 20px;
+          cursor: pointer;
+        }
+      }
+    }
+
+
+    thead {
+      margin-bottom: 1rem;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background-color: #fff;
+
+      th {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: #fff;
+        color: var(--tertiary-color);
+        min-width: 100px;
+        padding: .5rem;
+
+        .data-table-column-filter,
+        .data-table-column-sort {
+          visibility: hidden;
+
+          &.active {
+            visibility: visible;
+          }
+        }
+
+        .data-table-column-filter-active,
+        .data-table-column-sort-active {
+          color: var(--tertiary-color);
+        }
+
+        &:hover,
+        &:focus-within {
+          .data-table-column-filter,
+          .data-table-column-sort {
+            visibility: visible;
+          }
+        }
+      }
+
+      .data-table-filter-row {
+        th {
+          padding-top: 6px;
+          padding-bottom: 6px;
+          overflow: visible;
+        }
+
+        .data-table-filter-select {
+          width: 100%;
+          max-width: 100%;
+
+          button {
+            width: 100%;
+            max-width: 100%;
+            overflow: hidden;
+            padding: 4px 6px;
+            border: 1px solid #dedede;
+          }
+
+          .select-container-value {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 0.7rem;
+          }
+        }
+
+        .data-table-filter-input-wrapper {
+          width: 100%;
+          max-width: 100%;
+          overflow: visible;
+          box-sizing: border-box;
+
+          .input-clear-icon,
+          .input-clear-btn,
+          .clear-btn {
+            right: 5px;
+
+            .bi {
+              font-size: 0.8rem;
+            }
+          }
+
+          .input-container {
+            min-width: 0;
+            width: 100%;
+          }
+
+          .select-container,
+          .select-container-button {
+            max-width: 100%;
+            min-width: 0;
+          }
+        }
+
+        .data-table-filter-input {
+          width: 100%;
+          max-width: 100%;
+          min-width: 0;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          border: 1px solid #c9cfdb;
+          border-radius: 6px;
+          padding: 4px 6px;
+          font-size: 12px;
+          background-color: #fff;
+          color: #333;
+        }
+      }
+    }
+
+    tbody {
+      td {
+        padding: 0.5rem;
+
+        &:not(:first-child) {
+          padding-left: 0 !important;
+        }
+      }
+
+      tr.even {
+        background-color: #ffffff;
+      }
+
+      tr.odd {
+        background-color: #f5f5f5;
+      }
+
+      .data-table-input-number-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        button.data-table-step-btn {
+          min-width: 28px !important;
+          width: 28px !important;
+          height: 28px !important;
+          max-height: 28px !important;
+          padding: 0 !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          border-radius: 4px;
+          border: 1px solid #dcdcdc;
+          background-color: #f8f9fa;
+          color: #333;
+          font-size: 16px;
+          line-height: 1;
+          cursor: pointer;
+          transition: background-color 0.15s, border-color 0.15s;
+
+          &:hover:not(:disabled) {
+            background-color: #e9ecef;
+            border-color: #adb5bd;
+          }
+
+          &:active:not(:disabled) {
+            background-color: #dee2e6;
+          }
+
+          &:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+            background-color: #f8f9fa;
+          }
+
+          .bi {
+            font-size: 13px;
+            line-height: 1;
+          }
+        }
+
+        input {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+.data-table-action-icon {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.data-table-column-heading {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  > .flex-1 {
+    flex: 1;
+  }
+}
+.data-table-group-row th {
+  height: 40px;
+  box-sizing: border-box;
+}
+.data-table-action-link {
+  min-width: 0;
+  background: transparent;
+  color: var(--primary-color);
+  text-decoration: underline;
+}
+.data-table-mobile-controls {
+  display: grid;
+  gap: 12px;
+  margin-bottom: 16px;
+}

package/src/dataTable/dataTable.interface.ts

@@ -1,45 +1,66 @@
-import { HTMLInputTypeAttribute } from "react";
-
-export interface dataTableColumnsInterface<T> {
-  id: string;
-  label: string;
-  minWidth?: number;
-  maxWidth?: number;
-  width?: number;
-  align?: "right" | "left" | "center";
-  format?: (value: any) => string;
-  sortable?: boolean;
-  filterable?: boolean;
-  filterValue?: string;
-  editable?: boolean;
-  enterToNextColumn?: boolean;
-  options?: { label: string; value: string }[];
-  onEdit?: (value: any, row: T) => void;
-  onEnter?: (value: any, row: T) => void;
-  onDisable?: (row: T) => boolean;
-  onRowStyle?: (row: T) => React.CSSProperties;
-  type: HTMLInputTypeAttribute | "select" | "image";
-  imageAlt?: (row: T) => string;
-  imageStyle?: React.CSSProperties;
-  imageSrc?: (row: T) => string;
-  showStepButtons?: boolean | ((row: T) => boolean);
-  stepControls?: boolean | ((row: T) => boolean);
-  withStepControls?: boolean | ((row: T) => boolean);
-  step?: number;
-  min?: number;
-  max?: number;
-}
-export interface dataTableActionsInterface<T> {
-  id: string;
-  label: string;
-  type: "button" | "link" | "icon";
-  classIcon?: string;
-  onClick: (row: T, rowIndex?: number) => void;
-  shouldDisplay?: (row: T) => boolean;
-  disabled?: boolean;
-  labelButton?: (row: T) => string;
-  visible?: boolean;
-  width?: string | number;
-  minWidth?: string | number;
-  focusNextRow?: boolean;
-}
+import { HTMLInputTypeAttribute } from "react";
+import { TypeInputEnum } from "../form/form.enum";
+
+export interface dataTableColumnsInterface<T> {
+  id: string;
+  label: string;
+  key?: string;
+  name?: string;
+  sticky?: boolean;
+  minWidth?: number;
+  maxWidth?: number;
+  width?: number | string;
+  align?: "right" | "left" | "center";
+  alignText?: "right" | "left" | "center";
+  autoComplete?: string;
+  format?: (value: any) => string;
+  sortable?: boolean;
+  filterable?: boolean;
+  filterValue?: string;
+  filterDataEnum?: { label: string; value: string }[];
+  filterType?: TypeInputEnum;
+  editable?: boolean;
+  isUpdatable?: boolean;
+  onEditable?: (value: any, row: T) => boolean;
+  onChange?: (value: any, row: T) => void;
+  onEditByOverlay?: (value: any, row: T) => void;
+  onEditTrigger?: "change" | "enter";
+  displayOverlay?: boolean;
+  renderComponent?: (value: any, row: T) => React.ReactNode;
+  openClickCell?: boolean;
+  handleClickCell?: (e: React.MouseEvent<HTMLTableCellElement>, row: T) => void;
+  renderClickCellComponent?: (value: any, row: T) => React.ReactNode;
+  children?: dataTableColumnsInterface<T>[];
+  enterToNextColumn?: boolean;
+  options?: { label: string; value: string }[];
+  onEdit?: (value: any, row: T) => void;
+  onEnter?: (value: any, row: T) => void;
+  onDisable?: (row: T) => boolean;
+  onRowStyle?: (row: T) => React.CSSProperties;
+  type: HTMLInputTypeAttribute | "select" | "image";
+  imageAlt?: (row: T) => string;
+  imageStyle?: React.CSSProperties;
+  imageSrc?: (row: T) => string;
+  showStepButtons?: boolean | ((row: T) => boolean);
+  stepControls?: boolean | ((row: T) => boolean);
+  withStepControls?: boolean | ((row: T) => boolean);
+  step?: number;
+  min?: number;
+  max?: number;
+}
+export type DataTableColumnsInterface<T> = dataTableColumnsInterface<T>;
+export type DataTableActionsInterface<T> = dataTableActionsInterface<T>;
+export interface dataTableActionsInterface<T> {
+  id: string;
+  label: string;
+  type: "button" | "link" | "icon";
+  classIcon?: string;
+  onClick: (row: T, rowIndex?: number) => void;
+  shouldDisplay?: (row: T) => boolean;
+  disabled?: boolean;
+  labelButton?: (row: T) => string;
+  visible?: boolean;
+  width?: string | number;
+  minWidth?: string | number;
+  focusNextRow?: boolean;
+}