score:0
now it came much easier, since bootstrap implemented collapse functionality. look here
score:1
your code is working for me - the hidden row is toggled on click. check out this bootply: http://www.bootply.com/qzpe6dsp1f.
perhaps you aren't loading jquery?
score:1
i adapted c. draghici's answer to a new version of react and react-bootstrap:
onclickhandler = (e) => {
const hiddenelement = e.currenttarget.nextsibling;
hiddenelement.classname.indexof("collapse show") > -1 ? hiddenelement.classlist.remove("show") : hiddenelement.classlist.add("show");
};
<table>
<thead>
<tr>
<th>#</th>
<th>date</th>
<th>description</th>
<th>credit</th>
<th>debit</th>
<th>balance</th>
</tr>
</thead>
<tbody>
<tr onclick={this.onclickhandler}>
<td>1</td>
<td>05 may 2013</td>
<td>credit account</td>
<td classname="text-success">$150.00</td>
<td classname="text-error" />
<td classname="text-success">$150.00</td>
</tr>
<tr classname="collapse">
<td colspan="6">
demo content1
</td>
</tr>
</tbody>
</table>
score:2
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>date</th>
<th>description</th>
<th>credit</th>
<th>debit</th>
<th>balance</th>
</tr>
</thead>
<tbody>
<tr onclick={this.onclickhandler}>
<td>1</td>
<td>05 may 2013</td>
<td>credit account</td>
<td class="text-success">$150.00</td>
<td class="text-error"></td>
<td class="text-success">$150.00</td>
</tr>
<tr >
<td colspan="6" class="hiddenrow"><div class="collapse" id="demo1"> demo content1 </div> </td>
</tr>
</tbody>
</table>
private onclickhandler(e: react.mouseevent<htmltablerowelement>) {
const hiddenelement = e.currenttarget.nextsibling.firstchild.firstchild as htmlelement;
hiddenelement.classname.indexof("collapse in") > -1 ? hiddenelement.classlist.remove("in") : hiddenelement.classlist.add("in");
}
Source: stackoverflow.com
Related Query
- Expanding row inside a Table using react-bootstrap
- Modifying row data using classes in React Bootstrap Table
- Using different font size in each row in antd react table
- How to change the selected table row background using Material-UI on React
- Using React portals to show a modal component(?) when a table row is clicked
- react bootstrap table button conflict with row clicking
- How to get data from table row click using Semantic's React Table Component
- React table how to show 3 items each row using map loop
- Display row in React using bootstrap
- Making entire table row clickable using React Router Link
- How to convert normal table in react js to using react bootstrap table next
- react bootstrap table show empty row
- Cant't re-render bootstrap table when using React hooks
- Rendering array inside object to a table using react
- Problems in highlighting a row of a table when one of its cell is hovered, using React hook useState?
- Unable to redirect to a different page using react bootstrap table from one route to another
- React Js: How to pass table row data as props to another page using onClick event
- How set cards in a row using react bootstrap
- Showing 4 Cards in one row in desktop, 2 Cards in one row in tablet version Using react bootstrap
- how can i add new row my react bootstrap table
- How to make bootstrap table columns resizable using react
- Delete a row from a table using and Id React
- How to pass table row data as props to another page using onClick event in React Js
- How to add another table row on click in react app using typescript
- How can i make the entire row of a table clickable in react js using <Link> or any other way?
- React Bootstrap Table has button in each row to create modal, but one button will call modal's render multiple times
- How to add a button inside every row under a particular column in Bootstrap React Table?
- Get the row index of bootstrap table in click without using jquery
- Selecting row from a bootstrap react Table
- Can i use react bootstrap table inside a card?
More Query from same tag
- How to increment item on button click Reactjs?
- How do I refresh a component's select items when the items are changed in another component?
- Session timeout warning modal using react
- useEffect() vs setTimeout() for side effects
- Toggle Drawer from AppBar LeftIcon
- Sort an array based on string actual width in pixel
- React.useContext not updating
- React Validation Max Range Using Formik
- useState does not function correctly with Material-ui
- Is it a good practice to modify a component's state and then call "setState(this.state)"?
- Loading font icons with React
- I am unable to create pages dynamically using Gatsby
- React: Update a component's state after fetch delete
- How to change title of page when page is redirected using router in reactjs?
- How <Switch> works when it encounters React Components in it?
- Typography and spacing in material-ui
- React: Changing prop type value for nested component on page level
- how to using a custom function to generate suggestions in fluent ui tag picker
- How do I import React component based on a dependancy?
- <main> tag is unrecognized in IE11 React application
- Is it ok to change directly the state if we don't want to re-render?
- Dynamically nesting React.js components
- I cant use index of in localStorage
- Highcharts with React Legend placement and more
- Reactjs - Cannot read the property of undefined
- Caching in React
- How avoid Warning: [antd: Table] `FilteredKeys` should all be controlled or not controlled
- React: Accessing a page outside React app, inside public folder
- React-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?
- cannot access deep nested objects in fetch response in react