import React, { useState } from
"react"
;
import Table from
"react-bootstrap/Table"
;
const studentsData = [
{ rollNumber: 191201, studentName:
"geek1"
, marksObtained: 10 },
{ rollNumber: 191202, studentName:
"geek2"
, marksObtained: 20 },
{ rollNumber: 191203, studentName:
"geek3"
, marksObtained: 30 },
{ rollNumber: 191204, studentName:
"geek4"
, marksObtained: 25 },
{ rollNumber: 191205, studentName:
"geek5"
, marksObtained: 46 },
{ rollNumber: 191206, studentName:
"geek6"
, marksObtained: 50 },
];
const App = () => {
const [columnHeader, setColumnHeader] = useState(
null
);
const [orderOfSort, setOrderOfSort] = useState(
"ascending"
);
const columnClickHandler = (column) => {
if
(columnHeader === column) {
setOrderOfSort(
orderOfSort ===
"ascending"
?
"descending"
:
"ascending"
);
}
else
{
setColumnHeader(column);
setOrderOfSort(
"ascending"
);
}
};
const studentDataSorted = [...studentsData].sort((a, b) => {
if
(columnHeader) {
if
(a[columnHeader] < b[columnHeader])
return
orderOfSort ===
"ascending"
? -1 : 1;
if
(a[columnHeader] > b[columnHeader])
return
orderOfSort ===
"ascending"
? 1 : -1;
}
return
0;
});
return
(
<div className=
"App"
>
<h1 style={{ color:
"green"
, textAlign:
"center"
}}>
{
" "
}
GeeksforGeeks
</h1>
<h5 style={{ textAlign:
"center"
}}>
{
" "
}
How to make only text of react bootstrap
table header clickable?{
" "
}
</h5>
<p></p>
<Table striped bordered hover>
<thead>
<tr>
<th
style={{ cursor:
"pointer"
, pointerEvents:
"none"
}}
onClick={() => columnClickHandler(
"rollNumber"
)}
>
<span
style={{
cursor:
"pointer"
,
pointerEvents:
"auto"
,
}}
>
{
" "
}
rollNumber
</span>
</th>
<th
style={{ cursor:
"pointer"
, pointerEvents:
"none"
}}
onClick={() => columnClickHandler(
"studentName"
)}
>
<span
style={{
cursor:
"pointer"
,
pointerEvents:
"auto"
,
}}
>
{
" "
}
studentName
</span>
</th>
<th
style={{ cursor:
"pointer"
, pointerEvents:
"none"
}}
onClick={() => columnClickHandler(
"marksObtained"
)}
>
<span
style={{
cursor:
"pointer"
,
pointerEvents:
"auto"
,
}}
>
{
" "
}
marksObtained
</span>
</th>
</tr>
</thead>
<tbody>
{studentDataSorted.map((record) => (
<tr key={record.rollNumber}>
<td>{record.rollNumber}</td>
<td>{record.studentName}</td>
<td>{record.marksObtained}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
};
export
default
App;