I'm tasked to create a table that will display data from an endpoint. The table must be very responsive in that a user can "click" to remove rows or columns from the view (collapsable) and re-add them if they choose. Would you use a Table or a Grid to accomplish this task? Or maybe something entirely different? I'm using Angular 6. Thanks!
For table or grid you can either use angular material (table) https://material.angular.io/components/table/examples
Or something like bootstrap4 https://getbootstrap.com/docs/4.0/content/tables/
Both work great with angular.
for the table creation and to maintain the table you can use the AG-Grid (https://ag-grid.com) this will help you to create the table with your own customized table. Or if it's only for a table creation you can use the bootstrap tables and angular material table among that I will suggest you angular material it's more easy and simple to implement.
Related
I'd like to create a multiple rows + multiple columns view.
I think I can either use table or grid.
Which one should I use over another and why?
Summary
Grid
Using a grid makes content appear to flow more naturally on your page.
Table
A standard table.
from Semantic-UI
Explained
Grids
The CSS Grid Layout specification is one of a few new specifications
that are redefining how we approach layout for the web. Alongside
Flexbox and the Box Alignment Module it will become part of a modern
layout system for websites and web applications.
from Grid by Example
Table
Table is just a layout, and could be complex for complex views. Just think in spreadsheets. You can merge columns and rows to get your layout.
Opinion
You can use the option you want, according to your needs. But if you are looking to organize your web content, use grids; If you need to deploy data use tables.
That all depends on the requirement. for example, If you want them to maximize the use of the page; maybe for a report with multiple columns over the whole webpage and you knew beforehand on what device your page would be rendered then use a table because you can pinpoint each and every column to exact pixels.
But if the rendering device might be any device or the rendering device info is not available then use grid because it would automatically adjust to the available layout space.
I am trying to break a huge select box list into three columns and I was wondering if this is possible via display suite or any other module. The next solution is to create a web form but taking in account that I am not so experienced theming it it would be nice if I could have some reference.
What I have
What I'm trying to achieve
Thank you in advance
Solved it using Display Suite for the whole layout of the form as well as GentleSelect for the Category Selection. This is possible by just using Display Suite. I usedGentleSelect that gives a bit of better taste regarding the UI.
Hope this helps.
Which is the best way to display grid (pagination, Sorting, search & other basic functionalities) in an angular 2 web app? Kindly suggest!
Hi I want to make a list of ng-grid, angular.js, but with the format bootstrap table , someone has gotten ? Or create a table with data from ng -grid and his functionality
Try this. You will find very good example for ng-grid.
http://angular-ui.github.io/ng-grid/
Recently ng-grid has been migrated to ui-grid and they provided better UI control & user interface,
Rather than go for own customization take a look at ui-grid own customization of header, customization of row template & customization of column menu
Note
Angular ui-grid still in beta stage, its not a stable version.
Hope this could help you. Thanks.
I am trying to extend the DataGrid to allow headers for different groups of rows. However, I cannot figure out which method to extend from DataGrid that would allow me to accomplish this.
I do not want the headers to be included in the dataProvider, only the rows. I want to specify indexes to insert the headers at using a property of the custom datagrid.
Here is a quick photoshop showing what I am trying to do:
Example http://www.maclema.com/groupheaders.png
Is there any custom component already built that will do this?
If not, does anyone know how I would go about doing this?
Thanks,
Matt
You might want to check out this component:
http://code.google.com/p/flex-spreadsheet/
Another solution that I just found to this type of problem is the following
here is the demo:
http://blogs.adobe.com/aharui/SplitColumns/dg.swf
here is the discussion:
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html