I am currently working on creating a table with React Table
I would like to have the headers vertically rotated, so they take up less horizontal space on my screen.
The only solutions I came across were setting the header width and height on pixels, but this would make it so that it wouldn't resize with different text lengths.
Would there be a better way to achieve this? Added the following image to give an idea of expected result.
I got it to work using the following answer!
I applied the verticalTableHeader class to the header and it is still responsive to variable headers.
Thank you!
Related
I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.
This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.
The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.
Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!
My demo here:
https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx
p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.
Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx
It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.
here is a much simpler solution with the new react-virtual version
the idea is to call measureElement on img onLoad
Sorry for no code sample, I can try to get a small sample at some point. But hoping someone has seen this behavior before.
I have a DHTMLxGrid (3.0) that was created from an HTML table. The column widths are set using grid.setColumnWidthsP. When you click on the header to sort the columns, it continually expands the widths of most of the columns. If I remove the setColumnWidthsP and allow the grid to calculate the widths, it works fine. Another issue that might be tied to it, the sort image never appears. Again both items work fine if the column widths are not set by percentages.
Please, check width of your HTML table. if it has the relative sizes it may expand to the parent.
If the problem still occurs for you please, provide any kind of snippet or a complete demo, where the problem can be reconstructed.
You can also try to create a snippet here:
https://snippet.dhtmlx.com/5/
I know it is possible to use grid's summary plugin and dock it to the bottom or top of the grid (underneath the header part), however I was wondering if it is possible and how would one go about putting the summary right above the grid headers..
Thanks.
Evan Trimboli gave the correct hint: You can adjust the weight of the summaryBar. This does not take immediate effect at runtime, so to enforce the new weight being used, you will have to call moveDocked:
panel.down('[itemId=summaryBar]').setWeight(99);
panel.moveDocked(panel.down('[itemId=summaryBar]'), 'top');
https://fiddle.sencha.com/#fiddle/1g4c
A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.