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>)
)}
Related
This question already has answers here:
Angular many rows grid performance in Chrome browser
(2 answers)
Closed 4 years ago.
I have a problem with Angular 6 performance issue. In the page there is a large table which has 100 rows and each row has 100 columns. Then this page is kind of laggy when I trying to use libraries like ng-select or ng-bootstrap datepicker, etc. Even if those libraries has no data exchange with the table. Which means even if the ng-select is just embedded in the HTML and has no data filled, the open and close of the ng-select drop down is laggy, takes about 0.5 sec to load. Same with other libraries. When I reduce the table to 10 rows, the lagging issue is improved significantly. Why does this happen?
Another observation is that when I use native tags of the HTML such as select option, it is not laggy at all, it react instantly. How to improve the performance in my situation? Thanks!
Code is basically something like this.
app-component:
<ng-select></ng-select>
<row-component *ngFor="let basket of baskets"></row-component>
row-component:
<div *ngFor="let apple of apples">
blah blah blah
</div>
It could also just be an issue of how many DOM elements that are being created and displayed on the page. You could try and use row virtualization which only renders rows that are displayed on the screen.
The fact that using ng-select makes the website more laggy than native html tags makes me think that the additional event listeners from the angular components have also decreased the performance of your webpage.
Ag-Grid has a great article about how they optimized displaying entries in a table. https://www.ag-grid.com/ag-grid-performance-hacks/
Do you use any library for the table like Angular Material?
One possible (and very common) solution is virtual scrolling:
https://material.angular.io/cdk/scrolling/overview#virtual-scrolling
There are a couple of things you may want to consider:
First, do you need to display all 100 columns at once? Is it possible for you to break up the columns into more manageable chunks, and maybe use a tabbed interface (Something like the Angular Bootstrap Tabset https://ng-bootstrap.github.io/#/components/tabset/examples) and group related columns into tabs to reduce the amount of columns you have to display on one page.
Second, there will be a performance issue when you get over a certain number of rows, which is where paging the data would be a good option (again, maybe look at Bootstrap paging https://ng-bootstrap.github.io/#/components/pagination/examples). You can set a hard limit - maybe 40 rows per page, or set the row limit dynamically by getting the browser window size, subtracting the amount of space you need for menus etc., and dividing the rest by the row height to determine how many rows will fit in the space you have available, and use that as your page size. This way you'll always only have to display a subset of the columns, and only as many rows as will fit on the screen without scrolling, and you should find your performance improves dramatically.
Basically I'm trying to create a sort of chessboard, several smaller squares into a bigger square. I managed to do this in vanilla JS but cant seem to find a solution on how I could transition this to AngularJS. In vanilla JS I basically used a cell ( small square in form of a div ) as a template, made a for loop where I appended the cells to the parent bigger square.
Any ideas ?
Appreciate the help.
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.
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
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