@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/DynamicTable/TableCell.tsx

@@ -1,30 +1,38 @@
-'use client';
-
-import type { RendererProps } from './tools/tableTypes';
-import { tableConfig } from './tools/tableConfig';
-import styles from './TableauDynamique.module.css';
-
-const TableCell = <T,>({ value, row, column }: RendererProps<T>) => {
-  const getRenderer = () => {
-    if (column.component) {
-      const CustomComponent = column.component;
-      return <CustomComponent value={value} row={row} column={column} />;
-    }
-
-    if (column.render) {
-      return column.render(value, row, column);
-    }
-
-    const rendererKey = column.type || 'text';
-    const Renderer = tableConfig.renderers[rendererKey] || tableConfig.renderers.text;
-    return <Renderer value={value} row={row} column={column} />;
-  };
-
-  return (
-    <td className={styles.tableCell} style={{ textAlign: column.align || 'left' }}>
-      {getRenderer()}
-    </td>
-  );
-};
-
-export default TableCell;
+'use client';
+
+import React from 'react';
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableCellProps<T = unknown> {
+  value: any;
+  row: T;
+  column: TableColumn<T>;
+}
+
+const TableCell = <T,>({ value, row, column }: TableCellProps<T>) => {
+  const alignClass =
+    column.align === 'right'
+      ? styles.alignRight
+      : column.align === 'left'
+        ? styles.alignLeft
+        : styles.alignCenter;
+
+  const content =
+    typeof (column as any).render === 'function'
+      ? (column as any).render(value, row)
+      : value === null || value === undefined
+        ? ''
+        : String(value);
+
+  return (
+    <td
+      className={`${styles.tableCell} ${alignClass}`}
+      style={{ width: column.width ?? undefined }}
+    >
+      <div className={styles.cellContent}>{content}</div>
+    </td>
+  );
+};
+
+export default TableCell;

package/src/components/DynamicTable/TableHeader.tsx

@@ -1,34 +1,39 @@
-'use client';
-
-import type { TableColumn } from './tools/tableTypes';
-import styles from './TableauDynamique.module.css';
-
-interface TableHeaderProps<T = unknown> {
-  columns: TableColumn<T>[];
-}
-
-const TableHeader = <T,>({ columns }: TableHeaderProps<T>) => {
-  return (
-    <thead className={styles.tableHeader}>
-      <tr>
-        {columns.map((column) => (
-          <th
-            key={column.id}
-            className={styles.headerCell}
-            style={{
-              width: column.width,
-              textAlign: column.align,
-              padding: '1rem',
-            }}
-          >
-            <div className={styles.headerContent}>
-              <span>{column.label}</span>
-            </div>
-          </th>
-        ))}
-      </tr>
-    </thead>
-  );
-};
-
-export default TableHeader;
+'use client';
+
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableHeaderProps<T = unknown> {
+  columns: TableColumn<T>[];
+}
+
+const TableHeader = <T,>({ columns }: TableHeaderProps<T>) => {
+  return (
+    <thead className={styles.tableHeader}>
+      <tr>
+        {columns.map((column) => {
+          const alignClass =
+            column.align === 'right'
+              ? styles.alignRight
+              : column.align === 'left'
+                ? styles.alignLeft
+                : styles.alignCenter;
+
+          return (
+            <th
+              key={column.id}
+              className={`${styles.headerCell} ${alignClass}`}
+              style={{ width: column.width ?? undefined }}
+            >
+              <div className={styles.headerContent}>
+                <span>{column.label}</span>
+              </div>
+            </th>
+          );
+        })}
+      </tr>
+    </thead>
+  );
+};
+
+export default TableHeader;

package/src/components/DynamicTable/TableauDynamique.module.css

