We Keep Coding

Is it possible to use the style of Wikitable, including the sorting possibilities?

I would like to include to an html page a table that have the properties of the wikipedia tables: sortable, with little arrow next to the title that indicates the descending/ascending order.
Typically, in this extensive list of examples, I am looking for the simplest format:
https://en.wikipedia.org/wiki/Help:Sorting#Example
I was able to find a script to sort out my table, and I manually included the up/down arrow, but I was wondering whether one could import the script used by wikipedia pages, and then create tables using class="wikitable sortable".
Is it possible?
Here is the code to make the table:
<table class="wikitable sortable">
<tbody><tr>
<th>name
</th>
<th>data
</th>
<th>more data
</th></tr>
<tr>
<td>cats
</td>
<td>273
</td>
<td>53
</td></tr>
<tr>
<td>dogs
</td>
<td>65
</td>
<td>8,492
</td></tr>
<tr>
<td>mice
</td>
<td>1,649
</td>
<td>548
</td></tr></tbody></table>

Making one row with colspan first row of the Wordpress options page

In my WordPress options page, for creating fields I am using Fluent Framework. It is similar to Meta Box. So both of them use do_settings_fields function and the function generates the code like this:
<table class="form-table">
<tr>
<th scope="row">Header 1</th>
<td>Element 1</td>
</tr>
<tr>
<th scope="row">Header 2</th>
<td>Element 2</td>
</tr>
<tr>
<th scope="row">Header 3</th>
<td>Element 3</td>
</tr>
<tr>
<th scope="row">Header 4</th>
<td>Element 4</td>
</tr>
</table>
It looks like this:
In this table, I want to use firs row as a one row like this:
I creted a javascript file to fields/custom_html directory and hide scope with jQuery and enqueue the javascript file like this:
jQuery(document).ready(function()
{
jQuery('th[scope="row"]').first().hide();
});
But this doesn't completely solve my problem. Because I don't mind if I only use one row, but it's very problematic for multi-rows. Maybe I need to close the table tag and open a new table tag again, but I haven't been able to do this with my limited jQuery knowledge.

Merging two columns you have to use "colspan" attributes which can helpful, Here I am sharing the code for jquery.
$(document).ready(function(){
var $table_head = jQuery('tr').first();
var value = $table_head.text();
$table_head.html('<th colspan="2">'+value+'</th>');
});

To map data generated from backend to checkboxes in angular 4

I'm facing one problem!
Here all underwriter records are fetched from mysql database and shown now I want to add some records to list by using checkboxes but I dont know how to bind autogenerated data to checkboxes using "userid"and also to add it in list.
Can anyone help me?
Here I used Angular 4 for frontend development and mysql database for backend.
Here I,m sharing my angular 4 code snippet ....
////underwriter.component.html
<tr>
<td>
<table border="1" width="100%">
<tr>
<td>Application Id</td>
<td>Plan Id</td>
<td>User Id</td>
<td>Plan Name</td>
<td>Plan Type</td>
<td>Category</td>
<td>Salary</td>
<td>Dependents</td>
<td>Status</td>
<td>Sum Assured</td>
<td>Approval records</td>
</tr>
<tr *ngFor="let ud of underwriterdata" [value]="ud.user_id">
<td>{{ud.app_id}}</td>
<td>{{ud.plan_id}}</td>
<td>{{ud.user_id}}</td>
<td>{{ud.plan_name}}</td>
<td>{{ud.plan_type}}</td>
<td>{{ud.category}}</td>
<td>{{ud.salary}}</td>
<td>{{ud.dependents}}</td>
<td>{{ud.status}}</td>
<td>{{ud.sum_assured}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
</td>
</tr>
</table>
<button (click)="approveRecords()" class="button">Approve</button>

Fix the first row and the first column in a html table when scrolling

I have a table in the following form:
<table class="myTable">
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
</tbody>
</table>
Now, as the table has lots of rows and columns I would like the first row (Note that the table does NOT have a <thead> row) and the first column to be fixed when scrolling.
It is possible to use external JavaScript plugins and change the .css style but I can not modify the structure of the original table. In fact, it can only be accessed via the class selector.

Click on element to filter column in javascript (datatables)

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):
<table>
<thead>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>2</td>
</tr>
<tr>
<td>Bob</td>
<td>1</td>
</tr>
<tr>
<td>Frank</td>
<td>5</td>
</tr>
</tbody>
</table>
If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.

Use ColumnFilterWidgets or ColumnFilter.
There are examples, snippets and docs in those pages. I hope it helps.