When re-sizing a window the columns do not automatically adjust when the custom: true setting is used.
To reproduce, use the example code below, start with a wide browser window, resize to half it's size and notice the column alignment is wrong and some columns are cut-off. Then F5/Refresh the browser window and see how it correctly adjusts itself during the re-render.
import { useTheme } from "@table-library/react-table-library/theme";
import {
Table,
Header,
HeaderRow,
HeaderCell,
Body,
Row,
Cell,
} from "@table-library/react-table-library/table";
import { IconButton } from "@mui/material";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
const list = [
{
id: "1",
name: "A",
type: 3,
code: 10,
},
{
id: "2",
name: "B",
type: 2,
code: 11,
},
{
id: "3",
name: "C",
type: 1,
code: 12,
},
];
const App = () => {
const my_theme = useTheme({
BaseRow: `
font-size: 14px;
color: white;
height: 46px;
&:focus {
z-index: 2;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
}
`,
HeaderRow: `
text-transform: uppercase;
background-color: black;
color: #90CAF9;
border-bottom: 1px solid #e0e0e0;
font-weight: 500;
`,
Row: `
background-color: #1e1e1e;
border-top: 1px solid #565656;
border-bottom: 1px solid #565656;
position: relative;
z-index: 1;
&:not(:last-of-type) {
margin-bottom: -1px;
}
&:not(:first-of-type) {
margin-top: -1px;
}
&:hover {
z-index: 2;
color: white;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
},
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
background-color: #3d4752;
color: white;
font-weight: normal;
z-index: 2;
border-top: 1px solid #177ac9;
border-bottom: 1px solid #177ac9;
}
`,
BaseCell: `
border-top: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
&:not(.stiff) > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:nth-of-type(1) {
padding-left: 8px;
min-width: 42px;
width: 42px;
div {
width: 100%;
}
}
&:nth-of-type(2) {
min-width: 100px;
width: 100px;
}
&:nth-of-type(3) {
flex: 1;
}
&:nth-of-type(4) {
text-align: center;
max-width: 100px;
}
&:last-of-type {
padding-left: 0px;
text-align: center;
width: 32px;
min-width: 32px;
max-width: 32px;
}
`,
});
return (
<Table data={{ nodes: list }} theme={my_theme} layout={{ custom: true }}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell />
<HeaderCell resize>NAME</HeaderCell>
<HeaderCell resize>TYPE</HeaderCell>
<HeaderCell>CODE</HeaderCell>
<HeaderCell />
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item}>
<Cell>
<IconButton size="small">
<InfoOutlinedIcon
color="info"
sx={{ fontSize: 16, verticalAlign: "middle" }}
/>
</IconButton>
</Cell>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.code}</Cell>
<Cell>
<IconButton size="small">
<InfoOutlinedIcon
color="info"
sx={{ fontSize: 16, verticalAlign: "middle" }}
/>
</IconButton>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};
export default App;
When re-sizing a window the columns do not automatically adjust when the
custom: truesetting is used.To reproduce, use the example code below, start with a wide browser window, resize to half it's size and notice the column alignment is wrong and some columns are cut-off. Then F5/Refresh the browser window and see how it correctly adjusts itself during the re-render.