React Bootstrap table doesn't show properly - reactjs

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

Related

React boostrap table`s responsive not working

I added a react-boostrap table component to my web site as following.But it is not responsive.
import {Table,Container, Button ,Jumbotron} from 'react-bootstrap'
<div >
<Table responsive striped bordered hover variant="dark" >
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<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>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</Table>
It`s original look is as following.
But when i decrease the screen size it look like as following(headers not showing and other details are stacked).
Can somebody show me the issue with my code

Try linking their css file from their CDN in your html file
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css">

hide/show column not working for datatable-colvis-basic using angular js

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

Datatables Responsive always hidden column regardless of viewport

I have a generic DataTable with Responsive successfully configured. What I am after is to force DataTable to have a hidden column no matter what viewport it is displayed.
I tried searching for anything that might help me here but no luck.

Found what I am trying to achieve. You gotta add class="none" to the header of column you intend to always hide.
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="none">Age</th>
<th class="none">Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
Then simply initialize datatable with the Responsive plugin
$(document).ready(function() {
$('#example').DataTable();
});

Unable to display dropdown list for table headers, getting TypeError

I am trying to display the table header list with multiple select, something like this. In this I am seeing that collection is undefined and predicator is passing, and the distinct itmes data are not displaying.
I getting following error:
angular.js:13236 TypeError: displaySetter is not a function
at StTableController.pipe (smart-table.js:163)
at StTableController.sortBy (smart-table.js:124)
at sort (smart-table.js:354)
at m.$eval (angular.js:16820)
at m.$apply (angular.js:16920)
at HTMLTableCellElement.sortClick (smart-table.js:360)
at Rf (angular.js:3398)
at HTMLTableCellElement.Qf.d (angular.js:3386)`

This might be because the st-table attribute is not configured properly. Make sure you have configured the list (that is available in ng-repeat) in st-table. In the below example, customerList is added to the st-table attribute.
<table st-table="customerList" class="table table-striped">
<thead>
<tr>
<th>Account Number</th>
<th>Customer Name</th>
<th>Address</th>
<th>City</th>
<th>state</th>
</tr>
<tr>
<th colspan="3"><input st-search placeholder="global search" class="input-sm form-control" type="search"/></th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="customer in customerList">
<td>{{customer.accountNumber}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>
</tbody>
</table>

rendering a grid from a table: "this.mainBody is undefined"

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?

Resources