while printing a pdf table breaking and calculations - javascript

I have a table where while printing table is getting split in multiple pages , but i have few calculations when moving to next page
so while printing here the table row is getting split into two pages , and i want to add the remaining data to calculate what is the total in this page and carry forward that sum to next page , is there any way to identify this table brake ?
Sharing the html table structure :
<table
id="details_report"
style={{
fontSize:12,
borderCollapse: 'collapse',
border: '1px solid black',
width: '100%',
margin: '0px',
}}
>
<thead>
<tr>
<td
colspan="3"
>
Name of table
</td>
</tr>
<tr style={{ borderTop: '1px solid black' }}>
<td
style={{ paddingLeft: 15, fontWeight: 'bold' }}
>
Note
</td>
<td
style={{
fontWeight: 'bold',
paddingLeft: 12,
}}
>
PARTICULARS
</td>
<td
data-a-h="end"
style={{
textAlign: 'center',
fontWeight: 'bold',
paddingRight: 20,
}}
>
As at 31/03/2020
</td>
</tr>
</thead>
<tbody>
{Data &&
Data.map((el, i) => (
<>
<tr>
<td
>
{el.note_number}{G_Children[el.detail_number - 1]})
</td>
<td
>
<strong>{el.account}</strong>
</td>
<td/>
</tr>
{el.children.map((el2, j) => (
<>
<tr>
<td />
<td>{el2.account}</td>
<td >{el2.total}</td>
</tr>
{/* after every 5 entry need space */}
{el.children.length !== j + 1 &&
(j + 1) % 5 === 0 && (
<tr style={{ height: 15 }}>
<td className="emptytd" colspan="3" />
</tr>
)}
</>
))}
<tr>
<td colSpan="2"/>
<td>{el.total}</td>
</tr>
</>
))}
</tbody>
</table>
For Json Data i have attached a file

Related

How can I change the background color on reactstrap Table?

The table's thead's color is grey now. and I want to change the color of thead to blue. Is there a way to change the color using reactstrap? I tried putting bgcolor='~~' in the thead tag, but it didn't work. (I think it only works on pure html tag - table)
<Table className='table-fix' responsive bordered >
<thead bgcolor='#12487E'>
<tr >
<th style={{ width: '20%' }}>one</th>
<th style={{ width: '25%' }}>two</th>
<th style={{ width: '55%' }}>three</th>
</tr>
</thead>
<tbody>
{
curDoc.list.map((e, i) => {
return (<tr key={i}>
<td className='text-center'>{curDoc.date}</td>
<td className='text-center'>{curDoc.docFlag}</td>
<td data-bs-toggle="tooltip" data-bs-placement="top" title={e}>{e}</td>
</tr>)
})
}
</tbody>
</Table>

How to truncate text in cell in Bootstrap Table in React?

