here I want to generate a number in the table. but I'm stuck here, how do I create a number table in reactjs? Thanks.
expectation
but the result
My Code:
<table width="100%" cellpadding="0">
<thead>
<tr>
<th scope="col" class="p-3">No. </th>
<th scope="col" class="p-3">Kompetitor</th>
<th scope="col" class="">Jumlah Witel : 11</th>
</tr>
</thead>
<tbody>
{lists.length > 0 &&
lists.map((item, index) => (
<tr key={item.kompetitor}>
<td className="pl-3">
1.
</td>
<td width="20%" className="pl-6">
{item.kompetitor === "stroomnet"
? "Icon Net"
: item.kompetitor}
</td>
<td width="80%">
<ProgressBar
total={
lists.map((item) => Number(item.count))
// .reduce((prev, curr) => prev + curr, 0)
}
status={status}
count={Number(item.count) || 0}
percent={convertPercent(index)}
/>
</td>
</tr>
))}
</tbody>
</table>
Use the index passed on the map method to create the indexed table
Change this line
<td className="pl-3">
1.
</td>
To this
<td className="pl-3">
{index+1}.
</td>
Related
I am trying to generate a delete button for the Action column in each row that is being generated in following table using react. How can I achieve that?
<Table>
<thead>
<tr>
<th>
Id
</th>
<th>
Description
</th>
<th>
Protocol
</th>
<th>
Last Seen
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
{table.map((item) => (
<tr key={item.id}>
{Object.values(item).map((val) => (
<td>{val}</td>
))}
</tr>
))}
</tbody>
</Table>
here is the sample code
import React from "react";
const data = [1, 2, 3];
function Login() {
const deleteData = (dataId) => {
console.log(dataId);
};
return (
<>
<table>
<thead>
<tr>
<th>Id</th>
<th>Description</th>
<th>Protocol</th>
<th>Last Seen</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{data.map((val) => (
<tr key={val}>
<td>{val}</td>
<td>{"Desc"}</td>
<td>{"Prot"}</td>
<td>{"Las"}</td>
<td>
{" "}
<button onClick={() => deleteData(val)}>{"delete"}</button>
</td>
</tr>
))}
</tbody>
</table>
</>
);
}
export default Login;
There are some values returned by ngFor in Total Column. Now I wanted to add those value to get a one grandTotal. I didn't get the idea. Anyone can help me??
In below second table:
I want {{sales.Total}} values to be added and return grand total.
/*****First Table*****/
<table class="table">
<thead>
<tr>
<th scope="col">S.N</th>
<th scope="col">Items</th>
<th scope="col">Quantity</th>
<th scope="col">Rate</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sales of salesTransaction, let i = index">
<th>{{i+1}}</th>
<!-- <td mat-cell *matCellDef="let salesTransaction">{{salesTransaction.ProductName}}</td> -->
<td>{{sales.ProductName}}</td>
<td>{{sales.Quantity}}</td>
<td>{{sales.Rate}}</td>
<td>{{sales.Total}}</td>
</tr>
</tbody>
</table>
/*****Second Table*****/
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>0000</td>
</tr>
</tbody>
</table>
You need to create a method that returns grand total
getGrandTotal(): number {
return this.salesTransaction.reduce((acc, val) => acc += val.Total, 0);
}
<tr>
<th>Grand Total</th>
<td>{{getGrandTotal()}}</td>
</tr>
<table class="right-table">
<tbody>
<tr>
<th>Sub-Total</th>
<td *ngFor="let sales of salesTransaction">{{sales.Total}}</td>
</tr>
<hr class="divider">
<tr>
<th>Tax</th>
<td>Happy</td>
</tr>
<hr class="divider">
<tr>
<th>Grand Total</th>
<td>{{salesTransaction.reduce((total, value) => total += value.Total, 0)}}</td>
</tr>
</tbody>
</table>
I'm trying to get this kind of work with reactjs. But it returns error <table> cannot appear as a child of <tr>
Here is my RoomRow.js
import React from 'react'
import {Link} from 'react-router-dom'
import { formatAssetName, dailyBookings, bookingArray } from '../helpers/rooms'
// Accept the 24 hour dayHours array as the day's booking data for a room
const rowMapper = (dayHours, props) => {
let tableRow = []
// Loop through each hour from 8AM to 9PM (starting at 8AM = 0)
for (var i = 0; i < 13; i++) {
// Extract the corresponding data from the 24 hour array
let bookingData = dayHours[i + 8]
// If the data for that hour is a number (not a booking object), there is no booking
// Add a <td> element that indicates the time slot is available
if (typeof bookingData == 'number') {
tableRow.push(<td className="table__cell--available" key={bookingData}>
<Link to="/createbooking" onClick={() => {
props.onSetRoom(props.room._id)
}} className="table__link--available">
</Link>
</td>)
// If the data is an array, there are two booking objects
} else if (Array.isArray(bookingData)){
// Determine which of the two bookings comes first and second
let firstBookingData = bookingData[0].firstHalfHour ?
bookingData[0] : bookingData[1]
let secondBookingData = bookingData[0].secondHalfHour ?
bookingData[0] : bookingData[1]
tableRow.push(
<table className="table--booking--split" key={bookingData}>
<tbody>
<tr>
<td className={`table__cell`}>
<span
onClick={() => props.onShowBooking(firstBookingData)}
className={`table__cell--booked table__cell--${firstBookingData.businessUnit // Class name will show the business unit that made the booking, and whether the <td> element should be fully shaded, or half shaded (indicating a half-hour booking)
.replace(/ /g, '-')
.toLowerCase()}
`}
>
</span>
</td>
<td className={`table__cell`}>
<span
onClick={() => props.onShowBooking(secondBookingData)}
className={`table__cell--booked table__cell--${secondBookingData.businessUnit // Class name will show the business unit that made the booking, and whether the <td> element should be fully shaded, or half shaded (indicating a half-hour booking)
.replace(/ /g, '-')
.toLowerCase()}
`}
>
</span>
</td>
</tr>
</tbody>
</table>
)
// If there is a booking object, add a <td> element with custom class name to enable stlying
} else {
tableRow.push(
<td className={`table__cell`}>
<span
onClick={() => props.onShowBooking(bookingData)}
className={`table__cell--booked table__cell--${bookingData.businessUnit // Class name will show the business unit that made the booking, and whether the <td> element should be fully shaded, or half shaded (indicating a half-hour booking)
.replace(/ /g, '-')
.toLowerCase()}
${bookingData.firstHalfHour ? 'table__cell--first-half-hour' : ''}
${
bookingData.secondHalfHour ? 'table__cell--second-half-hour' : ''
}`}
>
</span>
</td>
)
}
}
return tableRow
}
const RoomRow = props => (
<tr className="table__row">
<th scope="row" className="table__cell--align-left">
<Link to="/createbooking" onClick={() => props.onSetRoom(props.room._id)} className="table__link">{props.room.name}</Link>
<ul >
{Object.keys(props.room.assets).map(
asset =>
props.room.assets[asset] && (
<li key={asset} onClick={props.onShowBooking} className="table__data--asset">{formatAssetName(asset)}</li>
)
)}
</ul>
</th>
{rowMapper(
bookingArray(dailyBookings(props.date, props.bookings)),
props
)}
</tr>
)
export default RoomRow
This is my RoomsList.js
import React from 'react'
import RoomRow from './RoomRow'
import { roomSorter } from '../helpers/sorter'
const RoomsList = props => (
<table className="table">
<tbody>
<tr className="table__row table__row--header">
<th scope="colgroup" colSpan="15" className="table__cell--header table__cell--level table__cell--align-left">
Level Eight
</th>
</tr>
<tr className="table__row table__row--subheader">
<th scope="col" className="table__cell--header table__cell--align-left">
Room
</th>
<th scope="col" className="table__cell--header">
8am
</th>
<th scope="col" className="table__cell--header">
9am
</th>
<th scope="col" className="table__cell--header">
10am
</th>
<th scope="col" className="table__cell--header">
11am
</th>
<th scope="col" className="table__cell--header">
12pm
</th>
<th scope="col" className="table__cell--header">
1pm
</th>
<th scope="col" className="table__cell--header">
2pm
</th>
<th scope="col" className="table__cell--header">
3pm
</th>
<th scope="col" className="table__cell--header">
4pm
</th>
<th scope="col" className="table__cell--header">
5pm
</th>
<th scope="col" className="table__cell--header">
6pm
</th>
<th scope="col" className="table__cell--header">
7pm
</th>
<th scope="col" className="table__cell--header">
8pm
</th>
</tr>
</tbody>
<tbody className="table__body">
{props.rooms &&
roomSorter(props.rooms, '8').map((room, i) => (
<RoomRow key={i}
key={room._id}
room={room}
bookings={room.bookings}
date={props.date === null ? new Date() : props.date}
onShowBooking={props.onShowBooking}
onSetRoom={props.onSetRoom}
/>
))}
</tbody>
<tbody>
<tr className="table__row table__row--header">
<th scope="colgroup" colSpan="15" className="table__cell--header table__cell--level table__cell--align-left">
Level Thirteen
</th>
</tr>
<tr className="table__row table__row--subheader">
<th scope="col" className="table__cell--header table__cell--width table__cell--align-left">
Room
</th>
<th scope="col" className="table__cell--header">
8am
</th>
<th scope="col" className="table__cell--header">
9am
</th>
<th scope="col" className="table__cell--header">
10am
</th>
<th scope="col" className="table__cell--header">
11am
</th>
<th scope="col" className="table__cell--header">
12pm
</th>
<th scope="col" className="table__cell--header">
1pm
</th>
<th scope="col" className="table__cell--header">
2pm
</th>
<th scope="col" className="table__cell--header">
3pm
</th>
<th scope="col" className="table__cell--header">
4pm
</th>
<th scope="col" className="table__cell--header">
5pm
</th>
<th scope="col" className="table__cell--header">
6pm
</th>
<th scope="col" className="table__cell--header">
7pm
</th>
<th scope="col" className="table__cell--header">
8pm
</th>
</tr>
</tbody>
<tbody className="table__body">
{props.rooms &&
roomSorter(props.rooms, '13').map((room, i) => (
<RoomRow key={i}
key={room._id}
room={room}
bookings={room.bookings}
date={props.date === null ? new Date() : props.date}
onShowBooking={props.onShowBooking}
onSetRoom={props.onSetRoom}
/>
))
}
</tbody>
</table>
)
export default RoomsList
The error is
index.js:2177 Warning: validateDOMNesting(...): <table> cannot appear as a child of <tr>.
in table (at RoomRow.js:36)
in tr (at RoomRow.js:90)
in RoomRow (at RoomsList.js:61)
in tbody (at RoomsList.js:58)
in table (at RoomsList.js:6)
How can I fix this error?
The error is explicite. You cannot nest tables. However you can simulate it using colspan and rowspan.
Example:
<table border="1" cellpadding="5">
<tr>
<td rowspan="2">table cell</td>
<td>sub table cell</td>
<td>sub table cell</td>
</tr>
<tr>
<td>sub table cell</td>
<td>sub table cell</td>
</tr>
<tr>
<td>table</td>
<td colspan="2">table cell</td>
</tr>
<tr></tr>
</table>
Natively in react there is not but you may want to look into this https://www.npmjs.com/package/react-nested-table or https://react-table.js.org/#/story/readme
I am trying to implement a collapsing row in my smarttable. This is a row that is only visible once the user wants to show some more detail. This is what it looks like now:
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<input type="checkbox" ng-model="show"/> {{show}}
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
<tr ng-show="show">
<td>hallo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="20" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
Is there a way of displaying a collapsing detailrow for this table?
plunkr ref:http://plnkr.co/edit/8lSx2v?p=preview
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20">#</th>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="row in displayed">
<td>
<button ng-if="row.expanded" ng-click="row.expanded = false" class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
<button ng-if="!row.expanded" ng-click="row.expanded = true" class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
</td>
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
</tr>
<tr ng-if="row.expanded" ng-repeat-end="">
<td colspan="2">
<b>Balance<br /></b>
</td>
<td colspan="3" st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-left">
<div st-items-by-page="5" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
you can call a function with ng-change, and in there you expand the displayd array.
like I did in the plunker:
var limitVers = [];
for (var j = 0; j < 50; j++) {
limitVers.push(createRandomItem());
}
var addedItems = [];
for (var k = 0; k < 20; k++) {
addedItems.push(createRandomItem());
}
var expaVers = limitVers.concat(addedItems);
$scope.displayed = limitVers;
$scope.update = function(show){
show ? $scope.displayed = expaVers : $scope.displays = limitVers;
}
I have this table.I have details on every row and my idea is when user click on that details to expend another row below that row but problem is that it always expand at the bottom of page.I need to expand below specific row where i click.Any suggestion? This is my html for that table :
<div class="table-layout clean-table">
<table class="table responsive-table">
<thead>
<tr>
<th>#Translator.Translate("STATUS")</th>
<th>#Translator.Translate("ID_TICKET_NUMBER")</th>
<th>#Translator.Translate("TICKET_TIME")</th>
<th>#Translator.Translate("PAYIN_AMOUNT")</th>
<th>#Translator.Translate("PAYOUT_AMOUNT")</th>
<th>#Translator.Translate("TICKET_DETAIL")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tickets in GetAllTickets">
<th><img ng-src="~/Content/img/Icons/{{tickets.Status | lowercase}}.png" /></th>
<th>{{tickets.Pin}}</th>
<th>{{tickets.TimeCreated | date: 'dd.MM.yyyy - hh:mm:ss'}}</th>
<th>{{tickets.PayIn}}</th>
<th>{{tickets.PayoutAmount}}</th>
<th><button class="details" ng-click="toggleExpandOffer($event);PinTicketSearch(tickets.Pin)"></button></th>
</tr>
<!--extended-->
<tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}">
<th colspan="14">
<div ng-slide-down="isExpanded" duration="0.3" lazy-render>
<table class="offer-table-extended">
<tbody>
<tr>
<td>
<table>
<tr>
<td class="popup-text">#Translator.Translate("DATE"):</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Date : TopTicket.TimeCreated }} {{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.Time : '' }}</td>
</tr>
<tr>
<td class="popup-text">
#Translator.Translate("GAME_TYPE"):
</td>
<td class="white">{{ TicketDetail != null ? TicketDetail.BettingSlipResult.TicketHolder.GameType : TopTicket.GameType }}</td>
</tr>
</table>
</td>
</tr>
<div ng-if="TicketDetail.BettingSlipResult.TicketHolder.BingoBets.length >= 1">
<table class="ticket-table" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="text-center">#Translator.Translate("PICK")</th>
<th class="text-center">#Translator.Translate("ROUND_NUMBER")</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in TicketDetail.BettingSlipResult.TicketHolder.BingoBets">
<td>{{a.Pick}}</td>
<td>{{a.RoundNumber}}</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
</div>
You can move ng-repeat to the tbody element instead of the tr element:
<tbody ng-repeat="tickets in GetAllTickets">
There will be multiple tbody elements but this is valid html. Since there will be multiple extended <tr class="extended-offer-container-row" ng-class=" {'expanded':isExpanded}"> instead of the one now, you can update that to reference tickets which is now in it's scope.