react-restyle-components 0.4.25 → 0.4.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/src/core-components/src/components/Table/Table.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/Table.js +153 -27
- package/lib/src/core-components/src/components/Table/elements.d.ts +3 -0
- package/lib/src/core-components/src/components/Table/elements.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/elements.js +102 -76
- package/lib/src/core-components/src/components/Table/filters.d.ts +225 -8
- package/lib/src/core-components/src/components/Table/filters.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/filters.js +374 -64
- package/lib/src/core-components/src/components/Table/index.d.ts +1 -0
- package/lib/src/core-components/src/components/Table/index.d.ts.map +1 -1
- package/lib/src/core-components/src/components/Table/types.d.ts +21 -3
- package/lib/src/core-components/src/components/Table/types.d.ts.map +1 -1
- package/lib/src/core-components/src/tc.global.css +21 -2
- package/lib/src/core-components/src/tc.module.css +3 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Cf,OAAO,EAAC,UAAU,EAAc,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Cf,OAAO,EAAC,UAAU,EAAc,MAAM,SAAS,CAAC;AAiQhD,eAAO,MAAM,KAAK;;MA4wDb,MAAM,YAAY,CAAC;AAIxB,eAAe,KAAK,CAAC"}
|
|
@@ -1,13 +1,41 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React, { forwardRef, useState, useCallback, useMemo, useRef, } from 'react';
|
|
4
|
-
import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell,
|
|
4
|
+
import { TableRoot, Toolbar, ToolbarGroup, SearchInput, ToolbarButton, TableWrapper, StyledTable, TableHeader, HeaderRow, HeaderCell, TableBody, TableRow, TableCell, Checkbox, ExpandButton, ExpandedRow, ExpandedCell, TableFooter, FooterRow, FooterCell, PaginationWrapper, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, QuickJumper, EmptyState, LoadingOverlay, LoadingSpinner, EditableCell, CellEditor, ColumnTogglePanel, ColumnToggleHeader, ColumnToggleSearch, ColumnToggleList, ColumnToggleItem, } from './elements';
|
|
5
5
|
import { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
|
|
6
6
|
import { getFilterComponent } from './filters';
|
|
7
|
+
import { Tooltip } from '../Tooltip';
|
|
7
8
|
// Icons
|
|
8
9
|
const SearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "M21 21l-4.35-4.35", strokeLinecap: "round" })] }));
|
|
10
|
+
// Arrow Up Icon with configurable size
|
|
11
|
+
const ArrowUpIcon = ({ size = 14 }) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { width: size, height: size }, children: _jsx("path", { d: "M12 19V5M5 12l7-7 7 7" }) }));
|
|
12
|
+
// Arrow Down Icon with configurable size
|
|
13
|
+
const ArrowDownIcon = ({ size = 14 }) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { width: size, height: size }, children: _jsx("path", { d: "M12 5v14M5 12l7 7 7-7" }) }));
|
|
14
|
+
// Legacy triangle icons (kept for backward compatibility)
|
|
9
15
|
const SortUpIcon = () => (_jsx("svg", { viewBox: "0 0 10 10", fill: "currentColor", children: _jsx("path", { d: "M5 0L10 6H0L5 0z" }) }));
|
|
10
16
|
const SortDownIcon = () => (_jsx("svg", { viewBox: "0 0 10 10", fill: "currentColor", children: _jsx("path", { d: "M5 10L0 4h10L5 10z" }) }));
|
|
17
|
+
// Default sort caret component with arrow icons
|
|
18
|
+
const DefaultSortCaret = ({ order, }) => {
|
|
19
|
+
const getSizeConfig = () => {
|
|
20
|
+
switch (order) {
|
|
21
|
+
case 'asc':
|
|
22
|
+
return { up: 16, down: 10 };
|
|
23
|
+
case 'desc':
|
|
24
|
+
return { up: 10, down: 16 };
|
|
25
|
+
default:
|
|
26
|
+
return { up: 14, down: 14 };
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const { up, down } = getSizeConfig();
|
|
30
|
+
return (_jsxs("div", { style: {
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flexDirection: 'row',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
justifyContent: 'center',
|
|
35
|
+
gap: 2,
|
|
36
|
+
color: 'white',
|
|
37
|
+
}, children: [_jsx(ArrowUpIcon, { size: up }), _jsx(ArrowDownIcon, { size: down })] }));
|
|
38
|
+
};
|
|
11
39
|
const ChevronLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
12
40
|
const ChevronRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 18l6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
13
41
|
const ChevronsLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
|
|
@@ -25,7 +53,7 @@ const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", st
|
|
|
25
53
|
const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
|
|
26
54
|
const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
|
|
27
55
|
export const Table = forwardRef(function TableComponent(props, ref) {
|
|
28
|
-
const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = false, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, searchable =
|
|
56
|
+
const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = false, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'none', onCellEdit, exportable = true, exportFileName = 'table_export', columnToggle = false, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption,
|
|
29
57
|
// Quick configuration props
|
|
30
58
|
isDelete = false, isEditModify, isUpdate, isExport, isSelectRow, fileName, hideExcelSheet = false,
|
|
31
59
|
// Quick callbacks
|
|
@@ -81,8 +109,21 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
81
109
|
const tableRef = useRef(null);
|
|
82
110
|
// State
|
|
83
111
|
const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
|
|
112
|
+
const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
|
|
84
113
|
const [columnToggleOpen, setColumnToggleOpen] = useState(false);
|
|
85
114
|
const [columnSearch, setColumnSearch] = useState('');
|
|
115
|
+
// Filter visibility (controlled or uncontrolled)
|
|
116
|
+
const isFilterVisibilityControlled = controlledShowFilters !== undefined;
|
|
117
|
+
const showFilterRow = isFilterVisibilityControlled
|
|
118
|
+
? controlledShowFilters
|
|
119
|
+
: internalShowFilters;
|
|
120
|
+
const handleToggleFilters = useCallback(() => {
|
|
121
|
+
const newValue = !showFilterRow;
|
|
122
|
+
if (!isFilterVisibilityControlled) {
|
|
123
|
+
setInternalShowFilters(newValue);
|
|
124
|
+
}
|
|
125
|
+
onShowFiltersChange?.(newValue);
|
|
126
|
+
}, [showFilterRow, isFilterVisibilityControlled, onShowFiltersChange]);
|
|
86
127
|
const [editingCell, setEditingCell] = useState(null);
|
|
87
128
|
const [editValue, setEditValue] = useState(null);
|
|
88
129
|
const searchValue = controlledSearchValue ?? internalSearchValue;
|
|
@@ -488,7 +529,25 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
488
529
|
if (toolbar)
|
|
489
530
|
return toolbar;
|
|
490
531
|
const hasFilters = Object.keys(filters).length > 0 || searchValue;
|
|
491
|
-
return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder })] })),
|
|
532
|
+
return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), "Export CSV"] })), showFilterToggle && (_jsxs("div", { style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
|
|
533
|
+
borderBottom: '1px solid #e5e7eb',
|
|
534
|
+
paddingBottom: 8,
|
|
535
|
+
marginBottom: 4,
|
|
536
|
+
}, children: [_jsx("input", { type: "checkbox", checked: filteredToggleColumns.length > 0 &&
|
|
537
|
+
filteredToggleColumns.every((col) => !isColumnHidden(col.dataField)), onChange: (e) => {
|
|
538
|
+
filteredToggleColumns.forEach((col) => {
|
|
539
|
+
if (e.target.checked) {
|
|
540
|
+
if (isColumnHidden(col.dataField)) {
|
|
541
|
+
toggleColumn(col.dataField);
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
else {
|
|
545
|
+
if (!isColumnHidden(col.dataField)) {
|
|
546
|
+
toggleColumn(col.dataField);
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
});
|
|
550
|
+
} }), _jsx("span", { style: { fontWeight: 600 }, children: "Select All" })] }), filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField)))] })] }))] }))] }), toolbarCenter, _jsxs(ToolbarGroup, { children: [refreshable && (_jsxs(ToolbarButton, { onClick: onRefresh, children: [_jsx(RefreshIcon, {}), "Refresh"] })), printable && (_jsxs(ToolbarButton, { onClick: onPrint, children: [_jsx(PrintIcon, {}), "Print"] })), columnToggle && (_jsxs("div", { style: { position: 'relative' }, children: [_jsxs(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), children: [_jsx(ColumnsIcon, {}), "Columns"] }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Toggle Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsx(ColumnToggleList, { children: filteredToggleColumns.map((column) => (_jsxs(ColumnToggleItem, { children: [_jsx("input", { type: "checkbox", checked: !isColumnHidden(column.dataField), onChange: () => toggleColumn(column.dataField) }), _jsx("span", { children: column.text })] }, column.dataField))) })] }))] })), toolbarRight] })] }));
|
|
492
551
|
};
|
|
493
552
|
// Render pagination
|
|
494
553
|
const renderPagination = () => {
|
|
@@ -548,32 +607,99 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
548
607
|
}
|
|
549
608
|
} })] }))] }));
|
|
550
609
|
};
|
|
551
|
-
//
|
|
552
|
-
const
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
610
|
+
// Check if any columns have filters
|
|
611
|
+
const hasFilterableColumns = filterable ||
|
|
612
|
+
columns.some((c) => typeof c.filter === 'function' ||
|
|
613
|
+
c.filterComponent ||
|
|
614
|
+
c.filter === true);
|
|
615
|
+
// Should show filter row - check if there are filterable columns AND filters are visible
|
|
616
|
+
const shouldShowFilterRow = hasFilterableColumns && showFilterRow;
|
|
617
|
+
return (_jsxs(TableRoot, { ref: ref, "$bordered": bordered, "$compact": compact, className: className || classNames.root, style: { ...styles.root, ...style, position: 'relative' }, "aria-label": rest['aria-label'], "aria-labelledby": rest['aria-labelledby'], children: [loading && (_jsx(LoadingOverlay, { className: classNames.loading, style: styles.loading, children: loadingIndicator || _jsx(LoadingSpinner, {}) })), renderToolbar(), _jsx(TableWrapper, { "$maxHeight": maxHeight, "$stickyHeader": stickyHeader, className: classNames.wrapper, style: styles.wrapper, children: _jsxs(StyledTable, { ref: tableRef, "$striped": striped, "$hover": hover, "$compact": compact, role: "grid", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { "$sticky": stickyHeader, className: classNames.header, style: styles.header, children: _jsxs(HeaderRow, { className: classNames.headerRow, style: styles.headerRow, children: [rowSelection?.mode === 'checkbox' && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowSelection.columnWidth || 40, children: !rowSelection.hideSelectAll && (_jsx(Checkbox, { checked: isAllSelected, ref: (el) => {
|
|
618
|
+
if (el)
|
|
619
|
+
el.indeterminate = isIndeterminate;
|
|
620
|
+
}, onChange: handleSelectAllChange })) })), expandable && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": expandable.columnWidth || 40 })), showRowNumber && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": rowNumberWidth, children: rowNumberTitle })), visibleColumns.map((column, colIndex) => {
|
|
621
|
+
// Determine if column has a filter
|
|
622
|
+
const hasColumnFilter = typeof column.filter === 'function' ||
|
|
623
|
+
column.filter === true ||
|
|
624
|
+
column.filterComponent ||
|
|
625
|
+
column.filterRenderer;
|
|
626
|
+
// Get the filter component
|
|
627
|
+
const FilterComponent = hasColumnFilter
|
|
628
|
+
? (typeof column.filter === 'function'
|
|
629
|
+
? column.filter
|
|
630
|
+
: null) ||
|
|
631
|
+
column.filterComponent ||
|
|
632
|
+
getFilterComponent(column.filterType || 'text')
|
|
633
|
+
: null;
|
|
634
|
+
const onFilter = (value) => handleFilterChange(column.dataField, value);
|
|
635
|
+
return (_jsx(HeaderCell, { "$align": column.headerAlign || column.align || 'left', "$sortable": !!column.sort, "$compact": compact, "$width": column.width, "$minWidth": column.minWidth, "$pinned": column.pinned, "$customClass": !!column.headerClasses, className: [column.headerClasses, classNames.headerCell]
|
|
636
|
+
.filter(Boolean)
|
|
637
|
+
.join(' '), style: typeof column.headerStyle === 'function'
|
|
557
638
|
? column.headerStyle(column)
|
|
558
|
-
: column.headerStyle || styles.headerCell,
|
|
639
|
+
: column.headerStyle || styles.headerCell, role: "columnheader", "aria-sort": sort.field === column.dataField
|
|
559
640
|
? sort.order === 'asc'
|
|
560
641
|
? 'ascending'
|
|
561
642
|
: sort.order === 'desc'
|
|
562
643
|
? 'descending'
|
|
563
644
|
: 'none'
|
|
564
|
-
: undefined, children:
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
645
|
+
: undefined, children: (() => {
|
|
646
|
+
// Check visibility props (default to true if not specified)
|
|
647
|
+
const headerStyleObj = typeof column.headerStyle === 'function'
|
|
648
|
+
? column.headerStyle(column)
|
|
649
|
+
: column.headerStyle;
|
|
650
|
+
// isHeaderTitle: show title (default true, false to hide)
|
|
651
|
+
const showTitle = column.isHeaderTitle !== false &&
|
|
652
|
+
column.hideHeaderText !== true &&
|
|
653
|
+
!(headerStyleObj && headerStyleObj.fontSize === 0);
|
|
654
|
+
// isHeaderFilterComp: show filter (default true)
|
|
655
|
+
const showFilter = column.isHeaderFilterComp !== false &&
|
|
656
|
+
shouldShowFilterRow &&
|
|
657
|
+
hasColumnFilter &&
|
|
658
|
+
FilterComponent;
|
|
659
|
+
// isHeaderSort: show sort icon (default true)
|
|
660
|
+
const showSort = column.isHeaderSort !== false && column.sort;
|
|
661
|
+
return (_jsxs("div", { style: {
|
|
662
|
+
display: 'flex',
|
|
663
|
+
flexDirection: 'column',
|
|
664
|
+
gap: 4,
|
|
665
|
+
width: '100%',
|
|
666
|
+
}, children: [showTitle && (_jsx("span", { style: {
|
|
667
|
+
color: 'white',
|
|
668
|
+
fontWeight: 600,
|
|
669
|
+
fontSize: 12,
|
|
670
|
+
whiteSpace: 'nowrap',
|
|
671
|
+
cursor: showSort ? 'pointer' : 'default',
|
|
672
|
+
}, onClick: () => showSort && handleSortClick(column), children: column.headerFormatter
|
|
673
|
+
? column.headerFormatter(column, colIndex)
|
|
674
|
+
: column.headerText || column.text })), (showFilter || showSort) && (_jsxs("div", { style: {
|
|
675
|
+
display: 'flex',
|
|
676
|
+
alignItems: 'center',
|
|
677
|
+
justifyContent: 'center',
|
|
678
|
+
gap: 6,
|
|
679
|
+
width: '100%',
|
|
680
|
+
minHeight: 24,
|
|
681
|
+
}, children: [showFilter && (_jsx("div", { style: {
|
|
682
|
+
width: showSort ? '80%' : '100%',
|
|
683
|
+
minWidth: 0,
|
|
684
|
+
flexShrink: 1,
|
|
685
|
+
display: 'flex',
|
|
686
|
+
alignItems: 'center',
|
|
687
|
+
}, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) })) })), showSort && (_jsx("div", { style: {
|
|
688
|
+
width: showFilter ? '20%' : '100%',
|
|
689
|
+
minWidth: 24,
|
|
690
|
+
height: 24,
|
|
691
|
+
display: 'flex',
|
|
692
|
+
alignItems: 'center',
|
|
693
|
+
justifyContent: 'center',
|
|
694
|
+
flexShrink: 0,
|
|
695
|
+
cursor: 'pointer',
|
|
696
|
+
}, onClick: () => handleSortClick(column), children: column.sortCaret ? (column.sortCaret(sort.field === column.dataField
|
|
697
|
+
? sort.order
|
|
698
|
+
: null, column)) : (_jsx(DefaultSortCaret, { order: sort.field === column.dataField
|
|
699
|
+
? sort.order
|
|
700
|
+
: null, column: column })) }))] }))] }));
|
|
701
|
+
})() }, column.dataField));
|
|
702
|
+
}), resolvedShowActionColumn && (_jsx(HeaderCell, { "$align": "center", "$sortable": false, "$compact": compact, "$width": actionColumnWidth, children: "Actions" }))] }) }), _jsx(TableBody, { className: classNames.body, style: styles.body, children: processedData.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length +
|
|
577
703
|
(rowSelection?.mode === 'checkbox' ? 1 : 0) +
|
|
578
704
|
(expandable ? 1 : 0) +
|
|
579
705
|
(showRowNumber ? 1 : 0) +
|
|
@@ -601,11 +727,11 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
601
727
|
'function'
|
|
602
728
|
? rowSelection.selectedRowClassName(row)
|
|
603
729
|
: rowSelection?.selectedRowClassName || ''
|
|
604
|
-
: ''}`, style: { ...styles.row, ...rowStyles, ...selectedStyle }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, visibleColumns[0], 0, e), role: "row", "aria-selected": rowSelected, children: [rowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
|
|
730
|
+
: ''}`, style: { ...styles.row, ...rowStyles, ...selectedStyle }, onClick: (e) => handleRowClick(row, rowIndex, e), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, visibleColumns[0], 0, e), role: "row", "aria-selected": rowSelected, children: [rowSelection?.mode === 'checkbox' && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: _jsx(Checkbox, { checked: rowSelected, disabled: checkboxProps?.disabled, onChange: (e) => handleCheckboxChange(row, e), onClick: (e) => e.stopPropagation() }) })), expandable && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, children: isExpandable && (_jsx(ExpandButton, { "$expanded": rowExpanded, onClick: (e) => handleExpandClick(row, e), children: expandable.expandIcon ? (expandable.expandIcon({
|
|
605
731
|
expanded: rowExpanded,
|
|
606
732
|
row,
|
|
607
733
|
onExpand: () => toggleExpand(row),
|
|
608
|
-
})) : (_jsx(ExpandIcon, {})) })) })), showRowNumber && (_jsx(TableCell, { "$align": "center", "$compact": compact, style: {
|
|
734
|
+
})) : (_jsx(ExpandIcon, {})) })) })), showRowNumber && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, style: {
|
|
609
735
|
width: rowNumberWidth,
|
|
610
736
|
color: '#6b7280',
|
|
611
737
|
fontWeight: 500,
|
|
@@ -618,7 +744,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
618
744
|
const cellStyle = typeof column.style === 'function'
|
|
619
745
|
? column.style(getNestedValue(row, column.dataField), row, rowIndex, colIndex)
|
|
620
746
|
: column.style;
|
|
621
|
-
return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$pinned": column.pinned, className: cellClass || classNames.cell, style: { ...styles.cell, ...cellStyle }, onClick: () => handleCellClick(row, rowIndex, column, colIndex), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, column, colIndex, e), role: "gridcell", children: (() => {
|
|
747
|
+
return (_jsx(TableCell, { "$align": column.align || 'left', "$compact": compact, "$padding": cellPadding, "$pinned": column.pinned, className: cellClass || classNames.cell, style: { ...styles.cell, ...cellStyle }, onClick: () => handleCellClick(row, rowIndex, column, colIndex), onDoubleClick: (e) => handleCellDoubleClick(row, rowIndex, column, colIndex, e), role: "gridcell", children: (() => {
|
|
622
748
|
const editInfo = getCellEditableInfo(column, row, rowIndex, colIndex);
|
|
623
749
|
if (editInfo.isEditable &&
|
|
624
750
|
editMode !== 'none') {
|
|
@@ -631,7 +757,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
|
|
|
631
757
|
}
|
|
632
758
|
return renderCellContent(row, column, rowIndex, colIndex);
|
|
633
759
|
})() }, column.dataField));
|
|
634
|
-
}), resolvedShowActionColumn && (_jsx(TableCell, { "$align": "center", "$compact": compact, style: {
|
|
760
|
+
}), resolvedShowActionColumn && (_jsx(TableCell, { "$align": "center", "$compact": compact, "$padding": cellPadding, style: {
|
|
635
761
|
width: actionColumnWidth,
|
|
636
762
|
whiteSpace: 'nowrap',
|
|
637
763
|
}, children: actionColumnRender ? (actionColumnRender(row, rowIndex)) : (_jsxs("div", { style: {
|
|
@@ -8,6 +8,7 @@ export declare const ToolbarGroup: import("styled-components/dist/types").IStyle
|
|
|
8
8
|
export declare const SearchInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
9
|
export declare const ToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
|
|
10
10
|
$active?: boolean | undefined;
|
|
11
|
+
$variant?: "gray" | "default" | "primary" | undefined;
|
|
11
12
|
}>> & string;
|
|
12
13
|
export declare const TableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
13
14
|
$maxHeight?: string | number | undefined;
|
|
@@ -29,6 +30,7 @@ export declare const HeaderCell: import("styled-components/dist/types").IStyledC
|
|
|
29
30
|
$width?: string | number | undefined;
|
|
30
31
|
$minWidth?: string | number | undefined;
|
|
31
32
|
$pinned?: false | "left" | "right" | undefined;
|
|
33
|
+
$customClass?: boolean | undefined;
|
|
32
34
|
}>> & string;
|
|
33
35
|
export declare const SortIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
|
|
34
36
|
$active: boolean;
|
|
@@ -50,6 +52,7 @@ export declare const TableCell: import("styled-components/dist/types").IStyledCo
|
|
|
50
52
|
$align: string;
|
|
51
53
|
$compact: boolean;
|
|
52
54
|
$pinned?: false | "left" | "right" | undefined;
|
|
55
|
+
$padding?: string | undefined;
|
|
53
56
|
}>> & string;
|
|
54
57
|
export declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
|
|
55
58
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/elements.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,SAAS;eACT,OAAO;cACR,OAAO;YAelB,CAAC;AAEF,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/elements.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,SAAS;eACT,OAAO;cACR,OAAO;YAelB,CAAC;AAEF,eAAO,MAAM,OAAO,6NAcnB,CAAC;AAEF,eAAO,MAAM,YAAY,6NAKxB,CAAC;AAEF,eAAO,MAAM,WAAW,6NA6CvB,CAAC;AAEF,eAAO,MAAM,aAAa;;;YAgCzB,CAAC;AAEF,eAAO,MAAM,YAAY;;mBAER,OAAO;YAUvB,CAAC;AAEF,eAAO,MAAM,WAAW;cACZ,OAAO;YACT,OAAO;cACL,OAAO;YAuBlB,CAAC;AAEF,eAAO,MAAM,WAAW;aAA0B,OAAO;YAQxD,CAAC;AAEF,eAAO,MAAM,SAAS,uOAErB,CAAC;AAEF,eAAO,MAAM,UAAU;YACb,MAAM;eACH,OAAO;cACR,OAAO;;;;;YA4ClB,CAAC;AAEF,eAAO,MAAM,QAAQ;aAAyB,OAAO;;YAqBpD,CAAC;AAEF,eAAO,MAAM,SAAS,uOAErB,CAAC;AAEF,eAAO,MAAM,UAAU;cAAwB,OAAO;YAIrD,CAAC;AAEF,eAAO,MAAM,WAAW,sOAsBvB,CAAC;AAEF,eAAO,MAAM,YAAY,yOAcxB,CAAC;AAEF,eAAO,MAAM,SAAS,+OAAiB,CAAC;AAExC,eAAO,MAAM,QAAQ;eACR,OAAO;gBACN,OAAO;eACR,OAAO;YAuCnB,CAAC;AAEF,eAAO,MAAM,SAAS;YACZ,MAAM;cACJ,OAAO;;;YAqBlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;4BAKpB,CAAC;AAEF,eAAO,MAAM,YAAY;eAA6B,OAAO;YAwB5D,CAAC;AAEF,eAAO,MAAM,WAAW,uOAEvB,CAAC;AAEF,eAAO,MAAM,YAAY,mPAIxB,CAAC;AAEF,eAAO,MAAM,WAAW,+OAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,uOAAc,CAAC;AAErC,eAAO,MAAM,UAAU;YAAsB,MAAM;cAAY,OAAO;YAKrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAe7B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAG1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAI9B,CAAC;AAEF,eAAO,MAAM,UAAU;;YA6BtB,CAAC;AAEF,eAAO,MAAM,cAAc,yOAc1B,CAAC;AAEF,eAAO,MAAM,WAAW,6NA2BvB,CAAC;AAEF,eAAO,MAAM,UAAU,6NAkBtB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAQ1B,CAAC;AAEF,eAAO,MAAM,cAAc,6NAO1B,CAAC;AAEF,eAAO,MAAM,YAAY;cAAyB,OAAO;YAiBxD,CAAC;AAEF,eAAO,MAAM,UAAU,sOAWtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAa7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAuB9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,6NAiB9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,6NAI5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,sOAuB5B,CAAC;AAEF,eAAO,MAAM,YAAY,6NAYxB,CAAC"}
|
|
@@ -31,11 +31,12 @@ export const Toolbar = styled.div `
|
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-wrap: wrap;
|
|
33
33
|
align-items: center;
|
|
34
|
+
justify-content: space-between;
|
|
34
35
|
gap: 8px;
|
|
35
|
-
padding: 12px
|
|
36
|
-
background:
|
|
36
|
+
padding: 8px 12px;
|
|
37
|
+
background: white;
|
|
37
38
|
border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
|
|
38
|
-
|
|
39
|
+
|
|
39
40
|
@media (max-width: 640px) {
|
|
40
41
|
flex-direction: column;
|
|
41
42
|
align-items: stretch;
|
|
@@ -51,69 +52,79 @@ export const SearchInput = styled.div `
|
|
|
51
52
|
position: relative;
|
|
52
53
|
display: flex;
|
|
53
54
|
align-items: center;
|
|
54
|
-
|
|
55
|
+
|
|
55
56
|
input {
|
|
56
|
-
width:
|
|
57
|
-
height:
|
|
57
|
+
width: 220px;
|
|
58
|
+
height: 34px;
|
|
58
59
|
padding: 0 12px 0 36px;
|
|
59
|
-
border: 1px solid
|
|
60
|
+
border: 1px solid #e5e7eb;
|
|
60
61
|
border-radius: 6px;
|
|
61
|
-
font-size:
|
|
62
|
-
background:
|
|
62
|
+
font-size: 13px;
|
|
63
|
+
background: #f9fafb;
|
|
64
|
+
color: #374151;
|
|
63
65
|
transition: all 0.2s ease;
|
|
64
|
-
|
|
66
|
+
|
|
67
|
+
&:hover {
|
|
68
|
+
border-color: #d1d5db;
|
|
69
|
+
background: #ffffff;
|
|
70
|
+
}
|
|
71
|
+
|
|
65
72
|
&:focus {
|
|
66
73
|
outline: none;
|
|
67
|
-
border-color:
|
|
68
|
-
|
|
74
|
+
border-color: #9ca3af;
|
|
75
|
+
background: #ffffff;
|
|
76
|
+
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.15);
|
|
69
77
|
}
|
|
70
|
-
|
|
78
|
+
|
|
71
79
|
&::placeholder {
|
|
72
|
-
color:
|
|
80
|
+
color: #9ca3af;
|
|
81
|
+
font-size: 12px;
|
|
73
82
|
}
|
|
74
|
-
|
|
83
|
+
|
|
75
84
|
@media (max-width: 640px) {
|
|
76
85
|
width: 100%;
|
|
77
86
|
}
|
|
78
87
|
}
|
|
79
|
-
|
|
88
|
+
|
|
80
89
|
svg {
|
|
81
90
|
position: absolute;
|
|
82
91
|
left: 12px;
|
|
83
|
-
width:
|
|
84
|
-
height:
|
|
85
|
-
color:
|
|
92
|
+
width: 14px;
|
|
93
|
+
height: 14px;
|
|
94
|
+
color: #9ca3af;
|
|
86
95
|
}
|
|
87
96
|
`;
|
|
88
97
|
export const ToolbarButton = styled.button `
|
|
89
98
|
display: inline-flex;
|
|
90
99
|
align-items: center;
|
|
91
100
|
justify-content: center;
|
|
92
|
-
gap:
|
|
93
|
-
height:
|
|
94
|
-
padding: 0
|
|
95
|
-
font-size:
|
|
101
|
+
gap: 4px;
|
|
102
|
+
height: 32px;
|
|
103
|
+
padding: 0 10px;
|
|
104
|
+
font-size: 12px;
|
|
96
105
|
font-weight: 500;
|
|
97
|
-
|
|
98
|
-
background: ${({ $active }) => ($active ? tokens.primary || '#3b82f6' : 'white')};
|
|
99
|
-
border: 1px solid ${({ $active }) => ($active ? 'transparent' : tokens.outline || '#d1d5db')};
|
|
100
|
-
border-radius: 6px;
|
|
106
|
+
border-radius: 4px;
|
|
101
107
|
cursor: pointer;
|
|
102
108
|
transition: all 0.15s ease;
|
|
103
109
|
white-space: nowrap;
|
|
104
|
-
|
|
110
|
+
|
|
111
|
+
/* Default gray button style (matching existing TableBootstrap) */
|
|
112
|
+
color: white;
|
|
113
|
+
background: ${({ $active }) => ($active ? tokens.primary || '#3b82f6' : '#6b7280')};
|
|
114
|
+
border: none;
|
|
115
|
+
|
|
105
116
|
&:hover:not(:disabled) {
|
|
106
|
-
background: ${({ $active }) => ($active ? tokens.primary || '#2563eb' :
|
|
117
|
+
background: ${({ $active }) => ($active ? tokens.primary || '#2563eb' : '#5b6570')};
|
|
107
118
|
}
|
|
108
|
-
|
|
119
|
+
|
|
109
120
|
&:disabled {
|
|
110
121
|
opacity: 0.5;
|
|
111
122
|
cursor: not-allowed;
|
|
112
123
|
}
|
|
113
|
-
|
|
124
|
+
|
|
114
125
|
svg {
|
|
115
|
-
width:
|
|
116
|
-
height:
|
|
126
|
+
width: 14px;
|
|
127
|
+
height: 14px;
|
|
117
128
|
}
|
|
118
129
|
`;
|
|
119
130
|
export const TableWrapper = styled.div `
|
|
@@ -155,40 +166,37 @@ export const TableHeader = styled.thead `
|
|
|
155
166
|
`}
|
|
156
167
|
`;
|
|
157
168
|
export const HeaderRow = styled.tr `
|
|
158
|
-
background:
|
|
169
|
+
background: #6b7280;
|
|
159
170
|
`;
|
|
160
171
|
export const HeaderCell = styled.th `
|
|
161
172
|
position: relative;
|
|
162
|
-
padding: ${({ $compact }) => ($compact ? '
|
|
173
|
+
padding: ${({ $compact }) => ($compact ? '4px 6px' : '6px 8px')};
|
|
163
174
|
text-align: ${({ $align }) => $align};
|
|
164
|
-
|
|
165
|
-
font-size: 13px;
|
|
166
|
-
color: white;
|
|
167
|
-
background: #6b7280;
|
|
168
|
-
border-bottom: 2px solid ${tokens.outline || '#e5e7eb'};
|
|
169
|
-
white-space: nowrap;
|
|
175
|
+
vertical-align: middle;
|
|
170
176
|
user-select: none;
|
|
171
|
-
|
|
177
|
+
white-space: nowrap;
|
|
178
|
+
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
|
179
|
+
|
|
180
|
+
/* Default styles - only applied when no custom class */
|
|
181
|
+
${({ $customClass }) => !$customClass &&
|
|
182
|
+
css `
|
|
183
|
+
font-weight: 600;
|
|
184
|
+
font-size: 11px;
|
|
185
|
+
color: white;
|
|
186
|
+
background: #6b7280;
|
|
187
|
+
border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
|
|
188
|
+
`}
|
|
189
|
+
|
|
172
190
|
${({ $width }) => $width &&
|
|
173
191
|
css `
|
|
174
192
|
width: ${typeof $width === 'number' ? `${$width}px` : $width};
|
|
175
193
|
`}
|
|
176
|
-
|
|
194
|
+
|
|
177
195
|
${({ $minWidth }) => $minWidth &&
|
|
178
196
|
css `
|
|
179
197
|
min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : $minWidth};
|
|
180
198
|
`}
|
|
181
|
-
|
|
182
|
-
${({ $sortable }) => $sortable &&
|
|
183
|
-
css `
|
|
184
|
-
cursor: pointer;
|
|
185
|
-
padding-right: 32px;
|
|
186
|
-
|
|
187
|
-
&:hover {
|
|
188
|
-
background: #5b6570;
|
|
189
|
-
}
|
|
190
|
-
`}
|
|
191
|
-
|
|
199
|
+
|
|
192
200
|
${({ $pinned }) => $pinned &&
|
|
193
201
|
css `
|
|
194
202
|
position: sticky;
|
|
@@ -197,44 +205,47 @@ export const HeaderCell = styled.th `
|
|
|
197
205
|
`}
|
|
198
206
|
`;
|
|
199
207
|
export const SortIcon = styled.span `
|
|
200
|
-
|
|
201
|
-
right: 8px;
|
|
202
|
-
top: 50%;
|
|
203
|
-
transform: translateY(-50%);
|
|
204
|
-
display: flex;
|
|
208
|
+
display: inline-flex;
|
|
205
209
|
flex-direction: column;
|
|
206
|
-
gap:
|
|
210
|
+
gap: 1px;
|
|
207
211
|
opacity: ${({ $active }) => ($active ? 1 : 0.5)};
|
|
208
|
-
|
|
212
|
+
vertical-align: middle;
|
|
213
|
+
|
|
209
214
|
svg {
|
|
210
|
-
width:
|
|
211
|
-
height:
|
|
212
|
-
|
|
215
|
+
width: 8px;
|
|
216
|
+
height: 8px;
|
|
217
|
+
|
|
213
218
|
&:first-child {
|
|
214
|
-
opacity: ${({ $active, $direction }) =>
|
|
219
|
+
opacity: ${({ $active, $direction }) => $active && $direction === 'asc' ? 1 : 0.4};
|
|
215
220
|
}
|
|
216
|
-
|
|
221
|
+
|
|
217
222
|
&:last-child {
|
|
218
|
-
opacity: ${({ $active, $direction }) =>
|
|
223
|
+
opacity: ${({ $active, $direction }) => $active && $direction === 'desc' ? 1 : 0.4};
|
|
219
224
|
}
|
|
220
225
|
}
|
|
221
226
|
`;
|
|
222
227
|
export const FilterRow = styled.tr `
|
|
223
|
-
background: #
|
|
228
|
+
background: #6b7280;
|
|
224
229
|
`;
|
|
225
230
|
export const FilterCell = styled.td `
|
|
226
|
-
padding: ${({ $compact }) => ($compact ? '4px
|
|
231
|
+
padding: ${({ $compact }) => ($compact ? '2px 4px' : '4px 6px')};
|
|
232
|
+
vertical-align: middle;
|
|
227
233
|
border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
|
|
228
234
|
`;
|
|
229
235
|
export const FilterInput = styled.input `
|
|
230
236
|
width: 100%;
|
|
231
|
-
height:
|
|
237
|
+
height: 24px;
|
|
232
238
|
padding: 0 8px;
|
|
233
|
-
font-size:
|
|
234
|
-
border: 1px solid ${tokens.outline || '#
|
|
235
|
-
border-radius:
|
|
239
|
+
font-size: 11px;
|
|
240
|
+
border: 1px solid ${tokens.outline || '#e2e8f0'};
|
|
241
|
+
border-radius: 3px;
|
|
236
242
|
background: white;
|
|
237
|
-
|
|
243
|
+
transition: all 0.15s ease;
|
|
244
|
+
|
|
245
|
+
&:hover {
|
|
246
|
+
border-color: ${tokens.primary || '#94a3b8'};
|
|
247
|
+
}
|
|
248
|
+
|
|
238
249
|
&:focus {
|
|
239
250
|
outline: none;
|
|
240
251
|
border-color: ${tokens.primary || '#3b82f6'};
|
|
@@ -263,11 +274,20 @@ export const TableBody = styled.tbody ``;
|
|
|
263
274
|
export const TableRow = styled.tr `
|
|
264
275
|
transition: background 0.15s ease;
|
|
265
276
|
color: ${tokens.onSurface || '#1f2937'};
|
|
277
|
+
|
|
278
|
+
/* Hover effect - light gray background */
|
|
279
|
+
&:hover {
|
|
280
|
+
background: #f3f4f6 !important;
|
|
281
|
+
}
|
|
266
282
|
|
|
267
283
|
${({ $selected }) => $selected &&
|
|
268
284
|
css `
|
|
269
285
|
background: ${tokens.primary ? `${tokens.primary}10` : '#fef3c7'} !important;
|
|
270
286
|
color: ${tokens.onSurface || '#1f2937'};
|
|
287
|
+
|
|
288
|
+
&:hover {
|
|
289
|
+
background: ${tokens.primary ? `${tokens.primary}15` : '#fde68a'} !important;
|
|
290
|
+
}
|
|
271
291
|
`}
|
|
272
292
|
|
|
273
293
|
${({ $clickable, $disabled }) => $clickable &&
|
|
@@ -281,13 +301,19 @@ export const TableRow = styled.tr `
|
|
|
281
301
|
opacity: 0.5;
|
|
282
302
|
background: ${tokens.surface || '#e5e7eb'} !important;
|
|
283
303
|
color: ${tokens.onSurface || '#1f2937'};
|
|
304
|
+
|
|
305
|
+
&:hover {
|
|
306
|
+
background: ${tokens.surface || '#e5e7eb'} !important;
|
|
307
|
+
}
|
|
284
308
|
`}
|
|
285
309
|
`;
|
|
286
310
|
export const TableCell = styled.td `
|
|
287
|
-
padding: ${({ $compact }) => ($compact ? '
|
|
311
|
+
padding: ${({ $padding, $compact }) => $padding || ($compact ? '2px' : '2px')};
|
|
288
312
|
text-align: ${({ $align }) => $align};
|
|
289
|
-
border-bottom: 1px solid
|
|
313
|
+
border-bottom: 1px solid #d1d5db;
|
|
314
|
+
border-right: 1px solid #9ca3af;
|
|
290
315
|
vertical-align: middle;
|
|
316
|
+
font-size: 12px;
|
|
291
317
|
color: ${tokens.onSurface || '#1f2937'};
|
|
292
318
|
background: white;
|
|
293
319
|
|