The requirement is to have a custom CSS, sortable columns, global search.
A few apprehensions related to UI-grid:
The layout of UI-grid is based on divs, while that of Smart table is
like that of a normal table.
Also, if the UI-grid CSS is not used,
then many divs are to be changed to table-row and table-cell.
In my case, the UI-grid extends beyond the width of parent container.
(There is no padding/margin getting exceeded). I resorted to hiding
overflow, but it is more of a hack.
Questions related to Smart Table:
Can we have a structure similar to columnDefs to define column
attributes?
Is it less powerful than UI-grid?
Does it run into issues?
Which of these 2 tables should be used?
Take a look at AngularJS TableView
Related
So I created a global table component for my project with the Grid component of Material UI v5.
the reason for my choice is because modifying the border and border radius for the table row and footer is full of problems and it's hard to give some styles to the table element (or MUI Table component)
So far I have created a simple table with MUI Grid and now I have got 2 questions:
1- how can I make the height of the grid items of every table row equal to each other??
2- how can I add a scroll bar to a container of my grid table when the screen size is less than for example 500px?
here is what I made so far:
codesandbox
Not exactly a direct answer to your questions, but I think you are currently digging the rabbit hole.
If you need a proper table component, use DataGrid.
If you need a proper table component, but with more control (layout, etc) , use Table.
If you need a layout that behaves like a native HTML table, just use the native table itself and add CSS as you need.
the reason for my choice is because modifying the border and border radius for the table row and footer is full of problems and it's hard to give some styles to the table element
It doesn't make too much sense for a layout component like this to have a border radius defined for each row or whatever you want to do. Instead, this is likely something you will do.
<td>
<Card borderRadius={10} />
<td>
As for "full of problems", you can define styles at the table cell level, what are the problems you are referring to?
I am making a basic screen which simply shows a grid of data, but the grid can have more columns than the screen can cope with. I plan to use Bootstrap, but just for it's controls, look and feel. The page, however, does not need to scale for mobile.
A very basic example of the data I am showing looks like this:
https://jsfiddle.net/bunwt5cy/1/
So, first column is just an incrementing number, followed by a date, and then the data. The number of columns can range from 1 account, to 20. Each column (cell) then has 3 financial values (2 shown in demo) ranging from 0.00 to 99,999.99 (To show sizes required).
I'm currently using <TABLE>, but is there a better way, using bootstrap, to do this? Can it be done better with DIVs? And if I do, am I limited to 12 Divs per row? If so, that's not an option then, as my grid may have > 12 columns.
Here is an example of some rows. I'm trying to make it neater, and use 'as best as possible' best practice, but also, make pretty.
As a best practice, you should continue to use table element for such spreadsheet-like, tabular data, while using CSS to make it "pretty".
The div element according to the HTML5 specs:
The div element has no special meaning at all ...
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
In this case table is available, it is appropriate for tabular data, so in terms of best practice, you should continue using table element for such tabular data rather than div.
I'm new here and to Bootstrap so apologies for any stupidity.
In Bootstrap I'm trying to display .span4 in a row over 2 columns, this is because of page width, which should eventually nest into each other and leave no space. However with all I have tried at the moment I can still only manage to get each .span4 to lineup with the bottom-line of the longest span4 I have created. The site will eventually be dynamic and the size of the list could change frequently.
Looked at many different questions on here but no joy yet.
I have an example of my tryings here http://jsfiddle.net/joebarr/YJunh/
I think you're looking for jQuery Masonry. See for example: How can I float elements with different size in a tile or How to Create Grid/Tile View with CSS?
In case it must be CSS only, the accepted answer for the first link above ( https://stackoverflow.com/a/15320187/1449799 ) shows a good approximation.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I am working on an django application that will return what historically was a table of information:
ISSUE DESCRIPTION INITIATOR INITIATEDDATE ASSIGNEE FORECASTDATE STATUS REMARKS
That will be the entrance point for users to sort / filter, etc the list of issues.
The columns like ISSUE, DATES, NAMES are of relatively fixed width, but others can be a paragraph or more.
What is the best way to render this in HTML? As HTML Tables, lists or with a lot of CSS spans/divs?
I eventually hope to make the issues list sortable or filterable with javascript as well.
The whole argument made by the CSS purists is that you need to keep your code semantically relevant to the information it contains. What you need to show is tabular data and you use the <table> tag to do that. The only "problem" with tables is when they are used to control the layout, like making your two column layout two <td>s as opposed to two <div>s. In this case, however, tables would be adequate.
If the information you're trying to display is tabular (as it appears to be), then go with tables.
Also, see these questions for even more debate!
Tables instead of DIVs
Why not use tables for layout in HTML?
As both answers say, tabular data should be displayed using a <table> tag.
To put it into perspective, when tables are used to do layout, that is an abuse of the table tag. When div tags are used to do tabular layout, that's abuse in the opposite direction. Don't use one to do the other's job.