I have a Bootstrap Table component, and one cell within that table is a URL. The URL can be long, so I'd like to automatically truncate it with an ellipsis to fit within the cell.
Here's an example of what the issue looks like.
You can see the URL and the Table exceed the width of the Card component they're in.
I managed to come up with a fix, but it's not ideal. Here's my code:
<div>
<Accordion>
{this.state.previous_entries.map(pe =>
<Card key={pe.listing.id}>
<CustomToggle eventKey={pe.listing.id}>{[formatAddress(pe), pe.listing.createdAt]}</CustomToggle>
<Accordion.Collapse eventKey={pe.listing.id}>
<Card.Body>
<Table bordered style={{marginBottom: 0}}>
<tbody>
<tr>
<td className="bg-light">URL</td>
<td colSpan="3">
<!-- THIS PART -->
<a href={pe.listing.url}>
<span style={{textOverflow: "ellipsis", overflow: "hidden", whiteSpace:"nowrap", position: "fixed", maxWidth: "14%"}}>{ pe.listing.url }</span>
</a>
</td>
</tr>
<tr>
<td className="bg-light">Monthly Rent</td>
<td>{ pe.listing.monthly_rent ? pe.listing.monthly_rent + "万円" : "N/A" }</td>
<td className="bg-light">礼金</td>
<td>{ pe.listing.reikin !== null ? (pe.listing.reikin !== 0 ? pe.listing.reikin + "ヶ月" : pe.listing.reikin) : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">敷金</td>
<td>{ pe.listing.security_deposit !== null ? (pe.listing.security_deposit !== 0 ? pe.listing.security_deposit + "ヶ月" : pe.listing.security_deposit) : "N/A" }</td>
<td className="bg-light">面積</td>
<td>{ pe.listing.square_m ? pe.listing.square_m + "m²" : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">Closest Station</td>
<td>{ pe.listing.closest_station ? pe.listing.closest_station : "N/A" }</td>
<td className="bg-light">Walking Time</td>
<td>{ pe.listing.walking_time ? pe.listing.walking_time + "分" : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">Availability</td>
<td>{ pe.listing.availability ? pe.listing.availability : "N/A" }</td>
<td className="bg-light">Interest</td>
<td>{ pe.property.interest ? pe.property.interest : "N/A" }</td>
</tr>
</tbody>
</Table>
</Card.Body>
</Accordion.Collapse>
</Card>
)}
</Accordion>
</div>
My 'fix' was adding the maxWidth: "14%" style to the span containing the URL. But this doesn't work great in all cases, depending on the size of the window. Which makes sense because it's a static value.
Here's what my 'fix' looks like.
Does someone know a better way of automatically truncating the URL so that the Table doesn't exceed the Card?
This approach is more flexible when it comes to various screen sizes, as you are not specifying a width for the text-overflow.
table {
table-layout: fixed;
width: 100%;
}
td>a {
display: block;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}
td>a>span {
white-space: nowrap;
}
<div>
<Accordion>
{this.state.previous_entries.map(pe =>
<Card key={pe.listing.id}>
<CustomToggle eventKey={pe.listing.id}>{[formatAddress(pe), pe.listing.createdAt]}</CustomToggle>
<Accordion.Collapse eventKey={pe.listing.id}>
<Card.Body>
<Table bordered style={{marginBottom: 0}}>
<tbody>
<tr>
<td className="bg-light">URL</td>
<td colSpan="3">
<!-- THIS PART -->
<a href={pe.listing.url}>
<span style={{textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", position: "fixed", maxWidth: "14%"}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</a>
</td>
</tr>
<tr>
<td className="bg-light">Monthly Rent</td>
<td>{ pe.listing.monthly_rent ? pe.listing.monthly_rent + "万円" : "N/A" }</td>
<td className="bg-light">礼金</td>
<td>{ pe.listing.reikin !== null ? (pe.listing.reikin !== 0 ? pe.listing.reikin + "ヶ月" : pe.listing.reikin) : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">敷金</td>
<td>{ pe.listing.security_deposit !== null ? (pe.listing.security_deposit !== 0 ? pe.listing.security_deposit + "ヶ月" : pe.listing.security_deposit) : "N/A" }</td>
<td className="bg-light">面積</td>
<td>{ pe.listing.square_m ? pe.listing.square_m + "m²" : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">Closest Station</td>
<td>{ pe.listing.closest_station ? pe.listing.closest_station : "N/A" }</td>
<td className="bg-light">Walking Time</td>
<td>{ pe.listing.walking_time ? pe.listing.walking_time + "分" : "N/A" }</td>
</tr>
<tr>
<td className="bg-light">Availability</td>
<td>{ pe.listing.availability ? pe.listing.availability : "N/A" }</td>
<td className="bg-light">Interest</td>
<td>{ pe.property.interest ? pe.property.interest : "N/A" }</td>
</tr>
</tbody>
</Table>
</Card.Body>
</Accordion.Collapse>
</Card>
)}
</Accordion>
</div>

How can I implement infinite scrolling on a table using react-virualised?

I have been struggling with react-virtualised docs They have full-featured example tables.
All I want is simple infinite scrolling for my table. Please if anyone can help.
I just want to render my content when it's visible on the screen.
NOTE: I am not pulling the data from any API I have static data(an array of objects) saved into my local folder.
Please see a screenshot of my app below.
Below is my code.
const renderRows = items.map((data, index) => {
return (
<tr
className="table__row"
key={data.id}
onClick={() => onRowClick(data.id)}
>
<td style={{ marginRight: '2px' }}>
<img
onClick={(e) => {
toggleStarSelect(e, data.id);
}}
src={Star}
className="star"
alt="star"
style={{ padding: '2px' }}
/>
{data['#']}
</td>
<td>
<ImageLoadHandler
isloaded={isloaded}
handleImage={handleImage}
data={data}
/>
<span style={{ padding: '10px' }}>{data.Name}</span>
<span
style={{
backgroundColor: 'lightgray',
opacity: '0.5',
fontSize: '13px',
}}
>
{data.Symbol}
</span>
</td>
<td>{data.Price}</td>
<td>{data['1h']}</td>
<td className={data['24h'] > 0 ? 'green' : 'red'}>
{data['24h'] > 0 ? (
<img className="arrowicon" src={SortUpGreen} alt="sort-up-green" />
) : (
<img className="arrowicon" src={SortDownRed} alt="sort-down-red" />
)}
{data['24h']}%
</td>
<td>{data['7d']}</td>
<td>{data['Mkt Cap']}</td>
<td>{data['24h Vol']}</td>
<td style={{ padding: '0', paddingRight: '8px' }}>
<Suspense fallback={<div className="loading">loading...</div>}>
<Graph data={data} idx={index} />
</Suspense>
</td>
</tr>
);
});
return (
<div className="app">
<header>
<Header />
</header>
<table className="app__table">
<thead className="app__tablehead">
<tr>
<th
onClick={() => requestSort('#')}
className={getClassNamesFor('#')} //returns ascending or descending
>
#
</th>
<th
onClick={() => requestSort('Name')}
className={getClassNamesFor('Name')}
>
Coin
</th>
<th
onClick={() => requestSort('Price')}
className={getClassNamesFor('Price')}
>
Price
</th>
<th
onClick={() => requestSort('1h')}
className={getClassNamesFor('1h')}
>
1h
</th>
<th
onClick={() => requestSort('24h')}
className={getClassNamesFor('24h')}
>
24h
</th>
<th
onClick={() => requestSort('7d')}
className={getClassNamesFor('7d')}
>
7d
</th>
<th
onClick={() => requestSort('Mkt Cap')}
className={getClassNamesFor('Mkt Cap')}
>
Mkt Cap
</th>
<th
onClick={() => requestSort('24h Vol')}
className={getClassNamesFor('24h Vol')}
>
24h Vol
</th>
<th className="nohover">Last 7 days</th>
</tr>
</thead>
<tbody>{renderRows}</tbody>
</table>
</div>
);
A working example of infinite scroll on a table element. Also a working a repl.
import React, {useState, useEffect} from 'react';
import './App.css';
function App() {
let items = [];
for (let i = 0; i < 100; i++) {
items.push({
key: 'foo' + i,
value: 'bar' + i,
});
}
let dataTable = React.createRef();
const [list, setList] = useState({
itemsDisplayed: 20,
data: items.slice(0, 20),
});
let onScroll = () => {
let tableEl = dataTable.current;
if (tableEl.scrollTop === (tableEl.scrollHeight - tableEl.offsetHeight)) {
if (list.itemsDisplayed + 10 <= items.length) {
setList({
itemsDisplayed: list.itemsDisplayed + 10,
data: items.slice(0, list.itemsDisplayed + 10),
});
}
}
};
return (
<div className="App">
<table id="data-table" ref={dataTable} onScroll={onScroll}>
<tbody>
{list.data.map((item) => {
return (
<tr key={item.key}>
{item.value}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
export default App;
Also to mention, the problem of scrolling firing only once solved by this question. The point is to use React's built-in onScroll event.

How do I limit table height and attach a scroll bar to the table body in React?

I am new to React and webdev in general. How can I limit table height and attach a scroll bar to the table body? Can I continue using bootstrap or should I use MaterialUI/AntDesign?
<table style={{width: 700, marginLeft: 20}} className="table sortable table-bordered">
<thead>
<tr>
<th>Date <button onClick={this.sortByDate}>{this.state.records.length > 1 && this.state.sortDownDates ?
<FaSortAmountUp /> :
<FaSortAmountDown />}</button></th>
<th>Cases <button onClick={this.sortByCase}>{this.state.records.length > 1 && this.state.sortDownCases ?
<FaSortAmountUp /> :
<FaSortAmountDown />}</button></th>
</tr>
</thead>
<tbody>
{this.state.records.map(({date, caseId}) =>
<td>
<td>{date}</td>
<td>{caseId}</td>
</td> // I want to limit this
)}
</tbody>
</table>
Add some css to your table style:
<table style={{width: 700, marginLeft: 20, maxHeight: '800px', overflowY: 'auto'}}

React js - How to select all rows ID from HTML table

i am trying to select all rows Id that contains in html table by one click i tried to do this but that function does not work and array list shows empty how to do that i can select all rows id by single checkbox and i want all rows id in selectedItems as list form . here is my code that i did.
this.state = {
checkedBoxCheck: false,
selectedItems: [],
stats: [],
}
componentDidMount() {
...
}
toggleSelectAll() {
let selectedItems = [];
if (this.state.selectAll === 0) {
this.state.stats.forEach(x => {
selectedItems[x.id] = true;
});
}
this.setState({
selectedItems: selectedItems,
checkedBoxCheck: true
});
console.log(selectedItems);
}
<thead>
<tr style={{ marginTop: "-88px" }}>
<th class="active" style={{ width: "20px" }}>
<input
type="checkbox"
class="select-all checkbox"
onChange={this.onChange}
name="first_name"
onClick={this.toggleSelectAll.bind(this)}
/>
</th>
<th className="" style={{ width: "20px" }}>
{t("Id")}
</th>
</thead>
<tbody>
{stats.map((c, i) => (
<tr key={c.id}>
<td>
<input
type="checkbox"
id="togBtn"
className="checkbox"
name="selectOptions"
onClick={() => this.onItemSelect(c.id)}
/>
</td>
<td>{c.id}</td>
</tbody>

Categories