Creating merged table cells using Twitter Bootstrap - javascript

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:

I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.

Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly

<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>

Related

How do I make an HTML table have pagination without a bootstrap?

I need to make my table have pagination. I am developing using React.js and using a simple <table> to display information that is being fetched.
The table uses mapping to dynamically grow when new information is generated through the UI. Currently, the table is just simply <table> tag that uses some CSS for styling. I would like to limit the number of rows to 10, and have pagination at the bottom for when there are more than 10 rows of data.
How can I achieve this?
<div className="app-container">
<table>
<thead>
<tr>
<th>Loan ID</th>
<th>Owner</th>
<th>Amount (R)</th>
<th>Rate (%)</th>
<th>Term (Months)</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
{Tokens.map((token) => (
<tr>
<td>{token[0]}</td>
<td>{token[1]}</td>
<td>{token[2]}</td>
<td>{token[3]}</td>
<td>{token[4]}</td>
<td>{token[5]}</td>
<td>{token[6]}</td>
</tr>
))}
</tbody>
</table>
</div>

How to show array items as a table head inline using VUE.js

I have an array with 4enter code here element. I want to show them as a table head. when i run a v-for loop the items prints element every line but i want them in one line. how can i do that ?
<thead>
<tr>
<th v-for="header in TableHeaders">
{{header}}
</th>
</tr>
</thead>

Column toggle not working when append the table rows dynamically

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");

datatables for jquery 2.1.1 to make table header as dropdown

I have a simple table like
<table>
<thead>
<tr><th>A</th><th>B</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>a1</td><td>b1</td><td>c1</td></tr>
<tr><td>a2</td><td>b2</td><td>c2</td></tr>
</tbody>
</table>
I actually wanted the thead columns to behave like buttons for sorting table ascending or descending order-wise.
I found an option of using datatables plug-in which works like this.
But I am using jquery 2.1.1 and the above plug-in isn't available for this version.
I am bit confused of how to proceed further to make such implementation with my code.
Any help will be appreciated!
"Stupid jQuery Table Sort" seems to fully support jquery 2+.
JSbin demo: http://jsbin.com/wimefeseni/1/edit?html,output
JS:
$(function(){
$("table").stupidtable();
});
HTML:
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
</tbody>
Link to plugin: http://joequery.github.io/Stupid-Table-Plugin/

Printing a table as two parts in Javascript

I should print a table, but Table doesn't fit paper. I have to print as two parts. how do I do?
Please help me.
Using the THEAD, TFOOT, and TBODY elements may solve the problem without the need for javascript. Here's a quote from the W3C documentation:
Table rows may be grouped into a table
head, table foot, and one or more
table body sections, using the THEAD,
TFOOT and TBODY elements,
respectively. This division enables
user agents to support scrolling of
table bodies independently of the
table head and foot. When long tables
are printed, the table head and foot
information may be repeated on each
page that contains table data.
Note that, if included, tfoot must come before tbody:
<table>
<thead>
<tr>
<th>Col 1 heading</th>
<th>Col 2 heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Col 1 footer</th>
<th>Col 2 footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
<tr>
<td>Col 1 data</td>
<td>Col 2 data</td>
</tr>
</tbody>
</table>
The rows in thead should be repeated at the top of the table on each page when the table is printed. Similarly, the rows in tfoot, if included, should be printed at the bottom of the table on each page when the table is printed. It's up to the user agent (e.g., the browser) to do this, but I think most modern browsers handle this properly - it's not something I've ever tested though. I'd be interested to know how you get on.

Categories

Resources