Comments (13)
@realdreamer @grgp @joiel
Thanks for getting involved. I just published version 0.10.5-alpha.1
with an inbuilt fix for the issue. The solution is working pretty well in the website examples. But I would like to get your input to verify it's working for you before we publish v0.10.5
.
With this, temporary solutions like forced scrollbars in header and using css classes to change header size will slightly break the UI. The solution for those problems would be to simply remove those temporary workarounds.
Let me know your thoughts. Cheers
from window-table.
@realdreamer I've also found this issue as well.
If you simply need a quick and dirty hack to align the header columns, though, you can set the HeaderRow component to have a overflow-y: scroll;
style.
from window-table.
Or you can add to your CSS file
// mention on https://window-table.netlify.com/docz-guides-styling-styling-with-class-names
// this default classname for table header row
.table-header-row {
width : calc( 100% - 8px); // if 8px is your scroll width
}
from window-table.
Well, I'm trying to set width -8px only if the table has a scrollbar.
// for SSR need useEffect to get the document
useEffect(() => {
let tableHeader = getElementsByClassName(document.body, "table-header-row");
let tableBody = getElementsByClassName(document.body, "table-body");
if (tableBody[1]) {
if (tableBody[1].childNodes[0]) {
const rowHeight = tableBody[1].childNodes[0].offsetHeight;
const rows = arrayData.length;
const bodyHeight = rowHeight * rows; // expected total body height
const scrolly = scroll.y; // height of table
if (bodyHeight > scrolly) {
tableHeader[1].style.width = "calc(100% + -8px)"; //-8px is scroll width
}
}
}
}, [arrayData, columns]); // add more second arguments for rechecking if the table has a scrollbar or not
// IE compatible for getting ClassName
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp("(^| )" + classname + "( |$)");
var els = node.getElementsByTagName("*");
for (var i = 0, j = els.length; i < j; i++ ) {
if (re.test(els[i].className)) {
a.push(els[i]);
}
}
return a;
}
from window-table.
Hi @realdreamer
Thanks for reporting this issue.
I didn't see this issue coming as MacOs scrollbars don't occupy extra width from the table. I played with the table on Windows and acknowledge the issue. So far, the easiest way to fix this is by using @grgp s workaround. That is a simple and powerful solution.
Another possibility is to change the width of the header based on the size of the scrollbar. For example, if the scrollbar is 8px
wide, the header size would be 100%-8px
. I will make a PR and send it to you guys to review.
Thanks for getting involved
from window-table.
@joiel I liked the above one, but I'm little concerned about using direct class names instead of using ref
. I tried to pass ref
on table header
and table body
component. But, no help, incase if you've any idea please let me know.
from window-table.
@joiel @pupudu - Thank you for your input guys body
have scrollbar.
I tried the below approach, but I'm having a problem with the two table-body
elements - one is actually the dummy with the hidden state and another one with the actual data.
const tableRef = useRef(null);
const tableHeaderRef = useRef(null);
const tableBodyRef = useRef(null);
useEffect(() => {
const tableEl = tableRef.current;
const tableHeaderEl = tableHeaderRef.current;
const tableBodyEl = tableBodyRef.current;
if (tableEl && tableHeaderEl && tableBodyEl) {
const containerHeight = tableEl?.getBoundingClientRect().height;
const headerHeight = tableHeaderEl?.getBoundingClientRect().height;
const bodyHeight = tableBodyEl?.getBoundingClientRect().height;
if (containerHeight < (headerHeight + bodyHeight)) {
const scrollbarWidth = tableHeaderEl.offsetWidth - tableBodyEl.offsetWidth;
tableHeaderEl.parentElement.style.width = `calc(100% - ${scrollbarWidth}px)`;
}
}
}, [data, tableRef, tableHeaderRef, tableBodyRef]);
<WindowTable
Header={props => <thead {...props} ref={tableHeaderRef} />}
Body={props => <tbody {...props} ref={tableBodyRef} />}
Cell={CellComponent}
classNamePrefix={classNamePrefix}
columns={columns}
data={data}
id="chart-data-table"
Row={RowComponent}
width="100%"
/>
from window-table.
@pupudu I'm still facing the issues with scrollbar even with 0.10.5-alpha.1
version
from window-table.
@realdreamer That's sad. Could you give a bit more information about the issue pls?
- Do you see the same issue in the website example?
- Or is it in one of your own use cases?
In either case, it would cool if you could attach a screenshot, (and/or) provide a sandbox to reproduce the issue.
Many thanks,
from window-table.
I can see this scroll bar problem as fixed when content is more than table height, but offset when content is less than table height. Matching the sandbox.
I'm on Windows / Chrome, 0.10.5-alpha.1
version
from window-table.
I solved this by adding what @joiel said and adding a margin to last td of each row in table-body if the the tableData has less than 10 lines. I pass "marginSmallTableData" class as prop to custom Td.
.table-header-row { width: calc(100% - 12px) !important; }
.marginSmallTableData.td:last-child { margin-right: 12px; }
from window-table.
I too am seeing this issue. It sometimes works but sometimes does not. I think updating the CSS for the header row is probably the easiest work around.
from window-table.
Basically seeing that the resize width is 0 calc(100% - 0px)
despite the fact that the div containing the table rows has a scroll bar added. I can see that the widths are adjusted to be the same which implies that we haven't detected the difference in width for some reason.
from window-table.
Related Issues (20)
- Support accessibility? HOT 3
- Mantain color of selected row HOT 1
- Expand rows HOT 1
- ClassNames to elements HOT 2
- why there is a duplication of table ? HOT 2
- is there a way to have dynamic row height? HOT 1
- Is there a recommended approach for implementing infinite scrolling? HOT 1
- forwardRef warning when supplying custom row component HOT 4
- Trouble with storybook HOT 1
- Unable to scroll to row? HOT 2
- Warning: Cannot update a component (`WindowTable`) while rendering a different component (`AutoSizer`). HOT 1
- Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`AutoSizer`) HOT 5
- Double scrollbars with Bulma HOT 4
- Dynamic col widths HOT 1
- Cannot set dragImage because Row always rerenders
- Why is row="[object Object]" column="[object Object]" in all of the elements?
- Width not adjusted until screen size is changed HOT 1
- Add support for HTML5Table to accept Row as component HOT 3
- After mount, Html5Table rows start out sized correctly, but their height quickly grows too large HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from window-table.