Web:Components:TableContainer: add tag ref for header cell
This commit is contained in:
parent
8e8e7564f9
commit
dd71b12fe0
@ -662,6 +662,7 @@ class TableHeader extends React.Component {
|
|||||||
sortingVisible,
|
sortingVisible,
|
||||||
infoPanelVisible,
|
infoPanelVisible,
|
||||||
showSettings,
|
showSettings,
|
||||||
|
tagRef,
|
||||||
...rest
|
...rest
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -693,6 +694,7 @@ class TableHeader extends React.Component {
|
|||||||
defaultSize={column.defaultSize}
|
defaultSize={column.defaultSize}
|
||||||
onMouseDown={this.onMouseDown}
|
onMouseDown={this.onMouseDown}
|
||||||
sortingVisible={sortingVisible}
|
sortingVisible={sortingVisible}
|
||||||
|
tagRef={tagRef}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -14,8 +14,9 @@ const TableHeaderCell = ({
|
|||||||
sorted,
|
sorted,
|
||||||
defaultSize,
|
defaultSize,
|
||||||
sortingVisible,
|
sortingVisible,
|
||||||
|
tagRef,
|
||||||
}) => {
|
}) => {
|
||||||
const { title, enable, active, minWidth } = column;
|
const { title, enable, active, minWidth, withTagRef } = column;
|
||||||
|
|
||||||
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
||||||
|
|
||||||
@ -30,7 +31,46 @@ const TableHeaderCell = ({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return withTagRef ? (
|
||||||
|
<StyledTableHeaderCell
|
||||||
|
sorted={sorted}
|
||||||
|
isActive={isActive}
|
||||||
|
showIcon={column.onClick}
|
||||||
|
className="table-container_header-cell"
|
||||||
|
id={`column_${index}`}
|
||||||
|
data-enable={enable}
|
||||||
|
data-min-width={minWidth}
|
||||||
|
data-default-size={defaultSize}
|
||||||
|
onClick={onClick}
|
||||||
|
sortingVisible={sortingVisible}
|
||||||
|
ref={tagRef}
|
||||||
|
>
|
||||||
|
<div className="table-container_header-item">
|
||||||
|
<div className="header-container-text-wrapper">
|
||||||
|
<Text fontWeight={600} className="header-container-text">
|
||||||
|
{enable ? title : ""}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
{sortingVisible && (
|
||||||
|
<IconButton
|
||||||
|
onClick={column.onIconClick ? onIconClick : onClick}
|
||||||
|
iconName="/static/images/sort.desc.react.svg"
|
||||||
|
className="header-container-text-icon"
|
||||||
|
size="small"
|
||||||
|
color={isActive ? globalColors.grayMain : globalColors.gray}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{resizable && (
|
||||||
|
<div
|
||||||
|
data-column={`${index}`}
|
||||||
|
className="resize-handle not-selectable"
|
||||||
|
onMouseDown={onMouseDown}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</StyledTableHeaderCell>
|
||||||
|
) : (
|
||||||
<StyledTableHeaderCell
|
<StyledTableHeaderCell
|
||||||
sorted={sorted}
|
sorted={sorted}
|
||||||
isActive={isActive}
|
isActive={isActive}
|
||||||
|
Loading…
Reference in New Issue
Block a user