I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
Related
I am trying to render my partial view inside table row (which is inside thead tag) but I`m always have the view rendered outside of the row . Here is the code:
<tr id="lineTimes">
<th> <partial name="LineTimesRow" model="Model.LineTimes" /></th>
</tr>
Quick inspection of DOM shows following:
What even more strange is that if I put this partial view inside of tbody tag then it renders just fine:
<tbody id="lineTimes">
<partial name="LineTimesRow" model="Model.LineTimes" />
</tbody>
I`m trying to investigate this for like 5 hours - without any luck. Can someone point me to the right direction? Any help will be appreciated.
Here is the whole code snippet:
<table class="table table-sm table-hover text-center arrow-nav table-line-times">
<thead class="thead-dark">
<tr>
<th>
Artikel
</th>
<th>
</th>
<th>THT</th>
<th>lotsize</th>
<th title="Incr lotsize">incr</th>
#Html.DisplayFor(model => model.ViewHeader, "WeekplanningDateHeader")
</tr>
#*<tr id="lineTimes">
<th> <partial name="LineTimesRow" model="Model.LineTimes" /> </th>
</tr>*#
</thead>
<tbody id="lineTimes">
<partial name="LineTimesRow" model="Model.LineTimes" />
</tbody>
<tbody>
#Html.EditorFor(model => model.Days)
</tbody>
<tfoot></tfoot>
</table>
EDIT:
Fixed it - the issue was in the partial itself and my lack of understanding on how table nesting works. My partial were combined of table rows (tr) elements. And because I am trying to inject it into another table row (tr element) it is just ignored because tr cannot be inside another tr just "as is" - (nested tr needs to be wrapped in table). Mystery solved!
Fixed it - the issue was in the partial itself and my lack of understanding on how table nesting works. My partial were combined of table rows (tr) elements. And because I am trying to inject it into another table row (tr element) it is just ignored because tr cannot be inside another tr just "as is" - (nested tr needs to be wrapped in table). Mystery solved!
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I’m using Bootstrap Table http://bootstrap-table.wenzhixin.net.cn/
All rows in the table are linked with data-href=.
All links work correctly after the table is loaded, but when I re-sort the table (i.e. click on "URL" column header), the links no longer work.
Any ideas how to fix it?
Here is a test code:
<table class="table" id="lst_art_adm"
data-toggle="table"
data-striped="true"
data-search="true"
data-sort-name="site"
data-sort-order="asc"
data-mobile-responsive="true"
mobileResponsive="true">
<thead>
<tr>
<th data-field="site" data-sortable="true">Site</th>
<th data-field="url" data-sortable="true">URL</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="mrow" data-href="https://google.com">
<td id="td-id-1" data-sortable="true">Google</td>
<td>google.com</td>
</tr>
<tr id="tr-id-2" class="mrow" data-href="https://yahoo.com">
<td id="td-id-2" data-sortable="true">Yahoo</td>
<td>yahoo.com</td>
</tr>
</tbody>
</table>
$(function(){
$(".mrow").on("click", function (e) {
window.location = $(this).data("href");
});
});
And the jsfiddle
I found a solution myself :)
The table must be included in a div element, i.e. class="mytable".
Then the jquery should be changed like this:
$(function(){
$(".mytable").on("click", ".table tbody tr", function()
window.location = $(this).data("href");
});
});
Then the function will found the row after re-sorting.
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
After upgrading to bootstrap 3 generating a popover on table rows has an unexpected hovering effect on the table row. Popovers don't behave correctly on table rows using table-striped style. Removal of the table-striped style is one fix but you lose that effect. Only tested in Chrome. The last working version was 2.1.1.
Bootstrap 2.2.2: http://jsfiddle.net/tomshaw/9N4fs/
Is there a way to give the popover a container to stop this effect? Or some similar technique?
<table class="table table-striped">
<thead>
<tr>
<th>Module</th>
<th>Controller</th>
<th>Action</th>
<th>Recorded</th>
</tr>
</thead>
<tbody>
<tr id="popover" data-content="Content One" title="System Information">
<td>Utilities</td>
<td>Transaction</td>
<td>Export</td>
<td>2012-12-26 11:58:10</td>
</tr>
<tr id="popover" data-content="Content Two" title="System Information">
<td>Utilities</td>
<td>Reports</td>
<td>Edit</td>
<td>2012-12-26 12:47:30</td>
</tr>
<tr id="popover" data-content="Content Three" title="System Information">
<td>Utilities</td>
<td>User</td>
<td>Edit</td>
<td>2012-12-26 12:48:27</td>
</tr>
</tbody>
</table>
// Weird table row table-striped hover effect. Broken in bootstrap
// 2.2.2 working in 2.1.1 Using selector option has same effect.
$('body').popover({placement:"top",trigger:"hover",selector:'tr[id=popover]'});
table {
margin:50px 5px 0 5px;
}
I'm not sure what behavior you are going for. When I removed the table-striped the behavior of the pop-up was the exact same. Also you are using mutliple ID tags with the same name in your tr s. I updated your example to fix a few of these things and I rearranged the popup to an area where I assumed that you wanted it. Let me know if that helps and please remember not to use multiple id's with the same name.
Here is what I did to move the popover:
Added:
.popover{
left: 0px !important;
}
Here is a working fiddle make sure you look at the changes in the HTML and the JS:
http://jsfiddle.net/9N4fs/30/