Sha256: 577cd1700ae877a25d05ae743e2e82a7fea0b28548be8e529f50a5a95186ca9a
Contents?: true
Size: 1.69 KB
Versions: 101
Compression:
Stored size: 1.69 KB
Contents
import React from "react"
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
import MOCK_DATA from "./advanced_table_mock_data.json"
const AdvancedTableCustomCell = (props) => {
const columnDefinitions = [
{
accessor: "year",
label: "Year",
cellAccessors: ["quarter", "month", "day"],
},
{
accessor: "newEnrollments",
label: "New Enrollments",
customRenderer: (row, value) => (
<Pill text={value}
variant="success"
/>
),
},
{
accessor: "scheduledMeetings",
label: "Scheduled Meetings",
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
},
{
accessor: "attendanceRate",
label: "Attendance Rate",
customRenderer: (row, value) => (
<Flex alignItems="end"
orientation="column"
>
<Detail bold
color="default"
text={value}
/>
<Caption size="xs">{row.original.graduatedStudents}</Caption>
</Flex>
),
},
{
accessor: "completedClasses",
label: "Completed Classes",
},
{
accessor: "classCompletionRate",
label: "Class Completion Rate",
},
{
accessor: "graduatedStudents",
label: "Graduated Students",
},
]
return (
<div>
<AdvancedTable
columnDefinitions={columnDefinitions}
enableToggleExpansion="all"
responsive="none"
tableData={MOCK_DATA}
{...props}
>
<AdvancedTable.Header enableSorting />
<AdvancedTable.Body />
</AdvancedTable>
</div>
)
}
export default AdvancedTableCustomCell
Version data entries
101 entries across 101 versions & 2 rubygems