+
+ {formatCell ? formatCell(value) : value}
+
+ {selectedItemsId.length > 0 &&
({selectedItemsId.length})
}
+ {variant === 'Data' && (isSortable || isResizable) &&
+ {isFilterable &&
}
+ options={filterItemList.map
(label => {
+ return {
+ id: label,
+ label,
+ value: label
+ }
+ })}
+ dropDown={{
+ placement: 'center',
+ isCloseOnClickOutside: true,
+ actions: [
+ {
+ children: 'Apply'
+ },
+ {
+ children: 'Clear',
+ onClick: () => onFilterSelect(id, [])
+ }
+ ]
+ }}
+ selectionType='multi'
+ isWithActions
+ onSelect={options => onFilterSelect(id, options.map(option => option.label))}
+ selectedOptionIds={selectedItemsId}
+ />}
+ {isSortable && toggleSorting()}>
+ {sortState === 'unset' &&
}
+ {sortState === 'ascending' &&
+ }
+ {sortState === 'descending' &&
+ }
+
onColumnStartDragg(id, headerCellRef)} />}
+
}
+
+ )
+ }} />
+ )
+}
\ No newline at end of file
diff --git a/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.scss b/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.scss
new file mode 100644
index 00000000..1fd0bb6d
--- /dev/null
+++ b/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.scss
@@ -0,0 +1,239 @@
+@use '../../../styles/mixins.scss' as *;
+
+.dsTable {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ min-height: 56px;
+ padding: 0 5px;
+ width: 100%;
+ opacity: 0;
+ @include transition(opacity 0.2s ease);
+
+ &.isVisible {
+ opacity: 1;
+ }
+
+ &.table-light {
+ .tableCardContent {
+ box-shadow: none;
+
+ tr {
+ background-color: var(--background-main);
+ border-bottom-color: var(--background-content);
+
+ &.rowHeader {
+ border-color: var(--background-content);
+ }
+
+ &:not(&.isDisabled) {
+ &.rowHeader {
+
+ &:hover,
+ &.isSelected {
+ background-color: var(--background-hover);
+ }
+ }
+ }
+
+ td {
+ &.dsCell {
+ &.dsHeaderCell {
+ background-color: var(--background-content);
+ }
+ }
+ }
+ }
+ }
+
+ .dsTableFooter {
+ box-shadow: none;
+ }
+ }
+
+ .tableCardContent {
+ padding: 0;
+ margin-bottom: 6px;
+ width: 100%;
+
+ &.isHorizontalScroll {
+ overflow-x: auto;
+ margin-bottom: 0;
+
+ .tableElement {
+ thead {
+ top: 0;
+ }
+ }
+
+ @include hideScrollbar();
+ }
+
+ &.showPagination {
+ margin-bottom: 0;
+ }
+
+ &.maxHeight {
+ @include hideScrollbar();
+ overflow-y: auto;
+
+ thead {
+ top: 0;
+ }
+ }
+
+ &.isHeaderHidden {
+ .tableElement {
+ thead {
+ top: 0;
+ }
+ }
+ }
+
+ table,
+ th,
+ td {
+ border-collapse: collapse;
+ }
+
+ tr {
+ border-bottom: 1px solid var(--border-main);
+ }
+
+ thead {
+ position: sticky;
+ top: 89px;
+
+ tr {
+ .dsCell {
+ &.manageColumns {
+ .manageColumnsIcon {
+ position: relative;
+ top: 3px;
+ cursor: pointer;
+
+ path {
+ fill: var(--icon-primary);
+ }
+
+ &:hover {
+ path {
+ fill: var(--icon-primary-hover);
+ }
+ }
+ }
+ }
+
+ &.isLastAndNoExtraCols {
+ .cellContent {
+ .headerCellContent {
+ .cellActions {
+ .resizeElement {
+ pointer-events: none;
+ opacity: 0;
+ }
+ }
+ }
+ }
+ }
+
+ .headerCellContent {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ }
+ }
+ }
+ }
+
+ tbody {
+ tr {
+ position: relative;
+
+ &:not(&.isDisabled) {
+ &.rowHeader {
+
+ &:hover,
+ &.isSelected {
+ background-color: var(--background-hover);
+
+ .freezed {
+ background-color: inherit;
+ }
+ }
+
+ &.isExpandable {
+ cursor: pointer;
+ }
+ }
+ }
+
+ &.expandedRowContainer {
+ border-bottom-width: 0;
+ @include transition(border-bottom-width 0.4s ease);
+
+ &.isExpanded {
+ border-bottom-width: 1px;
+
+ td {
+ .expandedCellContainer {
+ max-height: 400px;
+ min-height: 50px;
+ }
+ }
+ }
+
+ td {
+ padding: 0;
+
+ .expandedCellContainer {
+ max-height: 0;
+ min-height: 0;
+ overflow: hidden;
+ @include transition(max-height 0.4s ease-in-out, min-height 0.4s ease-in-out);
+ @include showScrollbarY();
+ }
+ }
+ }
+
+ .extraActionsContainer {
+ display: flex;
+
+ .chevronIcon {
+ color: var(--icon-tertiary);
+ width: 20px;
+ @include transition(transform 0.3s ease);
+
+ &.isExpanded {
+ @include rotate(180deg);
+ }
+
+ &.isDisabled {
+ color: var(--icon-tertiary-disabled);
+ }
+ }
+ }
+ }
+ }
+
+ .tableElement {
+ width: 100%;
+ }
+
+ .emptyTableContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 300px;
+ position: sticky;
+ left: 0;
+
+ .emptyContent {
+ color: var(--text-secondary);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.tsx b/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.tsx
new file mode 100644
index 00000000..c5c9262d
--- /dev/null
+++ b/AI/GenAI-ChatBot-application-sample/src/app/[locale]/components/dsComponents/dsTable/dsTable.tsx
@@ -0,0 +1,785 @@
+import { forwardRef, Fragment, ReactElement, RefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import './dsTable.scss';
+import { DsBaseComponentProps } from "../dsTypes";
+import { DsCard } from "../dsCard/dsCard";
+import { DsCell, DsCellProps, FreezColumn, FreezeDirection } from "./dsCell/dsCell";
+import FileIcon from "@/app/[locale]/svgs/tableIcons/file.svg";
+import { DsTypography } from "../dsTypography/dsTypography";
+import { ColumnWidthType, DsHeaderCell, DsTableColumn, SortType } from "./dsCell/dsHeaderCell";
+import useRunOnce from "@/app/[locale]/hooks/useRunOnce";
+import { useRefDimensions } from "@/app/[locale]/hooks/useRefDimentions";
+import { _Classes } from "@/utils/cssHelper.util";
+import { DsBaseButton } from "../dsButton/dsButton";
+import DsTableFooter from "./dsTableFooter/dsTableFooter";
+import useSyncScroll from "@/app/[locale]/hooks/useSyncScroll";
+import useRunUntil from "@/app/[locale]/hooks/useRunUntil";
+import { DsRadioButton } from "../../dsRadioButton/dsRadioButton";
+import { DsCheckbox } from "../dsCheckbox/dsCheckbox";
+
+export interface DsRow {
+ id: string,
+ cells: { [columnId: string]: DsCellProps }
+ isDisabled?: boolean,
+ disabledReason?: string,
+ isSelectable?: boolean,
+ expandable?: {
+ isExpandable?: boolean,
+ children?: ReactElement
+ }
+}
+
+interface DsRowInner extends DsRow {
+ isExpanded?: boolean
+}
+
+export type DsColumn = Omit
;
+export interface DsSortedColumn {
+ columnId: string,
+ order: SortType
+}
+
+interface FreezeOptions {
+ freezLeftColumnId?: string
+ freezRightColumnId?: string
+}
+
+export interface DsTableProps extends Omit {
+ columns: DsColumn[],
+ data: DsRow[],
+ rowHight?: 'single' | 'double',
+ //Set a maximum height (in pixels) of the table
+ maxHeight?: number,
+ defaultSortedColumn?: DsSortedColumn,
+ isHorizontalScroll?: boolean,
+ pageSize?: number | false,
+ actions?: DsBaseButton[],
+ title?: string,
+ isSearchable?: boolean,
+ noDataText?: string,
+ onRowHover?: (rowData: DsRow, rowIndex: number) => void
+ onRowClick?: (rowData: DsRow, rowIndex: number) => void,
+ onRowSelect?: (selectedRowsId: string[]) => void,
+ onSort?: (col: DsColumn, order: SortType) => void,
+ onRowsExapnded?: () => void,
+ selectionType?: 'singular' | 'multiple',
+ selectedRowsId?: string[],
+ freezeOptions?: FreezeOptions,
+ isLoading?: boolean,
+ variant?: 'default' | 'light'
+}
+
+export const DsTable = forwardRef(({
+ className = '',
+ style = {},
+ columns = [],
+ data = [],
+ rowHight = 'single',
+ maxHeight,
+ defaultSortedColumn,
+ isHorizontalScroll,
+ pageSize = 50,
+ actions = [],
+ title,
+ isSearchable = true,
+ noDataText,
+ onRowHover = () => { },
+ onRowClick = () => { },
+ onRowSelect = () => { },
+ onSort = () => { },
+ selectionType,
+ selectedRowsId = [],
+ freezeOptions,
+ isLoading,
+ variant = 'default',
+ ...rest
+}: DsTableProps, ref) => {
+ const rowspanCells = useRef({});
+ const tableContainerRef = useRef(null);
+ const tableElementRef = useRef(null);
+ const tableTopBarRef = useRef(null);
+ const tableFooterRef = useRef(null);
+ const horizontalScrollRef = useRef(null);
+ const tableHeaderRef = useRef(null);
+ const tableDataFilteredRef = useRef([]);
+ const enabledRowsRef = useRef([]);
+ const doneLoadingRef = useRef(false);
+
+ const ACTION_COL = useMemo(() => {
+ return {
+ width: 56,
+ idPref: '_ACTION_COL_'
+ }
+ }, []);
+
+ type Colspan = {
+ [colIndex: string]: {
+ rowIndex: number,
+ rowSpan: number
+ }
+ };
+
+ const [tableData, setTableData] = useState(data);
+ const [tableColumns, setTableColumns] = useState(columns);
+ const [managedTableColumns, setManagedTableColumns] = useState(columns);
+ const [sortedColumn, setSortedColumn] = useState(defaultSortedColumn);
+ const [tableContainerWidth, setTableContainerWidth] = useState(0);
+ const [isAllColumnsFixedWidth, setIsAllColumnsFixedWidth] = useState(false);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [searchValue, setSearchValue] = useState();
+ const [forceRender, setForceRender] = useState(Date.now());
+ const [columnDraggingParams, setColumnStartDraggParams] = useState<{
+ columnId: string,
+ origWidth: number,
+ move: number
+ }>()
+ const [mainLayout, setMainLayout] = useState(null);
+ const [selectedIds, setSelectedIds] = useState(selectionType === 'singular' ? [selectedRowsId[0]] : selectedRowsId);
+ const [filterdColumns, setFilterdColumns] = useState<{ [columnId: string]: string[] }>({});
+ const [freezeColumns, setFreezeColumns] = useState<{
+ [columnId: string]: {
+ direction: FreezeDirection,
+ width: number
+ },
+ }>({});
+ const [freezeSettings, setFreezeSettings] = useState(freezeOptions);
+
+ const { width: widthFromContainerRef, top: tableTopPosition } = useRefDimensions(tableContainerRef.current);
+ const { height: mainLayoutHight } = useRefDimensions(mainLayout);
+ const { width: tableWidth } = useRefDimensions(tableElementRef.current);
+ useSyncScroll([horizontalScrollRef, tableContainerRef], "horizontal")
+
+ useRunUntil(() => {
+ setTimeout(() => {
+ const mainLayoutElement = document.querySelector('body');
+ if (mainLayoutElement) setMainLayout(mainLayoutElement);
+ }, 0);
+ }, !!mainLayout)
+
+ useEffect(() => {
+ setTableData(data);
+ }, [data])
+
+ useEffect(() => {
+ setTableColumns(columns);
+ setManagedTableColumns(columns);
+ }, [columns])
+
+ const isNotActionCol = useCallback((col: DsColumn): boolean => {
+ return !col.id.includes(ACTION_COL.idPref) && col.variant !== 'Action';
+ }, [ACTION_COL.idPref])
+
+ const hasExpandableRows = useMemo(() => {
+ return data.some(row => row.expandable?.isExpandable);
+ }, [data])
+
+ useEffect(() => {
+ if (columnDraggingParams) {
+ const { columnId, origWidth, move } = columnDraggingParams;
+
+ setTableColumns(tableColumns => {
+ const draggedCol = tableColumns.find(col => col.id === columnId)!;
+ const newWidth = origWidth + move;
+
+ if (draggedCol.width?.value !== newWidth) {
+ const newValue = origWidth + move;
+
+ draggedCol.width = {
+ unit: 'px',
+ value: newValue < 0 ? 0 : newValue
+ }
+
+ setForceRender(Date.now());
+ }
+
+ return tableColumns;
+ });
+ }
+ }, [columnDraggingParams, tableColumns])
+
+ useRunOnce(() => {
+ if (sortedColumn) {
+ const { columnId, order } = sortedColumn;
+ const col = tableColumns.find(col => col.id === columnId);
+
+ if (col) handleSort(order, col);
+ }
+ });
+
+ useEffect(() => {
+ setTableContainerWidth(widthFromContainerRef);
+ }, [widthFromContainerRef])
+
+ const totalColumnsWidth = useCallback((onlyAction?: boolean): number => {
+ const allColumnsWidth = tableColumns.reduce((totalWidth, col) => {
+ const { width: { unit = 'px', value = 0 } = {} } = col;
+ let colWidth = 0;
+
+ switch (unit) {
+ case 'px': {
+ colWidth = value;
+ break;
+ }
+ case '%': {
+ colWidth = tableContainerWidth * value / 100;
+ break;
+ }
+ }
+
+ let widthForAdd = col.isHidden ? 0 : colWidth;
+ if (onlyAction && isNotActionCol(col)) {
+ widthForAdd = 0;
+ }
+
+ return totalWidth + widthForAdd;
+ }, 0)
+
+ return allColumnsWidth;
+ }, [tableColumns, tableContainerWidth, isNotActionCol])
+
+ const isTotalColWidthLessThanTable = useMemo((): boolean => {
+ return totalColumnsWidth() < tableContainerWidth;
+ }, [tableContainerWidth, totalColumnsWidth])
+
+ const handleSort = useCallback((order: SortType, column: DsColumn) => {
+ const { id, customeSort } = column;
+
+ const sortedData = customeSort ? customeSort([...data], order) : [...data].sort((row1, row2) => {
+ const val1 = row1.cells[id] ? row1.cells[id].value : '';
+ const val2 = row2.cells[id] ? row2.cells[id].value : '';
+
+ if (!val1 || !val2) return 1;
+
+ switch (order) {
+ case 'ascending': {
+ return val1.localeCompare(val2, undefined, { numeric: true }) > 0 ? 1 : -1
+ }
+ case 'descending': {
+ return val1.localeCompare(val2, undefined, { numeric: true }) > 0 ? -1 : 1
+ }
+ default:
+ return 0
+ }
+ });
+
+ setSortedColumn({
+ columnId: id,
+ order
+ });
+ setTableData(() => order === 'unset' ? [...data] : [...sortedData]);
+ }, [data])
+
+ const tableDataSearcheFiltered = useMemo((): DsRowInner[] => {
+ tableDataFilteredRef.current = searchValue ? tableData.filter(row => {
+ return JSON.stringify(row.cells).toLowerCase().includes(searchValue);
+ }) : tableData;
+
+ return tableDataFilteredRef.current;
+ }, [searchValue, tableData])
+
+ const tableDataFiltered = useMemo((): DsRowInner[] => {
+ // filterdColumns
+ const isInFilterSelection = (cells: { [columnId: string]: DsCellProps }): boolean => {
+ let isShow = true;
+ const cellEntires = Object.entries(cells);
+ const filterKeys = Object.keys(filterdColumns);
+
+ if (filterKeys.length === 0) return true;
+
+ cellEntires.forEach(cell => {
+ if (filterKeys.includes(cell[0])) {
+ const cellValue = cell[1].value;
+ if (!cellValue || !filterdColumns[cell[0]].includes(cellValue)) {
+ isShow = false
+ };
+ }
+ })
+
+ return isShow;
+ }
+
+ return tableDataSearcheFiltered.filter(row => isInFilterSelection(row.cells));
+ }, [tableDataSearcheFiltered, filterdColumns])
+
+ const numberOfPages = useMemo((): number => {
+ return Math.ceil(tableDataFiltered.length / (pageSize as number));
+ }, [pageSize, tableDataFiltered.length])
+
+ const showPagination = useMemo(() => {
+ if (currentPage > numberOfPages) setCurrentPage(numberOfPages || 1);
+
+ return pageSize ? tableDataFiltered.length > pageSize : false;
+ }, [tableDataFiltered.length, pageSize, currentPage, numberOfPages])
+
+ const showHorizontalScroll = useMemo(() => {
+ return (!!isHorizontalScroll && (tableContainerRef.current?.clientWidth || 0) < tableWidth);
+ }, [isHorizontalScroll, tableWidth])
+
+ const tableRows = useMemo(() => {
+ const startIndex = (currentPage - 1) * (pageSize as number);
+ const rows = showPagination ? tableDataFiltered.slice(startIndex, startIndex + (pageSize as number)) : tableDataFiltered;
+ enabledRowsRef.current = rows.filter(row => !row.isDisabled || row.isSelectable);
+
+ return rows;
+ }, [showPagination, currentPage, pageSize, tableDataFiltered])
+
+ useEffect(() => {
+ let managedCols = [...managedTableColumns];
+
+ const selectionCol = (cols: DsColumn[]): DsColumn[] => {
+ const SELECTION_COL_ID = `${ACTION_COL.idPref}selectionColumns`;
+ let newSelectedIds = selectedIds;
+
+ const selectionCols: DsColumn[] = [{
+ id: SELECTION_COL_ID,
+ width: {
+ value: ACTION_COL.width + 10,
+ unit: 'px'
+ },
+ className: 'selectionColumns',
+ isSortable: false,
+ isResizable: false,
+ isFilterable: false,
+ value: '',
+ formatCell: () => {
+ const enabledFilteredRows = tableDataFilteredRef.current.filter(row => !row.isDisabled || row.isSelectable).map(row => row.id);
+
+ return (
+ <>
+ {selectionType === 'multiple' && 0 && newSelectedIds.length < enabledFilteredRows.length}
+ isSelected={newSelectedIds.length === enabledFilteredRows.length}
+ dropDown={{
+ items: [
+ {
+ id: 'thisPage',
+ label: 'Select this page',
+ isSelected: newSelectedIds.length < enabledFilteredRows.length && !enabledRowsRef.current.some(row => !newSelectedIds.includes(row.id)),
+ onClick: () => {
+ newSelectedIds = enabledRowsRef.current.map(row => row.id);
+ setSelectedIds(newSelectedIds)
+ }
+ },
+ {
+ id: 'allPages',
+ label: 'Select all pages',
+ isSelected: newSelectedIds.length === enabledFilteredRows.length,
+ onClick: () => {
+ newSelectedIds = enabledFilteredRows;
+ setSelectedIds(newSelectedIds)
+ }
+ },
+ {
+ id: 'clearAll',
+ label: 'Clear all',
+ isDisabled: newSelectedIds.length === 0,
+ onClick: () => {
+ newSelectedIds = [];
+ setSelectedIds(newSelectedIds)
+ }
+ }
+ ],
+ placement: 'center'
+ }} />}
+
+ )
+ },
+ formatCells: (_, row) => {
+ return (
+ <>
+ {selectionType === 'singular' && {
+ newSelectedIds = [row.id];
+ setSelectedIds(newSelectedIds);
+ onRowSelect(newSelectedIds);
+ }} />}
+ {selectionType === 'multiple' && {
+ newSelectedIds = isChecked ? [...newSelectedIds, row.id] : newSelectedIds.filter(id => id !== row.id);
+ setSelectedIds(newSelectedIds);
+ onRowSelect(newSelectedIds);
+ }} />}
+
+ )
+ }
+ }, ...cols];
+
+ setFreezeSettings(freezeSettings => {
+ if (!freezeSettings?.freezLeftColumnId) return {
+ ...freezeSettings,
+ freezLeftColumnId: SELECTION_COL_ID
+ }
+
+ return freezeSettings;
+ })
+
+ return selectionCols;
+ }
+
+ if (selectionType) {
+ managedCols = selectionCol([...managedCols]);
+ }
+
+ setTableColumns(columns => {
+ return (columns.toString() !== managedCols.toString()) ? managedCols : columns;
+ });
+
+ if (!doneLoadingRef.current) {
+ setTimeout(() => {
+ doneLoadingRef.current = true;
+ setForceRender(Date.now());
+ }, 200);
+ }
+ }, [tableRows, hasExpandableRows, tableColumns, selectedIds, managedTableColumns, selectionType, ACTION_COL, forceRender, isNotActionCol, onRowSelect])
+
+ const footerOffset = useMemo(() => {
+ const footerHight = tableFooterRef.current?.clientHeight || 0;
+ const headerHight = tableHeaderRef.current?.clientHeight || 0;
+ const availableHight = mainLayoutHight - headerHight - tableTopPosition;
+
+ return availableHight > footerHight ? 0 : (availableHight - footerHight)
+ }, [tableTopPosition, mainLayoutHight])
+
+ const showCell = (row: DsRowInner, rowIndex: number, colIndex: number): boolean => {
+ const spanIndex = Object.values(row.cells).map((cell, index) => {
+ return {
+ colIndex: index,
+ rowIndex,
+ colspan: cell.colspan,
+ rowSpan: cell.rowSpan
+ };
+ });
+
+ const cellsWithColspan = spanIndex.filter(item => item.colspan && item.colspan > 1);
+ const colSpanIsShow = cellsWithColspan.length === 0 || cellsWithColspan.some(colpanCell => colpanCell.colIndex === colIndex || colIndex < colpanCell.colIndex || colIndex > (colpanCell.colIndex + colpanCell.colspan! - 1));
+
+ const cellsWithRowspan = spanIndex.filter(item => item.rowSpan && item.rowSpan > 1);
+
+ if (cellsWithRowspan.length > 0) {
+ const colspan: Colspan = {};
+ cellsWithRowspan.forEach(cell => {
+ const { colIndex, rowIndex, rowSpan = 1 } = cell;
+ colspan[colIndex] = {
+ rowIndex,
+ rowSpan
+ };
+ });
+
+ rowspanCells.current = { ...rowspanCells.current, ...colspan };
+ }
+
+ const rowSpanCell = rowspanCells.current[colIndex];
+ const rowSpanIsShow = !rowSpanCell || rowIndex <= rowSpanCell.rowIndex || rowIndex > (rowSpanCell.rowSpan + rowSpanCell.rowIndex - 1);
+
+ return colSpanIsShow && rowSpanIsShow;
+ }
+
+ const manageColumnsWidth = useCallback((col: DsColumn, colIndex: number, origColWidth?: ColumnWidthType): ColumnWidthType | undefined => {
+ let colWidth = origColWidth;
+
+ const transformPercentToPixels = (width?: ColumnWidthType): ColumnWidthType | undefined => {
+ if (!tableContainerWidth || !width || width.unit === 'px') return width
+
+ const calculatedWidth = tableContainerWidth * width.value / 100
+
+ return {
+ unit: 'px',
+ value: calculatedWidth
+ }
+ }
+
+ //In case total column width is less than the width of the table
+ if (isNotActionCol(tableColumns[colIndex]) && tableColumns.filter(col => isNotActionCol(col)).length === colIndex + 1 && !col.isHidden) {
+ colWidth = isTotalColWidthLessThanTable ? undefined : colWidth;
+ }
+
+ const devideToCols = tableColumns.filter(col => !col.width && !col.isHidden).length;
+ const needToManageAllColumns = !showHorizontalScroll && tableContainerWidth && (tableContainerWidth < tableWidth || isAllColumnsFixedWidth) && !origColWidth?.value && !col.isHidden;
+ if (needToManageAllColumns) {
+ const newColWidth = (tableContainerWidth - totalColumnsWidth()) / (devideToCols || 1);
+
+ colWidth = {
+ value: newColWidth,
+ unit: 'px'
+ }
+
+ if (!isAllColumnsFixedWidth) {
+ setIsAllColumnsFixedWidth(true);
+ }
+ }
+
+ //Only fixed and action cols are remained
+ if (devideToCols === 0 && !col.isHidden && isNotActionCol(col)) {
+ if (columnDraggingParams?.columnId) {
+ const visibleCols = tableColumns.filter(col => !col.isHidden && isNotActionCol(col));
+ const draggedColIndex = visibleCols.findIndex(col => col.id === columnDraggingParams.columnId);
+ const visibleColIndex = visibleCols.findIndex(visibleCol => visibleCol.id === col.id);
+
+ if ((draggedColIndex === 0 && visibleColIndex === visibleCols.length - 1) || (draggedColIndex > 0 && visibleColIndex === 0)) {
+ colWidth = undefined;
+
+ setTableColumns(tableColumns => {
+ const resetCol = tableColumns.find(tableCol => tableCol.id === col.id)!;
+ resetCol.width = undefined;
+
+ return tableColumns;
+ });
+ }
+ } else if (tableContainerWidth < totalColumnsWidth()) {
+ colWidth = {
+ value: (tableContainerWidth - totalColumnsWidth(true)) / tableColumns.filter(col => !col.isHidden && col.width && isNotActionCol(col)).length,
+ unit: 'px'
+ }
+ }
+ }
+
+ return transformPercentToPixels(colWidth);
+ }, [isTotalColWidthLessThanTable, columnDraggingParams?.columnId, isAllColumnsFixedWidth, tableColumns, tableContainerWidth, tableWidth, showHorizontalScroll, totalColumnsWidth, isNotActionCol])
+
+ const jumpToPage = (pageNumber: number) => {
+ setCurrentPage(pageNumber);
+ tableContainerRef.current!.scrollTop = 0
+ }
+
+ const isLastVisibleColumn = (index: number) => {
+ return [...tableColumns].reverse().findIndex(col => !col.isHidden && isNotActionCol(col)) === index;
+ }
+
+ const onColumnStartDragg = (columnId: string, ref: RefObject) => {
+ document.body.style.cursor = 'col-resize';
+
+ const handleDragg = (event: MouseEvent) => {
+ setColumnStartDraggParams({
+ columnId,
+ origWidth: ref.current!.clientWidth,
+ move: event.movementX
+ });
+ }
+
+ const mouseup = () => {
+ document.body.style.cursor = 'initial';
+ setColumnStartDraggParams(undefined);
+ document.removeEventListener('mousemove', handleDragg);
+ document.removeEventListener('mouseup', mouseup);
+ }
+
+ document.addEventListener('mousemove', handleDragg);
+ document.addEventListener('mouseup', mouseup);
+ }
+
+ const isHeaderHidden = (): boolean => {
+ return !title && actions.length === 0 && !isSearchable;
+ }
+
+ const tableMaxHight = (): string | undefined => {
+ if (maxHeight && maxHeight < mainLayoutHight) return `${maxHeight}px`;
+ if (showHorizontalScroll) return `${mainLayoutHight - (tableTopBarRef.current?.clientHeight || 0) - (tableFooterRef.current?.clientHeight || 0) - (showPagination ? 0 : 6) - 1}px`;
+ }
+
+ const uniqueRowValues = (colId: string): string[] => {
+ const allRowsValue = tableDataSearcheFiltered.map(row => {
+ return row.cells[colId] ? row.cells[colId].value : undefined
+ });
+
+ const onlyUnique = (value: string, index: number, array: (string | undefined)[]) => {
+ return array.indexOf(value) === index;
+ }
+
+ return allRowsValue.filter((value, index) => value && onlyUnique(value, index, allRowsValue)) as string[];
+ }
+
+ const handleRowClick = (row: DsRowInner, rowIndex: number) => {
+ onRowClick(row, rowIndex);
+
+ if (row.expandable?.isExpandable) {
+ const rw = tableData.find(rw => rw.id === row.id);
+
+ if (rw) {
+ rw.isExpanded = !rw.isExpanded;
+ setTableData([...tableData])
+ }
+ }
+ }
+
+ const freezDirection = (column: DsColumn): FreezColumn | undefined => {
+ if (!freezeSettings || !isHorizontalScroll) return undefined;
+
+ const { freezLeftColumnId, freezRightColumnId } = freezeSettings;
+ const colIndex = tableColumns.findIndex(col => col.id === column.id);
+ const freezLeftColumnIdIndex = tableColumns.findIndex(col => col.id === freezLeftColumnId);
+ const freezRightColumnIdIndex = tableColumns.findIndex(col => col.id === freezRightColumnId);
+
+ let offset = 0;
+ if (freezLeftColumnIdIndex > -1 && colIndex <= freezLeftColumnIdIndex) {
+ for (let index = 0; index < colIndex; index++) {
+ const id = tableColumns[index].id;
+ offset += freezeColumns[id] ? freezeColumns[id].width : 0;
+ }
+ } else if (freezRightColumnIdIndex > -1 && colIndex >= freezRightColumnIdIndex) {
+ for (let index = tableColumns.length - 1; index > colIndex; index--) {
+ const id = tableColumns[index].id;
+ offset += freezeColumns[id] ? freezeColumns[id].width : 0;
+ }
+ }
+
+ if (freezLeftColumnIdIndex > -1 && tableColumns.findIndex(col => col.id === column.id) <= tableColumns.findIndex(col => col.id === freezLeftColumnId)) {
+ return {
+ direction: 'Left',
+ offset,
+ isLast: isNotActionCol(column) && column.id === freezLeftColumnId
+ }
+ } else if (freezRightColumnIdIndex > -1 && tableColumns.findIndex(col => col.id === column.id) >= tableColumns.findIndex(col => col.id === freezRightColumnId)) return {
+ direction: 'Right',
+ offset,
+ isLast: isNotActionCol(column) && column.id === freezRightColumnId
+ }
+
+ return undefined
+ }
+
+ return (
+
+
+
+
+
+ {tableColumns.map((col, index) => {
+ const { id, isSortable, width } = col;
+ const { columnId, order: sortedColumnOrder = 'unset' } = sortedColumn || {};
+ const colWidth = manageColumnsWidth(col, index, width);
+ const freeze = freezDirection(col);
+
+ return (
+ {
+ handleSort(order, col);
+ onSort(col, order);
+ }}
+ onColumnStartDragg={onColumnStartDragg}
+ isSortable={isSortable}
+ order={sortedColumn && columnId !== id ? 'unset' : sortedColumnOrder}
+ onMount={(_, ref) => {
+ if (col.variant === 'Action' && !col.width) {
+ col.width = {
+ unit: 'px',
+ value: ref.current?.clientWidth || 0
+ }
+ }
+
+ if (ref.current && freeze) {
+ setFreezeColumns(freezeColumns => {
+ if (freezeColumns[col.id]?.width === ref.current!.clientWidth) return freezeColumns;
+
+ return {
+ ...freezeColumns,
+ [col.id]: {
+ direction: freeze.direction,
+ width: ref.current!.clientWidth
+ }
+ }
+ })
+ }
+ }}
+ filterItemList={isNotActionCol(col) ? uniqueRowValues(col.id) : []}
+ onFilterSelect={(columnId: string, values: string[]) => {
+ setFilterdColumns(filterdColumns => {
+ if (values.length > 0) {
+ return {
+ ...filterdColumns,
+ [columnId]: values
+ }
+ } else {
+ delete filterdColumns[columnId];
+ return {
+ ...filterdColumns,
+ }
+ }
+ });
+ }}
+ selectedItemsId={(() => {
+ return filterdColumns[col.id];
+ })()}
+ />
+ )
+ })}
+
+
+
+ {tableRows.map((row, rowIndex) => {
+ const { id, isDisabled, expandable: { isExpandable, children } = {}, isExpanded } = row;
+
+ return (
+
+ isDisabled ? {} : onRowHover(row, rowIndex)}
+ onClick={() => isDisabled ? {} : handleRowClick(row, rowIndex)}
+ className={_Classes('rowHeader', { isSelected: selectedIds.includes(id), isDisabled, isExpandable })}>
+ {tableColumns.map((col, colIndex) => {
+ const cell = row.cells[col.id];
+ const { className, value, formatCell } = cell || {};
+ const isShowCell = showCell(row, rowIndex, colIndex);
+ const { formatCells, width } = col;
+ const colWidth = manageColumnsWidth(col, colIndex, width);
+ const freeze = freezDirection(col);
+
+ return (
+ isShowCell ? formatCell(value) : formatCells ? () => formatCells(cell, row, rowIndex) : undefined} /> : undefined
+ )
+ })}
+
+ {isExpandable &&
+ !col.isHidden).length}>
+ {children}
+
+ }
+
+ )
+ })}
+
+
+ {tableDataFiltered.length === 0 &&
+ {noDataText || 'No Data'}
+
}
+
+
+
,
+ showHorizontalScroll: boolean
+}
+
+const DsTableFooter = forwardRef(({
+ scrollerRef,
+ bottomOffset,
+ tableWidth,
+ showHorizontalScroll,
+}: DsTableFooterProps, ref) => {
+ return (
+
+ {showHorizontalScroll &&
}
+
(({
typographyVariant={typographyVariant}
className={`chipDropItem ${className}`} />
}}
- />}
+ />}