@tsiky/components-r19 1.1.0 → 1.2.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

@@ -1053,18 +1053,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 +1079,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,29 +1137,10 @@
   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,
@@ -1213,14 +1194,6 @@
   font-weight: 400;
 }
 
-.uppercaseSmall,
-.sortDropdownHeader,
-.operatorFilterContainer,
-.rangeSeparator,
-.pageSizeLabel {
-  font-weight: 400 !important;
-}
-
 @media (max-width: 480px) {
   .toggleFiltersButton,
   .toggleSortButton,
@@ -1285,3 +1258,76 @@
     font-weight: 400;
   }
 }
+
+/* ====== Header : centré par défaut & poids normal ====== */
+.headerCell {
+  padding: 12px 14px;
+  cursor: pointer;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 400; /* plus de gras */
+  vertical-align: middle;
+  background: transparent;
+  border-bottom: 1px solid rgba(230, 233, 239, 0.6);
+  /* text-align will be set by alignment utility classes */
+}
+
+/* centre le contenu interne proprement */
+.headerContent {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* centre horizontalement */
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  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;
+}

package/src/components/DynamicTable/TableauDynamique.tsx

@@ -1,154 +1,154 @@
-'use client';
-
-import React, { useState, useRef, useEffect } from 'react';
-import TableHeader from './TableHeader';
-import TableBody from './TableBody';
-import Pagination from './Pagination';
-import ColumnSorter from './ColumnSorter';
-import AdvancedFilters from './AdvancedFilters';
-import type { TableauDynamiqueProps, SortConfig } from './tools/tableTypes';
-import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
-import styles from './TableauDynamique.module.css';
-import { useTableData } from './hooks/useTableData';
-
-export interface EnhancedTableauDynamiqueProps<T> extends TableauDynamiqueProps<T> {
-  columnFilterable?: boolean;
-  filterConfig?: FilterConfig[];
-  externalFilters?: AppliedFilter[];
-  onFiltersChange?: (filters: AppliedFilter[]) => void;
-  onApplyFilters?: (filters: AppliedFilter[]) => void;
-  filtersControlled?: boolean;
-  debounceTimeout?: number;
-  getRowStyle?: (row: T) => React.CSSProperties;
-  background?: string;
-}
-
-export const TableauDynamique = <T,>({
-  columns = [],
-  data = [],
-  pagination = { pageSize: 10, currentPage: 1 },
-  onRowClick,
-  searchTerm = '',
-  className = '',
-  filterConfig = [],
-  externalFilters = [],
-  onFiltersChange,
-  onApplyFilters,
-  filtersControlled = false,
-  debounceTimeout = 300,
-  getRowStyle,
-  background,
-  onNewPage,
-}: EnhancedTableauDynamiqueProps<T>) => {
-  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'asc' });
-  const [currentPage, setCurrentPage] = useState(pagination.currentPage ?? 1);
-  const [pageSize, setPageSize] = useState(pagination.pageSize ?? 10);
-
-  const [filtersExpanded, setFiltersExpanded] = useState(false);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [internalFilters, setInternalFilters] = useState<AppliedFilter[]>([]);
-  const appliedFilters = filtersControlled ? externalFilters : internalFilters;
-
-  const { paginatedData, sortedData, totalPages, startIndex } = useTableData<T>(
-    data,
-    columns,
-    searchTerm,
-    sortConfig,
-    currentPage,
-    pageSize,
-    appliedFilters
-  );
-
-  useEffect(() => {
-    const safeTotal = Math.max(1, Math.floor(totalPages));
-    if (currentPage > safeTotal) {
-      setCurrentPage(safeTotal);
-    }
-    if (currentPage < 1) {
-      setCurrentPage(1);
-    }
-  }, [totalPages]);
-
-  const handleFiltersChange = (filters: AppliedFilter[]) => {
-    if (!filtersControlled) setInternalFilters(filters);
-    onFiltersChange?.(filters);
-    setCurrentPage(1);
-  };
-
-  const handleApplyFilters = (filters: AppliedFilter[]) => {
-    if (!filtersControlled) setInternalFilters(filters);
-    onApplyFilters?.(filters);
-    setCurrentPage(1);
-    setFiltersExpanded(false);
-    if (containerRef.current)
-      containerRef.current.style.setProperty('--filters-panel-height', `0px`);
-  };
-
-  const handlePageChange = (page: number) => setCurrentPage(page);
-  const handlePageSizeChange = (size: number) => {
-    setPageSize(size);
-    setCurrentPage(1);
-  };
-
-  const handlePanelHeightChange = (h: number) => {
-    if (containerRef.current) {
-      containerRef.current.style.setProperty('--filters-panel-height', `${Math.round(h)}px`);
-    }
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className={`${styles.container} ${className} ${filtersExpanded ? 'filters-open' : ''}`}
-      style={{ background }}
-    >
-      <div className={styles.tableControls}>
-        <div className={styles.controlsRight}>
-          <ColumnSorter columns={columns} sortConfig={sortConfig} onSort={setSortConfig} />
-          {filterConfig.length > 0 && (
-            <AdvancedFilters
-              filters={filterConfig}
-              externalFilters={externalFilters}
-              onFiltersChange={handleFiltersChange}
-              onApply={handleApplyFilters}
-              isControlled={filtersControlled}
-              debounceTimeout={debounceTimeout}
-              resultsCount={sortedData.length}
-              expanded={filtersExpanded}
-              onToggle={(v: boolean | ((prevState: boolean) => boolean)) => setFiltersExpanded(v)}
-              panelPlacement='top'
-              onPanelHeightChange={handlePanelHeightChange}
-            />
-          )}
-        </div>
-      </div>
-
-      <div className={styles.topPagination}>
-        <Pagination
-          currentPage={currentPage}
-          totalPages={Math.max(1, totalPages)}
-          pageSize={pageSize}
-          totalItems={sortedData.length}
-          onPageChange={handlePageChange}
-          onPageSizeChange={handlePageSizeChange}
-          onNewPage={onNewPage}
-        />
-      </div>
-
-      <div className={styles.tableWrapper} data-table-wrapper>
-        <table className={styles.table}>
-          <TableHeader columns={columns} />
-          <TableBody
-            data={paginatedData}
-            columns={columns}
-            onRowClick={onRowClick}
-            startIndex={startIndex}
-            getRowStyle={getRowStyle}
-          />
-        </table>
-      </div>
-    </div>
-  );
-};
-
-export default TableauDynamique;
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import TableHeader from './TableHeader';
+import TableBody from './TableBody';
+import Pagination from './Pagination';
+import ColumnSorter from './ColumnSorter';
+import AdvancedFilters from './AdvancedFilters';
+import type { TableauDynamiqueProps, SortConfig } from './tools/tableTypes';
+import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
+import styles from './TableauDynamique.module.css';
+import { useTableData } from './hooks/useTableData';
+
+export interface EnhancedTableauDynamiqueProps<T> extends TableauDynamiqueProps<T> {
+  columnFilterable?: boolean;
+  filterConfig?: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApplyFilters?: (filters: AppliedFilter[]) => void;
+  filtersControlled?: boolean;
+  debounceTimeout?: number;
+  getRowStyle?: (row: T) => React.CSSProperties;
+  background?: string;
+}
+
+export const TableauDynamique = <T,>({
+  columns = [],
+  data = [],
+  pagination = { pageSize: 10, currentPage: 1 },
+  onRowClick,
+  searchTerm = '',
+  className = '',
+  filterConfig = [],
+  externalFilters = [],
+  onFiltersChange,
+  onApplyFilters,
+  filtersControlled = false,
+  debounceTimeout = 300,
+  getRowStyle,
+  background,
+  onNewPage,
+}: EnhancedTableauDynamiqueProps<T>) => {
+  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'asc' });
+  const [currentPage, setCurrentPage] = useState(pagination.currentPage ?? 1);
+  const [pageSize, setPageSize] = useState(pagination.pageSize ?? 10);
+
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [internalFilters, setInternalFilters] = useState<AppliedFilter[]>([]);
+  const appliedFilters = filtersControlled ? externalFilters : internalFilters;
+
+  const { paginatedData, sortedData, totalPages, startIndex } = useTableData<T>(
+    data,
+    columns,
+    searchTerm,
+    sortConfig,
+    currentPage,
+    pageSize,
+    appliedFilters
+  );
+
+  useEffect(() => {
+    const safeTotal = Math.max(1, Math.floor(totalPages));
+    if (currentPage > safeTotal) {
+      setCurrentPage(safeTotal);
+    }
+    if (currentPage < 1) {
+      setCurrentPage(1);
+    }
+  }, [totalPages]);
+
+  const handleFiltersChange = (filters: AppliedFilter[]) => {
+    if (!filtersControlled) setInternalFilters(filters);
+    onFiltersChange?.(filters);
+    setCurrentPage(1);
+  };
+
+  const handleApplyFilters = (filters: AppliedFilter[]) => {
+    if (!filtersControlled) setInternalFilters(filters);
+    onApplyFilters?.(filters);
+    setCurrentPage(1);
+    setFiltersExpanded(false);
+    if (containerRef.current)
+      containerRef.current.style.setProperty('--filters-panel-height', `0px`);
+  };
+
+  const handlePageChange = (page: number) => setCurrentPage(page);
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const handlePanelHeightChange = (h: number) => {
+    if (containerRef.current) {
+      containerRef.current.style.setProperty('--filters-panel-height', `${Math.round(h)}px`);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${styles.container} ${className} ${filtersExpanded ? 'filters-open' : ''}`}
+      style={{ background }}
+    >
+      <div className={styles.tableControls}>
+        <div className={styles.controlsRight}>
+          <ColumnSorter columns={columns} sortConfig={sortConfig} onSort={setSortConfig} />
+          {filterConfig.length > 0 && (
+            <AdvancedFilters
+              filters={filterConfig}
+              externalFilters={externalFilters}
+              onFiltersChange={handleFiltersChange}
+              onApply={handleApplyFilters}
+              isControlled={filtersControlled}
+              debounceTimeout={debounceTimeout}
+              resultsCount={sortedData.length}
+              expanded={filtersExpanded}
+              onToggle={(v: boolean | ((prevState: boolean) => boolean)) => setFiltersExpanded(v)}
+              panelPlacement='top'
+              onPanelHeightChange={handlePanelHeightChange}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className={styles.topPagination}>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.max(1, totalPages)}
+          pageSize={pageSize}
+          totalItems={sortedData.length}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          onNewPage={onNewPage}
+        />
+      </div>
+
+      <div className={styles.tableWrapper} data-table-wrapper>
+        <table className={styles.table}>
+          <TableHeader columns={columns} />
+          <TableBody
+            data={paginatedData}
+            columns={columns}
+            onRowClick={onRowClick}
+            startIndex={startIndex}
+            getRowStyle={getRowStyle}
+          />
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default TableauDynamique;