Я пытаюсь создать область раскрывающегося списка / коллапса в строке таблицы, которая является полной шириной таблицы с помощью Bootstrap 4 и React JS. Мне не удалось найти визуальный образ того, что я хочу, я просто помню, как использовал его где-то раньше (может быть, в AWS?), Но я не смог найти его снова.
РЕДАКТИРОВАТЬ : желаемое действие было найдено (https://i.imgur.com/Pcg1JgI.png). После нажатия на шеврон открываются следующие строки.
Это мой текущий код:
import React from "react";
import { API, graphqlOperation } from 'aws-amplify';
import { listTrackerItems } from '../graphql/queries';
class TrackerGeneralPage extends React.Component {
state = {
id: '',
active: [],
completed: [],
completedDateNow: '',
newStatus: 'Complete'
};
async componentDidMount() {
const result = await API.graphql(graphqlOperation(listTrackerItems))
let data = result.data.listTrackerItems.items
let General = data.filter(t=>t.department === 'General');
const activeGeneral = General.filter(t=>t.status === 'Active');
const completedGeneral = General.filter(t=>t.status === 'Completed');
const date = new Date();
const month = date.getUTCMonth() + 1;
const day = date.getUTCDate();
const year = date.getUTCFullYear();
const timeNow = month + "/" + day + "/" + year;
this.setState({active: activeGeneral, completed: completedGeneral, completedDateNow: timeNow });
}
render() {
const { active } = this.state
return (
<>
<div>
<div class="container">
<div class="row">
<div class="col-sm">
</div>
<div class="col-sm">
<div className="mx-auto" align="center">
<h1>General</h1>
</div>
</div>
<div class="col-sm">
<div className="mx-auto mt-2" align="center">
{/* <!-- Button trigger modal --> */}
<a role="button" className="btn btn-dark" href="/tracker/nwa/lab/add" >
Add Tracker
</a>
</div>
</div>
</div>
</div>
{/* Active Trackers */}
<div id="toggle-active" className="">
<div className="my-4">
<table className="table table-hover table-bordered mb-3">
<thead className="thead-dark">
<tr>
<th scope="col">Actions</th>
<th scope="col">Name</th>
<th scope="col">Regulation</th>
{/* <th scope="col">Occurrence</th> */}
<th scope="col">Due On</th>
<th scope="col">Assigned</th>
<th scope="col">Status</th>
{/* <th scope="col">Completer</th>
<th scope="col">Date Completed</th>
<th scope="col">Description</th> */}
</tr>
</thead>
<tbody>
{active.map(item => (
<tr key={item.id}>
<th scope="row" className="dropdown">
<a class="btn" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><img src="https://icon.now.sh/chevronDown" width="25" height="25" className="d-inline-block align-top" alt="Open Row" /></a>
</th>
<td>{item.name}</td>
<td>{item.reg}</td>
<td>{item.dateDue}</td>
<td>{item.assigned}</td>
<td>{item.status}</td>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<td>{item.occurrence}</td>
<td>{item.completer}</td> */}
<td>{item.dateCompleted}</td>
<td>{item.description}</td>
</div>
</div>
</tr>
))}
</tbody>
</table>
</div> {/* End Table Section */}
</div> {/* End Active Toggle */}
</div> {/* End Container */}
</>
)
}
}
export default TrackerGeneralPage;
ЕслиВ настоящее время я щелкаю стрелку раскрывающегося списка, она размещается справа от таблицы: visual на imgur .
Если переместить это:
<div class="collapse" id="collapseExample">
<div class="card card-body">
<td>{item.occurrence}</td>
<td>{item.completer}</td> */}
<td>{item.dateCompleted}</td>
<td>{item.description}</td>
</div>
</div>
в<th> там, где расположена кнопка выпадающего меню / коллапса, она помещает все это только в этот конкретный столбец: визуальный элемент на imgur .
Я хотел бы, чтобы кнопка открыла область выпадающего меню / коллапсанепосредственно под строкой таблицы, как если бы она была прикреплена (толкая строку ниже) и располагаться на всю ширину таблицы / строки.
Каждая кнопка должна открывать только эту область выпадающего / свернутого ряда строк, какхорошо, и сейчас, если я нажимаю любую кнопку, он открывает все строкиОбласти падения / коллапса.
Как это делается / как это называется?