I'm building an app in which I need to use React to render a Bootstrap grid. I'm a React newb so please bear with me.
Frontend will receive N objects that need to be displayed in Boostrap columns, each in his own column. The problem is, I don't know how large is N so I don't know how many rows do I need.
Any ideas how to approach this?
Should I have just one component? Or three (Container, Row, Column)? Or something else?
First of all, consider if you even need custom components for Container, Row and Column. You can just use a div with the appropriate css class, I don't see that much value in wrapping this into a custom component. If you do decide to use a custom component, you may want to look at react-bootstrap, they already implemented these.
As for the layout, I believe you can place as many columns as you want in a row in Bootstrap layout and they will wrap as necessary (if there's more than 12), so it might be easiest to just have one row and put all the columns inside it (see Bootstrap docs).
There are different ways to approach this problem depending on the type of content that you are trying to insert into the grid.
First off, as far as columns go, Bootstrap uses a 12 column grid system. This will make your life a bit easier because you can divide 12 by the number of elements in each row. If your html is set up correctly you can use:
var numOfElements = document.getElementById('objectsWrapper').children.length;
If you're using images you may want to set a strict max-height and max-width (percentages) to restrict the images generated from messing up the grid.
Next, when the column exceeds 12 elements, you'll want to start a new .row if necessary. Create a new div, append it to your current container and set it as the currentDiv you want to add your children to.This step is important because your code needs to know which 'objectsWrapper' it's querying for children.
Wash. Rinse. Repeat.
Hope this helps.
Related
So, I am working on a feature where I need to build a table which has some fixed and some dynamic columns. As the question indicates, I am using the Ant design table component.
In short, I have a column for the actions, within this column, I am conditionally populating its cells with either 2 or 3 buttons, each triggering a process.
Now, these buttons, by default only show the icon, however, when hovering over one of them they expand and thus take more space. My objective is to find a solution where the column`s width adjusts itself (i.e. expands to the right) such that all the content fits in on the same line. Furthermore, it is a requirement that the space of the column from both left and right should be kept to a minimum as much as possible, hence, the width adjustment.
Attempts:
use the className property and attempt to use min/max-width, width with all the properties and combinations - If we use the "auto" than, unfortunately, the width will be handled by ant design
use the width property on the column object
Here are some additional imgs the first one (1) represents the column object while the second one (2) represents the table with its properties
(1)
(2)
If there is anything else you think I could provide to further clarify this issue, please let me know, also, thank you in advance for taking the time solving this issue 👩💻👩💻
I've been given a react project recently that requires me to render out a grid of DIVs. rendering the DIVs is fine but finding a way to change the amount of columns wide dynamically seems to be a challenge. I had originally thought i could apply a function that would take the amount from a text box and dynamically change the amount of rows wide in the CSS but that seems not to be possible.
My question is there a way of doing this in react or is there a library that would make this allot more convenient.(Baring in mind I wasn't aware of react a month ago.)
Rows wide
I assume you mean the number of columns here?
Can you get the length of the number of columns?
If so, something like this should help out.
`{[...Array(yourLength).keys()].map((key) => (
return(<div className={key+" key based css"}></div>)
)}
I would like to know if anybody knows a more efficient way to show / hide columns in a table powered by angularjs:
I have a large table (20+ columns, 1000000+ rows) and implemented a feature to show / hide columns based on user preferences. I do this via ng-if on every table cell. This triggers a large watcher count on initial load of the table and the angular digest cycle is going crazy with more then 4000 watchers on a single page.
My main idea to solve the performance problems was to reduce the watcher count. For this purpose I use this library that does nothing else then disabling watchers that are not in the viewport. So far so good, performance got better, but what if I would add more and more features to the table? It looks like this show / hide columns feature will be my performance bottleneck forever (and according to chromes angularJS digest timing analyses it is).
Conclusion: ng-if doesn't look like a good approach to show / hide columns because of the high watcher count and bad performance. Does anybody know a smarter solution to show / hide columns?
Edit: I already have pagination of 200 rows per page, however the problem still persists and of course I aim for a scalable solution.
You can try with CSS classes applied to the all table cells and respective header cells with different class names.
EG: column-1, column-2 ect
Define the class definitions in the angular string and place in between style tag as expression
EG:
In controllers js
$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...';
You can chnage "columnStyleDefs" as necessary when user change their preferences
In html template
<style>
{{columnStyleDefs}}
</style>
I home this may help you for the above assignment.
I'm trying to draw something that looks like the following, using jQuery / bootstrap (for spanning) and some sort of binding using angular (but angular is not really important here).
Questions:
Does anyone knows how to render something that looks like that?
I target 10 squares per row (span between 1 to 3 cubes), but I'm not sure how do I know how many rows can I fit in it. Does anyone have any idea? How can I match it to a given resolution?
How about just dynamically creating elements with percentage based dimensions using JQuery?
I would add the search box using z-index to layer it on top of the grid
Another option is to use some template based framework like Knockout to bind the grid from some data source
I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)
One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo