I would like to make a table with resizable columns, where the columns start out automatically sized so that they are the width they need to be to contain the text that's in that column.
I have been able to achieve these separately, but not together.
It seems that the problem is that react-table requires you to use either FlexLayout, BlockLayout, or AbsoluteLayout to be able to resize the columns, but this causes table elements to be replaced with divs. When the divs are giving an "auto" width, each one individually fits to its contents, which creates a "brick wall" of stacked divs, and not a table where all the cells in a column are aligned.
Here is an example of the brick wall effect: https://codesandbox.io/s/nervous-goldstine-s12pve?file=/src/components/DataTable.js
Commenting out line 11, which sets the column widths to 'auto', will fix the alignment issues, but the columns will be wider than they need to be. If instead you comment out line 30, the column width issue will be resolved, but the columns will no longer be resizable.
Is it possible to have both of these features?
Related
In HTML tables that are wider than the viewport, text is wrapped, so the table may fit after all. To force all fields on a single line (and possibly extend outside the viewing area) I use 'white-space: nowrap' for all TDs in the table.
This is just fine for most of my tables, but in one scenario this does not work very well. I have a table with 20 columns or so with terse column headings and content, except one, which is a description field of 256 characters maximum. Using 'nowrap' is quite right for all columns, but the description column is now a very wide column indeed.
Is there a (CSS) way to specify that fields should be as small as possible (no min-width), keep on one line (nowrap), except when longer than some maximum field width (max-with: 250px). It would be nice if it could be applied to all TDs, where a reduction of the maximum width would start other fields wrapping as well.
I have an object with keys and values that I want to represent in a responsive way so that are always next to each other, but two k/v entries are stacked because of overflow on the horizontal direction, they will be aligned like a table.
Here is an example of what I am trying to accomplish:
This looks close to what I want, but does not account for the content size. max-content does not work
This also touches on it but recommends flex instead, but flex rows are all calculated independently so that rules that out.
I have a series of buttons that I want to appear in columns at the bottom of my QML page. The number of columns across should depend on the width of the window, as the window width increases I want more columns to be added. (And fewer rows as a result as components are pulled up to the previous line)
This is sort of like a Flow component, but I want the items to appear in columns, evenly spaced across the page, in rows and columns (columns centered vertically, at the bottom of the page). Sort of like GridLayout.
I can't figure out what QML component(s) to use to achieve this.
I think what you're looking for is a GridView. See the layout documentation.
I'm not positive, but based on your description I think you would just need to set the flow property to GridView.FlowTopToBottom.
I'm new to Flexbox, Exponent, and React Native, so I'm not certain if I'm doing this correctly. Any help you can provide would be appreciated and I've provided a snack below that could be used as a starting point.
My screen has a header that's 40px tall at the top and a tab bar that's 40px tall on the bottom.
Between them, I'd like to have a full-width, full-height column that has rows of content with charts on the left, and a header (Billing, Budget, Labor) to the right of the chart with variable number of rows of data beneath the header. These rows have a key that's left-aligned (Invoiced, Not Invoiced, Total, etc.) and a value that's right-aligned (500.00, 250.00, 750.00, etc.).
Because the number of rows of data vary (3, 4, 3, etc.), I don't want to hard-code the heights of each chart row. I also don't want these rows to stretch/grow to the height of the center column, but allow for whitespace beneath them).
How can I build this so that:
1. Rows don't fill the height of the center column, but align on the top and leave whitespace below.
2. Charts are left-aligned next to their data.
3. Data figures/values (e.g., 500.00) are right aligned next to their keys (e.g., Invoiced).
Any help would be amazing. If you could provide a snack.expo.io, that'd be even better! Here's a rough example of what I mean, but you can see that the rows are stretching to the height (so there's a lot of wasted space and no empty space at the bottom) and the key/values in the data aren't justified so the key is on the left and the value is right-aligned.
https://snack.expo.io/HknEsZ5uz
I updated a few lines, does this look better? https://snack.expo.io/S1cF5bsdG
flex: 1 allows a view to fill all space available, so if you have two views on the same level of a hierarchy with flex: 1, both views split all vertical space equally. Read more: https://facebook.github.io/react-native/docs/layout-props.html#flex
I have a table with a varying number of rows and columns and I'd want to adjust the size of the table so that there is no extra white space.
What I've tried to do is:
myTable.setSizeAdjustPolicy(QtWidgets.QAbstractScrollArea.AdjustToContentsOnFirstShow)
This works well but if the window is fixed or there are too many rows to show. Then suddenly there will be scrollbars that appear and block the view of some of the table data. I would want the scrollbars to be to the side of the table and not on top it.