Sha256: e2486a4b865d8df7d172e2c737b6ac1e7c2b945c7559f26d5ed44492043a3c6e
Contents?: true
Size: 1.77 KB
Versions: 7
Compression:
Stored size: 1.77 KB
Contents
import React from "react"
import { AdvancedTable } from "../.."
import Title from '../../pb_title/_title'
import MOCK_DATA from "./advanced_table_mock_data.json"
const AdvancedTableResponsive = (props) => {
const columnDefinitions = [
{
accessor: "year",
label: "Year",
cellAccessors: ["quarter", "month", "day"],
},
{
accessor: "newEnrollments",
label: "New Enrollments",
},
{
accessor: "scheduledMeetings",
label: "Scheduled Meetings",
},
{
accessor: "attendanceRate",
label: "Attendance Rate",
},
{
accessor: "completedClasses",
label: "Completed Classes",
},
{
accessor: "classCompletionRate",
label: "Class Completion Rate",
},
{
accessor: "graduatedStudents",
label: "Graduated Students",
},
]
return (
<div>
<Title
size={4}
text="Not Responsive"
{...props}
/>
<AdvancedTable
columnDefinitions={columnDefinitions}
responsive="none"
tableData={MOCK_DATA}
{...props}
/>
<Title
paddingTop="sm"
size={4}
text="Responsive with Prop"
{...props}
/>
<AdvancedTable
columnDefinitions={columnDefinitions}
responsive="scroll"
tableData={MOCK_DATA}
{...props}
/>
<Title
paddingTop="sm"
size={4}
text="Responsive as Default"
{...props}
/>
<AdvancedTable
columnDefinitions={columnDefinitions}
tableData={MOCK_DATA}
{...props}
>
<AdvancedTable.Header />
<AdvancedTable.Body />
</AdvancedTable>
</div>
)
}
export default AdvancedTableResponsive
Version data entries
7 entries across 7 versions & 2 rubygems