We Keep Coding

Scrollable table with fixed header and column as well as selective fixed rows

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.

Bootstrap Collapsing Table Rows

I'm looking recommendations for something similar to a table of four columns that would collapse into a dropdown on mobile devices. My original code is a bootstrap table but the table at it's smallest size is still too big for mobile devices. I'm thinking I could collapse into a drop down because really all that needs to be seen on mobile devices is the first row which contains a clickable link to an expanded detail view.

The simplest approach may be to use two different controls - a table for bigger screens and a dropdown for smaller screens - and include both in your page.
Then hide the control that is not required based on the screen size. Since you're using Bootstrap already, look into its responsive utilities. You will find predefined CSS classes like .hidden-sm or .hidden-lg that help you with that.

Dynamically increase and decrease row height ng grid

I want to increase row height of ng-grid. For example if my cell content increase to more then 3 lines then I want to show a button and then after click on that button the row size increase and show the remaining content of the cell. I am new in angular js so kindly help me. I also try this plugin but it wont work in my case.

This will not work with ng-grid since it simulates a table by positioning divs in a grid manner. So if you try to increase the height of a row, you have to readjust the top positions of all following rows (eg. cell-like divs) which is simply not in the code.
Better look out for a table based solution like ng-table which has all the fancy features of ng-grid, like sorting, filtering, pagination etc.
Since the structure is based on the browsers native table functions you can leave the proper calculation of dynamic row heights to it's way more powerful rendering engine.
Just look around, there are more than one powerful directives for tables.

Table with vertical scroll and pages for horizontal

I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this

If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.

Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/

Dojo(x) Widgets within HTML table do not resize

I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.

You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.

Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();