have the following screen design for my demo application.
Should this design be done using a <DIV> or a <TABLE>?
Note: when you click on the data row it expands (accordion like) and shows description row where you can see some description about the row as a single column which spans across the width of the table.
The menu works when user clicks on an image given in that column.
I know that a table is used only to represent tabular data.
I have the menu in last column as well as an accordion like hidden row for each data row showing the description when user clicks on the data row.
So, I am not sure whether it can be considered as part of a tabular data.
This is related to fulfilling the following web-guideline:
http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/complete-diff.html#H51
The data is going to be text apart from the menu. Each menu link performs different functionality. The accordion row is also text mostly.
Please advise here.
Thanks.
Related
I have compiled a table using CSS and HTML. After clicking on a given row of the table, I would like a small panel to appear next to the current row.
Graphic example:
I need a table as shown in the image.
The requirements are:
the header row (very first blurred row) is fixed when we start scrolling down the table
the first column is fixed when we start horizontal scrolling
additionally, as we scroll down, the colspanned rows in black color (I'll call it the row-group heading row) - "Title 1" and "Title 2" - will become fixed, below the header row, when all rows that belong to its group are in view. And when we scroll further down, and when the next group of rows come into view, the previous row-group heading row will go away and in its place (right below the fixed main header row) the row-group heading row that corresponds to the rows in current view will be fixed.
We're building a react app. We checked out: react-sticky-table, and other non-react libraries like: Stickytable and Sticky-kit.
None of them seem to be doing what we want.
Is there a JS (react or non-react and preferably non-jquery) library that does this?
If not, assuming that we get the first-row header and the first column fixed using any of the above mentioned libraries, is there a way to make the row-group heading rows fixed/static based on scrolling?
I also prefer the table be built using <table> group of elems, and not just divs. But it's not a strict requirement.
UPDATE: Just found this plugin that seems to be doing this: http://maslianok.github.io/stickyRows/multiplerows.html. It's great, but keeping this question open for pureJS or react solution.
I have worked on the same UI but it was the mixture of pure javascript and jQuery, however less concerned about the front end library, as most of them fail at certain point of requirement or amount of data.
I suggest go with your own solution I did the same it is acceptable to clients since 5 years.
1. Create a separate tables for your header and content.
2. Give each cloumn exactly same column span width. E.g. ,<colspan width="50px">
3. Place a separate table with one column in LHS.
4. Write a code in javascript which scrolls your LHS table along with your main table.
Apologies as it is hard to give working example.
I am looking to create a table of data that allows the following:
Click able rows that expand like an accordion to display text.
A filter function: when the user clicks a link at the top of the page some of the rows disappear. Ideally it would be similar to the photography portfolio pages that animate to show certain categories of pictures.
Any guidance would be welcome.
Accordion functionality can be achieved with Bootstrap's COLLAPSE feature:
http://getbootstrap.com/javascript/#collapse
Having filters would normally have to be accomplished through a database-driven application where defining characteristics are recorded as attributes in the table. My recommendation is PHP/MySQL. This presents a steep learning curve, but you can start making static pages with bootstrap right away, and even code multiple pages, one for each filter so the "filter" is actually just a hyperlink to a page that only displays those rows.
I am using datatables and wanted to represent hierarchical JSON data in a grid. I got the data to display hierarchically in the datatable through ajax, but I am having trouble with javascript implementing the expanding and collapsing of the rows.
Please take a look at this JSBin and try expanding and collapsing and you will see the issue:
http://live.datatables.net/qedufunu/1/edit
The behavior should be like any hierarchical data (like the windows explorer):
When the grid loads, it should display first level rows with the expand icon.
When the top level expand button is clicked, it should open second level rows for the same parent with an expand button (if there are 3rd level rows).
When the second level expand button is clicked, it should open the third level rows.
Please take a look and suggest any JS changes. Please feel free to modify the fiddle.
Thanks.
Okay. I fixed it myself. For folks who need a solution for nested rows in datatable, this should help immensely.
http://live.datatables.net/qedufunu/2/edit
I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.
Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.