Web: Components: Table: fixed header styles
This commit is contained in:
parent
bfa7f75eb2
commit
b957b48c4e
@ -6,7 +6,6 @@ const HeaderStyles = css`
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
width: 79%;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
`;
|
||||
|
||||
@ -96,6 +95,7 @@ const StyledTableRow = styled.div`
|
||||
`;
|
||||
|
||||
const StyledTableCell = styled.div`
|
||||
padding-right: 8px;
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
|
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import { StyledTableCell } from "./StyledTableContainer";
|
||||
|
||||
const TableCell = (props) => {
|
||||
const TableCell = ({ className, forwardedRef, ...rest }) => {
|
||||
return (
|
||||
<StyledTableCell
|
||||
className="table-container_cell"
|
||||
ref={props.forwardedRef}
|
||||
{...props}
|
||||
className={`${className} table-container_cell`}
|
||||
ref={forwardedRef}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -5,6 +5,7 @@ import PropTypes from "prop-types";
|
||||
const TableContainer = (props) => {
|
||||
return (
|
||||
<StyledTableContainer
|
||||
id="table-container"
|
||||
className="table-container"
|
||||
ref={props.forwardedRef}
|
||||
{...props}
|
||||
|
@ -23,7 +23,7 @@ class TableHeader extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//this.onResize();
|
||||
this.onResize();
|
||||
window.addEventListener("resize", this.throttledResize);
|
||||
}
|
||||
|
||||
@ -82,12 +82,16 @@ class TableHeader extends React.Component {
|
||||
onResize = () => {
|
||||
const { containerRef } = this.props;
|
||||
|
||||
const container = containerRef.current
|
||||
? containerRef.current
|
||||
: document.getElementById("table-container");
|
||||
|
||||
const storageSize = localStorage.getItem(TABLE_SIZE);
|
||||
const tableContainer = storageSize
|
||||
? storageSize.split(" ")
|
||||
: containerRef.current.style.gridTemplateColumns.split(" ");
|
||||
: container.style.gridTemplateColumns.split(" ");
|
||||
|
||||
const containerWidth = +containerRef.current.clientWidth;
|
||||
const containerWidth = +container.clientWidth;
|
||||
const newContainerWidth = containerWidth - 32 - 80 - 24;
|
||||
|
||||
let str = "";
|
||||
@ -119,8 +123,9 @@ class TableHeader extends React.Component {
|
||||
|
||||
str = `32px ${column} ${otherColumns} ${otherColumns} ${otherColumns} 80px 24px`;
|
||||
}
|
||||
containerRef.current.style.gridTemplateColumns = str;
|
||||
container.style.gridTemplateColumns = str;
|
||||
this.headerRef.current.style.gridTemplateColumns = str;
|
||||
this.headerRef.current.style.width = containerWidth + "px";
|
||||
|
||||
localStorage.setItem(TABLE_SIZE, str);
|
||||
};
|
||||
|
@ -42,7 +42,7 @@ const TableRow = (props) => {
|
||||
|
||||
const [iconVisible, setIconVisible] = useState(!checked);
|
||||
|
||||
const onMouseEnter = () => {
|
||||
const onMouseOver = () => {
|
||||
if (checked) return;
|
||||
setIconVisible(false);
|
||||
};
|
||||
@ -70,7 +70,7 @@ const TableRow = (props) => {
|
||||
{...selectionProp}
|
||||
{...props.style}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseOver={onMouseOver}
|
||||
>
|
||||
{iconVisible ? (
|
||||
element
|
||||
|
Loading…
Reference in New Issue
Block a user