@@ -79,16 +79,13 @@
 .headerCell {
   padding: 12px 14px;
   cursor: pointer;
-  text-align: left;
   letter-spacing: 0.2px;
   white-space: nowrap;
   font-size: 13px;
-  font-weight: 600;
   vertical-align: middle;
-}
-.headerContent {
-  font-size: 13px;
-  font-weight: 900;
+  background: transparent;
+  border-bottom: 1px solid rgba(230, 233, 239, 0.6);
+  text-align: center;
 }
 .table tbody td {
   padding: 10px 14px;
@@ -157,7 +154,6 @@
   border: 1px solid #e5e7eb;
   border-radius: 999px;
   font-size: var(--small-font);
-  font-weight: 600;
   cursor: pointer;
   transition: all 0.12s ease-in-out;
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
@@ -193,7 +189,6 @@
 /* ---------- NOUVELLES RÈGLES POUR LES LABELS DE TRI ---------- */
 .sortItemLabel {
   font-size: 13px;
-  font-weight: 600;
   color: #111827;
   white-space: nowrap;
   overflow: hidden;
@@ -207,7 +202,6 @@
 .uppercaseSmall {
   font-size: 11px;
   letter-spacing: 0.4px;
-  font-weight: 700;
   line-height: 1;
 }
 
@@ -321,7 +315,6 @@
 }
 .filterLabel {
   font-size: var(--xsmall-font);
-  font-weight: 600;
   color: #111827;
 }
 .filterInput,
@@ -347,7 +340,6 @@
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  font-weight: 600;
   color: #374151;
   background: #f1f5f9;
   border-radius: 18px;
@@ -366,7 +358,6 @@
   border: none;
   padding: 10px 14px;
   border-radius: 10px;
-  font-weight: 700;
   cursor: pointer;
   font-size: 13px;
 }
@@ -378,7 +369,6 @@
   border-radius: 10px;
   cursor: pointer;
   font-size: var(--xsmall-font);
-  font-weight: 600;
 }
 
 @media (max-width: 680px) {
@@ -426,7 +416,6 @@
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  font-weight: 700;
   font-size: var(--xsmall-font);
   color: #374151;
 }
@@ -473,7 +462,6 @@
   display: block;
   line-height: 1;
   font-size: 13px;
-  font-weight: 400;
   color: #111827;
   max-width: 100%;
 }
@@ -503,7 +491,6 @@
 
 .sortItemLabel {
   font-size: 13px;
-  font-weight: 600;
   color: #111827;
   white-space: nowrap;
   overflow: hidden;
@@ -613,7 +600,6 @@
   }
 }
 .sortDropdownHeader {
-  font-weight: 700;
   font-size: var(--xsmall-font);
   color: #374151;
   margin-bottom: 8px;
@@ -702,7 +688,6 @@
   align-items: center;
 }
 .pageSizeLabel {
-  font-weight: 600;
   color: var(--muted);
   font-size: 13px;
 }
@@ -757,7 +742,6 @@
 .activeButton {
   background: var(--color-primary);
   color: #fff;
-  font-weight: 700;
 }
 .disabledButton {
   opacity: 0.45;
@@ -815,10 +799,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  font-weight: 700;
 }
 .rangeSeparator {
-  font-weight: 600;
   color: var(--muted);
 }
 
