Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Table doesn't resize correctly with layout={{ custom: true }}
See original GitHub issueWhen 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;
Issue Analytics
- State:
- Created a year ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
Tabulator fitData layout not resizing width of table
Whenever I use the layout option fitColumns, it works fine and is the full width of the image below but the columns are...
Read more >Window resize changes table layout unexpectedly · Issue #1225
I have two tables with several columns in each, but only two of the columns (Name, Author) are initially set to be displayed....
Read more >Not able to resize table when page is in full width | Confluence ...
User able to resize the table when they are in full-width page. Actual Results. User doesn't see an option to resize the table....
Read more >table-layout - CSS: Cascading Style Sheets - MDN Web Docs
The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.
Read more >Change the size of a table, column, or row in PowerPoint
To maintain the same ratio between the height and width of the table when you resize it, press and hold Shift while you...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
i love it, I’m now busy converting all my tables. I created a common theme and then used that to create styles for all my tables. I reduce the # lines tremendously. thanks!
I saw, eager to try it out. great work thanks.