Comments (3)
HI @gos-sebastian, I think if add link to whole row is impossible, but if cell, it work. You can use cell format to solve this problem
from react-bootstrap-table.
hacky way to do it:
cellID(theCell, that){
that.style = {
backgroundColor: 'transparent',
zIndex: theCell,
minWidth: '470px',
minHeight: '38px',
maxHeight: '76px',
marginRight: '-470px',
position: 'absolute',
content: `${theCell}`
};
let that2 = this;
that.onClick = (function(){
setTimeout(() => {
let cell = $(`td[style*="z-index: ${theCell}"]`)
$.each(cell, (i, el) => {
if(el.style['z-index'] === theCell.toString()){
let row = $(el).parent();
let theHtml = row[0].innerHTML;
row[0].innerHTML = `<a style='z-index: ${theCell + 1}; position: absolute; opacity: 0.2; min-height: 38px; min-width: 470px;' id="${theCell}-link" href="/campaigns/${theCell}">${theHtml}</a>`
}
})
}, 1000)
})();
that.title = theCell;
return `${theCell}`;
}
<BootstrapTable data={this.props.campaigns.campaigns} striped={true} hover={true} pagination={true} options={options}>
<TableHeaderColumn dataField="id" isKey={true} dataFormat={function(cell){
that.cellID(cell, this);
}} dataAlign="center" dataSort={true}>Campaign ID</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataFormat={cell => (cell.slice(0,54) + (cell.length > 54 ? '...' : ''))} dataSort={true}>Campaign Name</TableHeaderColumn>
<TableHeaderColumn dataField="leans" dataFormat={function(cell){
that.cellColor(cell, this);
}}
dataSort={true}>Campaign Leans</TableHeaderColumn>
</BootstrapTable>
from react-bootstrap-table.
@AllenFang could we revisit this issue and potentially turn it into a feature request instead of closing it?
from react-bootstrap-table.
Related Issues (20)
- Read only on editable table for a field, but insert it in insertmodal HOT 1
- Sort icon not visible when text overflows in th
- Select All checkbox customization (Display any other icon instead of checkbox) HOT 2
- CellEdit is not working in firefox.
- Not showing Table border Tried Everything of Scripts importing CSS of bootstrap but still
- Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.
- Select All doesn't persist across pages. HOT 1
- Not compatible with React 17+ HOT 6
- How to hide/show checkbox on particular rows in react bootstrap table next
- React Hooks, state is reseting to initial state when called onChange is called inside Formatter
- Expanding one row updating the value of all the expanded rows with the latest value
- How to get value of column selectFilter with deprecated react-boot-strap-table
- React Bootstrap Table - Iterate over an array of Objects for Datafield
- BootstrapTable is not reloading data when row checkbox checked or unchecked in ReactJS
- Error when search on page 2/3/4/5 etc
- Can't run the examples using gulp
- How can I delete/disable the "Expand All - Collapse All" button in the table header?
- Dynamic TableHeaderColumns with search and exportToCSV props doesn't work in BootstrapTable
- How can i use navigate pages using row ?
- React-data-table Component header alone is overlapping when the model/Pop us is enabled, HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-bootstrap-table.