@@ -1053,18 +1035,18 @@
 
 @media (max-width: 480px) {
   .tableControls {
-    justify-content: center !important;
+    justify-content: center;
   }
 
   .controlsRight {
-    justify-content: center !important;
+    justify-content: center;
     width: auto;
     gap: 8px;
   }
 
   .toggleFiltersButton,
   .toggleSortButton {
-    flex: 0 0 auto !important;
+    flex: 0 0 auto;
     min-width: 0;
     margin: 0 6px;
   }
@@ -1079,20 +1061,20 @@
 
 @media (max-width: 360px) {
   .tableControls {
-    justify-content: center !important;
+    justify-content: center;
     padding-left: 6px;
     padding-right: 6px;
   }
 
   .controlsRight {
     width: 100%;
-    justify-content: center !important;
+    justify-content: center;
     gap: 6px;
   }
 
   .toggleFiltersButton,
   .toggleSortButton {
-    flex: 0 0 auto !important;
+    flex: 0 0 auto;
     padding: 6px 10px;
     font-size: 11px;
   }
@@ -1137,36 +1119,16 @@
   box-shadow: 0 10px 22px rgba(2, 6, 23, 0.12);
 }
 
-.table thead,
-.headerCell {
-  font-weight: 400 !important;
-}
-
-.table tbody td {
-  font-weight: 400 !important;
-}
-
-.tableRow,
-.tableRow td,
-.headerCell,
-.pageSizeLabel,
-.pageSizeSuffix,
-.paginationInfo {
-  font-weight: 400 !important;
-}
-
 .toggleSortButton,
 .toggleFiltersButton,
 .buttonTextCompact {
   font-size: var(--controls-text-size);
-  font-weight: 400;
 }
 
 .sortDropdownHeader,
 .sortItemLabel,
 .sortDropdownHeader span {
   font-size: var(--controls-text-size);
-  font-weight: 400;
   color: #374151;
 }
 
@@ -1179,17 +1141,12 @@
   vertical-align: middle;
 }
 
-.closeButton {
-  font-weight: 400;
-}
-
 .filterLabel,
 .buttonTextCompact,
 .countCompact,
 .resultCountCompact,
 .activeLabelCompact {
   font-size: var(--controls-text-size);
-  font-weight: 400;
 }
 
 .filtersPanel,
@@ -1203,22 +1160,9 @@
   font-size: var(--controls-text-size);
 }
 
-.activeFilterTag {
-  font-weight: 400;
-}
-
 .applyButton,
 .cancelButton {
   font-size: var(--controls-text-size);
-  font-weight: 400;
-}
-
-.uppercaseSmall,
-.sortDropdownHeader,
-.operatorFilterContainer,
-.rangeSeparator,
-.pageSizeLabel {
-  font-weight: 400 !important;
 }
 
 @media (max-width: 480px) {
@@ -1242,14 +1186,12 @@
 .sortDropdownItem {
   min-width: 0;
   font-size: var(--small-font);
-  font-weight: 400;
 }
 
 .sortDropdownHeader,
 .sortItemLabel,
 .sortDropdownItem .sortItemLabel {
   font-size: var(--small-font);
-  font-weight: 400;
 }
 
 .columnSorterLabel {
@@ -1262,13 +1204,11 @@
   max-width: 180px;
   line-height: 1;
   font-size: var(--xsmall-font);
-  font-weight: 600;
   text-transform: none;
 }
 
 .uppercaseSmall {
   font-size: var(--xsmall-font);
-  font-weight: 400;
   letter-spacing: 0.4px;
   text-transform: uppercase;
   line-height: 1;
@@ -1282,6 +1222,73 @@
   .sortItemLabel,
   .uppercaseSmall {
     font-size: var(--xsmall-font);
-    font-weight: 400;
   }
 }
+
+.headerCell {
+  padding: 12px 14px;
+  cursor: pointer;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  font-size: 13px;
+  vertical-align: middle;
+  background: transparent;
+  border-bottom: 1px solid rgba(230, 233, 239, 0.6);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.tableCell {
+  padding: 10px 14px;
+  background: transparent;
+  vertical-align: middle;
+  font-size: 13px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cellContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 20px;
+  gap: 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.alignLeft {
+  text-align: left;
+}
+.alignCenter {
+  text-align: center;
+}
+.alignRight {
+  text-align: right;
+}
+
+.tableCell.alignRight .cellContent,
+.headerCell.alignRight .headerContent {
+  justify-content: flex-end;
+}
+
+.tableCell.alignLeft .cellContent,
+.headerCell.alignLeft .headerContent {
+  justify-content: flex-start;
+}
+
+.emptyRow {
+  text-align: center;
+  padding: 24px;
+  color: var(--muted);
+  font-size: 13px;
+}