I am trying to apply cell-level styling to a table with ng-reapt and ng-class.
This is what I am trying to do:
<tr ng-repeat="transaction in transactionsArr" class="no-top-border">
<td ng-class="{{transaction.cellstyle}}">{{transaction.Reason}}</td>
<td class="align-right">{{transaction.account}}</td>
<td class="align-right">{{transaction.Amount| number:0}}</td>
<td class="align-right">{{transaction.Balance| number:0}}</td>
</tr>
However I am getting errors with this.
I have looked at this question but it is not working.
Is this not possible to apply specific styling each entry with ng-repeat?
Thank you.
Related
I've been looking at the docs between react-table and Ant Design's table element. It seems that Ant design is a bit opinionated in regards to allowing the developer freedom to add props to either the <table>, <thead>, or <tbody>.
React-table is a headless UI library which provides the developer the React hooks to use with our own UI elements, but my problem at the moment is being able to send those hooks into the core UI elements of AntD's Table element.
Has anyone ever had a problem similar to this? If so, what were your workarounds?
I do not want to resort to taking out chunks of source code from both react-table and Ant Design to eventually building out my own react-table/AntD table hybrid of a solution.
The ugliest and the easiest way would be to just use classNames extracted from Table component. You will loose the features of AntD Tables, but I assume, it is what you're looking for.
const SampleTable = () => {
return (
<>
<table style={{ tableLayout: "auto" }}>
<colgroup></colgroup>
<thead className="ant-table-thead">
<tr>
<th className="ant-table-cell">Name</th>
<th className="ant-table-cell">Age</th>
</tr>
</thead>
<tbody className="ant-table-tbody">
<tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">
<a>John Brown</a>
</td>
<td className="ant-table-cell">21</td>
</tr>
<tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">
<a>Jim Green</a>
</td>
<td className="ant-table-cell">21</td>
</tr>
<tr className="ant-table-row ant-table-row-level-0">
<td className="ant-table-cell">
<a>Joe Black</a>
</td>
<td className="ant-table-cell">21</td>
</tr>
</tbody>
</table>
</>
);
};
How can I use css selector nth-child in a freemarker template? I want to draw a vertical line down the middle of a table of four columns.
Although as ddekany says it's much better to do it via CSS you can do something like this using freemarker:
<table>
<#list rows as row >
<tr>
<td></td>
<td style="border-right:1px solid black"></td><#-- or class="bordered"-->
<td></td>
<td></td>
</tr>
</#list>
</table>
I have a list of mails which I want to show in a grid (<table>). Some of these mails have attachments. For their corresponding rows, I would like to show an attachment icon in the attachment column. For rest, it should be empty.
JsFiddle: http://jsfiddle.net/6s4Z5/
My template is as follows:
<table id="resultTable">
<thead>
<tr>
<th ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments'">
{{schema.columns[columnId].displayText}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in results.mails">
<td ng-repeat="columnId in schema.columnOrder">
<img src="icon_attach.png" ng-if="columnId == 'hasAttachments' && row.hasAttachments">
<span ng-if="columnId != 'hasAttachments'" >{{ row[columnId] }}</span>
</td>
</tr>
</tbody>
</table>
where schema.columnOrder is an array of columnIds to be shown in the table.
This template is working but is this the best way to implement this? Moreover, I have to add an extra <span> for ng-if statement. Can that also be removed?
You pretty much can change it to something like:
<span ng-if='your check'><img src=''/>{{row[columnId}}</span>
You could set (in the controller) the value of the column hasAttachments to be the image you want to display there.
Folks I am using a simple ng-repeat directive to display data in table.
However when the directive renders, the first column takes up all the space and dis-figures the table.
Take a look at the plnkr here :
http://plnkr.co/edit/Hahh4uyQ130zOS8noC3D
please focus on the file layout.html
<table>
<thead>
<tr ng-repeat="element in header" class="header-cells" style="width:{{element.width}}px">
<th drop-down-sort-menu>{{element.column}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="element in body">
<td ng-repeat="h in header" row="{{$parent.$index}}" col="{{$index}}" style="width:{{element.width}}px">{{element[h.column]}}
</td>
</tr>
</tbody>
</table>
I am sure it's something minor. any clues
I believe you problem is that for the headers, you have 4 TRs with only one TH, as opposed to one TR with 4 THs. For this reason, the cells on your headers are not matching the cells on your body.
Do the first ng-repeat at the TH level.
Give it a try and let me know.
Since examples always tell more then just words here is what I would like to do in another language
<tr>
<c:forEach items="${items}" var="item">
<td>...</td>
<td>...</td>
<td>...</td>
<c:if test="${item.showWarning}">
</tr><tr><td colspan="3">${item.warning}</td>
</c:if>
</tr>
So this will loop over a set of items and show some properties of these items. If there is a warning, a new row will be added underneath the current row in which the warning will be shown. However, how can I do this in angularJs? If I put a ng-repeat on the tr, it will stop at the first end tag of tr. I have read on some other threads that this is not very easily done, but how can it be done? And yes, I really do want to use a table. Here is my contrived example with angularjs which is obviously not working as I would like it to. Any pointers how this can be done?
JSBin example with tr-ng-repeat
Currently (1.0.7/1.1.5) you can't output data outside the ng-repeat, but version 1.2(see youtube video AngularJS 1.2 and Beyond at 17:30) will bring the following syntax(adapted to your example):
<tr ng-repeat-start="item in items">
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr ng-repeat-end ng-show="item.showWarning">
<td colspan="3">{{item.warning}}</td>
</tr>
The idea is that whatever is between -start and -end will be repeated including the -end element.
One solution that I can think of is having multiple tbody tags within the same table. Here is a discussion on the use of multiple tbody tags within the same table.
So, for your issue, you could have the following setup:
<table ng-controller="ItemController">
<thead>
<th>Name</th>
<th>Description</th>
<th>warning?</th>
</thead>
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3" style="text-align: center">Warning !!!</td>
</tr>
</tbody>
</table>
Repeat the table body as many times as there are entries for the table and within it have two rows - one to actually display the row entry and one to be displayed conditionally.
You can repeat over the tbody
<tbody ng-repeat="item in items">
<tr>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.warning}}</td>
</tr>
<tr ng-show="item.warning">
<td colspan="3">Warning !!!</td>
</tr>
</tbody>
Also you do not need to wrap the ng-show expression in {{}}, you can just use item.warning