Normally according to the documentation of Datatables I think it is necessary to give a value false to fixedHeader
.withOption('fixedHeader', false) but it does not work
Try hack using css
.inventory_related thead {
display: none;
}
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
<table class='inventory_related'>
<thead>
<th>header</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 3</td>
<td>row value 4</td>
</tbody>
</table>
Related
My goal is to create a table with React Bootstrap. To start with, I have used following example.
Now I have the following problem:
Instead of the header line of the table being above everything, it is suddenly to the left of the body. I have taken the code exactly as in the example and therefore don't know why this happens.
I use the react-bootstrap version: 1.5.2 and have imported the CSS in the class index.js like this import 'bootstrap/dist/css/bootstrap.min.css';.
And this is the code I copied from the page and inserted in my code 1:1.
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
How can I fix this and what was the problem?
Have you imported table?
import Table from 'react-bootstrap/Table'
See bottom of documentation to learn more:
https://react-bootstrap.netlify.app/components/table/#table-api
I am new to react and datatables and currently working on my final year project
I have retrieved the data and managed to populate data into datatable but don't know how to format it.
How to format datatable like this:
image
Code: https://codesandbox.io/s/ry6910y4jn?fontsize=14
Any suggestion hint would be helpful, thanks in advance.
Try giving this a shot by running the snippet below. The trick is to use rowspan.
That said, using React to render your multi-row, a naive approach might look something like:
const renderMultiRow = (code, date, rice, wheat, jaggery) => {
return (
<React.Fragment>
<tr>
<td rowspan="2">{code}</td>
<td rowspan="2">{date}</td>
<td>Stock</td>
<td>{rice.stock}</td>
<td>{wheat.stock}</td>
<td>{jaggery.stock}</td>
</tr>
<tr>
<td>Daily Use</td>
<td>{rice.use}</td>
<td>{wheat.stock}</td>
<td>{jaggery.stock}</td>
</tr>
<React.Fragment>
)
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
<table>
<thead>
<th>Code</th>
<th>Date</th>
<th>Category</th>
<th>Rice</th>
<th>Wheat</th>
<th>Jaggery</th>
</thead>
<tbody>
<tr>
<td rowspan="2">1234</td>
<td rowspan="2">2019-05-11</td>
<td>Stock</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Daily Use</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">5678</td>
<td rowspan="2">2019-05-12</td>
<td>Stock</td>
<td>30</td>
<td>30</td>
<td>30</td>
</tr>
<tr>
<td>Daily Use</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
I am trying to hide/show columns class datatable-colvis-basic but it is hiding only the table header not data. I think because my dynamic table data from angular js. what is solution for that.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th>Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td>Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
please check attached image
Put the ng-show in the element inside the table.
<table id="table_id" class="table datatable-colvis-basic" id="DataTables_Table_0 " role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr>
<th>#</th>
<th>Order Id</th>
<th>SKU</th>
<th>Vendor Name</th>
<th>Recived MP</th>
<th ng-show="numberLoad">Placed On MP</th>
<th>Placed On Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="mplist in getMpList | itemsPerPage:mpreportinfo.itemsPerPage" current-page="mpreportinfo.currentPage" total-items="total_count">
<td>{{$index + 1}}</td>
<td>{{mplist.order_id}}</td>
<td>{{mplist.sku}}</td>
<td>{{mplist.vendor_name}}</td>
<td>{{mplist.order_source_name}}</td>
<td ng-show="numberLoad">Amazon</td>
<td>{{mplist.placed_date}}</td>
</tr>
</tbody>
</table>
Here you have an example of show or hide columns with angularJS and ng-show.
I hope it helps you.
https://codepen.io/salva341/pen/oqyxKW
<table >
<thead>
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody >
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
I have a requirement to show / hide table row. This form should hide the car model initially and show only Honda and Toyota. when you click Honda, it should show all the honda's model. How to achieve this in angualr js. Please help me.
you can use ng-hide and ng-show option of angular js. It takes boolean which can be initiated no click event.
<table >
<thead ng-show="showHonda">
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody ng-hide="showHonda">
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<thead ng-show="showToyota">
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody ng-hide="showToyota">
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
and on ng-click event change the value of showHonda and showToyota accordingly.
<table ng-app="myApp" ng-controller="customersCtrl">
<thead>
<tr data-ng-click="ShowHonda=!ShowHonda">
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr data-ng-show="ShowHonda">
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr data-ng-click="ShowToyota=!ShowToyota">
<th>Toyota</th>
</trdata-ng-click>
</thead>
<tbody>
<tr data-ng-show="ShowToyota">
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
Script :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('customersCtrl', function ($scope) {
$scope.ShowHonda = false;
$scope.ShowToyota = false;
});
I have a static html table on a page and i would like to transform it to a grid; so i applied this function after loading the table:
function createTable() {
// create the grid
var grid = new Ext.ux.grid.TableGrid("tabella-colocazioni", {
stripeRows: true // stripe alternate rows
});
grid.render();
}
I got this piece of code from here: http://www.java2s.com/Code/JavaScript/Ext-JS/CreateagridwithfromanexistingunformattedHTMLtable.htm . The result is the error "this.mainBody is undefined on ext-all-debug.js" on FireBug and the grid is empty. The html code of the table is this:
<table cellspacing="0" id="tabella-colocazioni">
<thead>
<tr style="background:#eeeeee;">
<th>Colocazione</th>
<th>Frequenza</th>
</tr>
</thead>
<tbody>
<tr>
<td>plusquam patria</td>
<td>1</td>
</tr>
<tr>
<td>patria pietate</td>
<td>1</td>
</tr>
<tr>
<td>Et patria</td>
<td>1</td>
</tr>
<tr>
<td>patria prohibet</td>
<td>1</td>
</tr>
<tr>
<td>Multos patria</td>
<td>1</td>
</tr>
<tr>
<td>patria reddidit</td>
<td>1</td>
</tr>
<tr>
<td>patronum patria</td>
<td>1</td>
</tr>
<tr>
<td>patria moesta</td>
<td>1</td>
</tr>
</tbody>
</table>
What is the problem? Thank you very much.
Code looks fine. Are you sure that all includes are correct (check the Firebug Net tab)? Are you sure that the Ext version you are using is supported by the ux?