I want to show a nested table when expand the rows,below i have provided my component.How to achieve this.I am trying but when expand row getting there are no records found text.
I want to show a nested table when expand the rows,below i have provided my component.How to achieve this.I am trying but when expand row getting there are no records found text.
import React, { useState } from 'react';
import {
Row,
Card,
// Table,
CardBody,
// Collapse,
CardTitle,
InputGroup,
CustomInput,
InputGroupAddon,
Input,
// DropdownToggle,
// DropdownItem,
// DropdownMenu,
// UncontrolledDropdown,
FormGroup,
Label,
Form,
Button,
// Col,
// Badge,
} from 'reactstrap';
import { Colxx, Separator } from 'components/common/CustomBootstrap';
import Breadcrumb from 'containers/navs/Breadcrumb';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import DataTable from 'react-data-table-component';
const columns = [
{
name: 'S.No.',
selector: 'sNo',
sortable: true,
},
{
name: 'Name',
selector: 'name',
sortable: true,
},
{
name: 'R.No.',
selector: 'rNo',
sortable: true,
},
{
name: 'Gender',
selector: 'gender',
sortable: true,
},
{
name: 'Result',
selector: 'result',
sortable: true,
},
];
const nestedColumns = [
{
name: 'Subject',
selector: 'subject',
sortable: true,
},
{
name: 'Marks',
selector: 'marks',
sortable: true,
},
];
function UploadResult({ match }) {
const data = [
{
sNo: 1,
name: 'John Doe',
rNo: '001',
gender: 'Male',
result: 'Pass',
subjects: [
{ subject: 'PUNJABI (004)', marks: 'A' },
{ subject: 'FRENCH (018)', marks: 'A' },
{ subject: 'MATHEMATICS (041)', marks: 'A' },
{ subject: 'HINDI COURSE-B (085)', marks: 'A' },
{ subject: 'SCIENCE THEORY (086)', marks: 'A' },
{ subject: 'SOCIAL SCIENCE (087)', marks: 'A' },
{ subject: 'COMM.SANSKRIT (122)', marks: 'A' },
{ subject: 'ENGLISH LNG & LIT. (184)', marks: 'A' },
{ subject: 'MATHEMATICS -BASIC (241)', marks: 'A' },
{ subject: 'ARTIFICIAL INTELLIGENCE (417)', marks: 'A' },
{ subject: 'Total Marks Obtained', marks: 495 },
{ subject: 'Total Marks', marks: 600 },
{ subject: 'Percentage', marks: '76%' },
{ subject: 'Percentage (BO5)', marks: '76%' },
],
},
// Add more data objects for other students
];
const [number, setNumber] = useState(0);
const expandedRowRenderer = ({ subjects }) => (
<DataTable
columns={nestedColumns}
data={subjects}
noHeader
dense
pagination={false}
/>
);
const validationSchema = Yup.object({
class: Yup.string().required("Class Name is required"),
session: Yup.string().required("Session is required"),
file: Yup.string().required("File is required"),
});
const formik = useFormik({
initialValues: {
class: "",
session: "",
file: "",
},
enableReinitialize: true,
validationSchema,
onSubmit: async (values) => {
setNumber(1);
console.log(values)
formik.resetForm();
},
});
return (
<div className="disable-text-selection">
<Row>
<Colxx xxs="12">
<Breadcrumb heading="menu.upload-result" match={match} />
<Separator className="mb-5" />
</Colxx>
</Row>
<Row className="mb-4">
<Colxx xxs="12">
<Card>
<CardBody>
<Form onSubmit={formik.handleSubmit}>
<FormGroup row>
<Label for="passwordHorizontal" sm={2}>
Session
</Label>
<Colxx sm={10}>
<Input
type="text"
id="emailHorizontal"
placeholder='Enter session'
name="session"
value={formik.values.session}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.session && formik.errors.session && <p style={{ color: 'red', marginTop: '5px', marginBottom: '-15px' }}>{formik.errors.session}</p>}
</Colxx>
</FormGroup>
<FormGroup row>
<Label for="emailHorizontal" sm={2}>
Class
</Label>
<Colxx sm={10}>
<Input
type="text"
name="class"
id="emailHorizontal"
placeholder='Enter class name'
value={formik.values.class}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.class && formik.errors.class && <p style={{ color: 'red', marginTop: '5px', marginBottom: '-15px' }}>{formik.errors.class}</p>}
</Colxx>
</FormGroup>
<FormGroup row>
<Label for="UploadHorizontal" sm={2}>
Upload-result
</Label>
<Colxx sm={10}>
<InputGroup>
<InputGroupAddon addonType="prepend">Upload</InputGroupAddon>
<CustomInput
type="file"
id="UploadHorizontal"
name="file"
value={formik.values.file}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
</InputGroup>
{formik.touched.file && formik.errors.file && <p style={{ color: 'red', marginTop: '5px', marginBottom: '-15px' }}>{formik.errors.file}</p>}
</Colxx>
</FormGroup>
<Button type='submit' color="primary">
Submit
</Button>
</Form>
</CardBody>
</Card>
</Colxx>
</Row>
{number === 1 &&
<Row className="mb-4">
<Colxx xxs="12">
<Card className="mb-4">
<CardBody>
<CardTitle>
Result Table
</CardTitle>
<DataTable
title="Session: 2022/23 Class: 10th"
columns={columns}
data={data}
expandableRows
expandableRowsComponent={expandedRowRenderer}
expandableRowDisabled={() => false}
/>
</CardBody>
</Card>
</Colxx>
</Row>
}
</div>
)
}
export default UploadResult
Thanks in advance................