The AdvancedTable Kit's tableData prop consumes the data that will render the table and as such has a specific structure. It must be an array of objects, where the key/value pairs will become the values rendered within each column. If children are present, they must also take the form of an array of objects. The kit will automatically render children as subRows.
Here is the data structure being used within the kits doc examples:
const MOCK_DATA = [
{
year: "2021",
quarter: null,
month: null,
day: null,
newEnrollments: "20",
scheduledMeetings: "10",
attendanceRate: "51%",
completedClasses: "3",
classCompletionRate: "33%",
graduatedStudents: "19",
children: [
{
year: "2021",
quarter: "Q1",
month: null,
day: null,
newEnrollments: "2",
scheduledMeetings: "35",
attendanceRate: "32%",
completedClasses: "15",
classCompletionRate: "52%",
graduatedStudents: "36",
children: [
{
year: "2021",
quarter: "Q1",
month: "January",
day: null,
newEnrollments: "16",
scheduledMeetings: "20",
attendanceRate: "11%",
completedClasses: "13",
classCompletionRate: "47%",
graduatedStudents: "28",
children: [
{
year: "2021",
quarter: "Q1",
month: "January",
day: "10",
newEnrollments: "34",
scheduledMeetings: "28",
attendanceRate: "97%",
completedClasses: "20",
classCompletionRate: "15%",
graduatedStudents: "17",
},
{
year: "2021",
quarter: "Q1",
month: "January",
day: "20",
newEnrollments: "43",
scheduledMeetings: "23",
attendanceRate: "66%",
completedClasses: "26",
classCompletionRate: "47%",
graduatedStudents: "9",
},
],
},
{
year: "2021",
quarter: "Q1",
month: "February",
day: null,
newEnrollments: "20",
scheduledMeetings: "41",
attendanceRate: "95%",
completedClasses: "26",
classCompletionRate: "83%",
graduatedStudents: "43",
children: [
{
year: "2021",
quarter: "Q1",
month: "February",
day: "15",
newEnrollments: "19",
scheduledMeetings: "35",
attendanceRate: "69%",
completedClasses: "8",
classCompletionRate: "75%",
graduatedStudents: "23",
},
],
},
],
},
],
},
{
year: "2022",
quarter: null,
month: null,
day: null,
newEnrollments: "25",
scheduledMeetings: "17",
attendanceRate: "75%",
completedClasses: "5",
classCompletionRate: "45%",
graduatedStudents: "32",
children: [
{
year: "2022",
quarter: "Q1",
month: null,
day: null,
newEnrollments: "2",
scheduledMeetings: "35",
attendanceRate: "32%",
completedClasses: "15",
classCompletionRate: "52%",
graduatedStudents: "36",
children: [
{
year: "2022",
quarter: "Q1",
month: "January",
day: null,
newEnrollments: "16",
scheduledMeetings: "20",
attendanceRate: "11%",
completedClasses: "13",
classCompletionRate: "47%",
graduatedStudents: "28",
children: [
{
year: "2022",
quarter: "Q1",
month: "January",
day: "15",
newEnrollments: "34",
scheduledMeetings: "28",
attendanceRate: "97%",
completedClasses: "20",
classCompletionRate: "15%",
graduatedStudents: "17",
},
{
year: "2022",
quarter: "Q1",
month: "January",
day: "25",
newEnrollments: "43",
scheduledMeetings: "23",
attendanceRate: "66%",
completedClasses: "26",
classCompletionRate: "47%",
graduatedStudents: "9",
},
],
},
{
year: "2022",
quarter: "Q1",
month: "May",
day: null,
newEnrollments: "20",
scheduledMeetings: "41",
attendanceRate: "95%",
completedClasses: "26",
classCompletionRate: "83%",
graduatedStudents: "43",
children: [
{
year: "2022",
quarter: "Q1",
month: "May",
day: "2",
newEnrollments: "19",
scheduledMeetings: "35",
attendanceRate: "69%",
completedClasses: "8",
classCompletionRate: "75%",
graduatedStudents: "23",
},
],
},
],
},
],
},
{
year: "2023",
quarter: null,
month: null,
day: null,
newEnrollments: "10",
scheduledMeetings: "15",
attendanceRate: "65%",
completedClasses: "4",
classCompletionRate: "49%",
graduatedStudents: "29",
children: [
{
year: "2023",
quarter: "Q1",
month: null,
day: null,
newEnrollments: "2",
scheduledMeetings: "35",
attendanceRate: "32%",
completedClasses: "15",
classCompletionRate: "52%",
graduatedStudents: "36",
children: [
{
year: "2023",
quarter: "Q1",
month: "March",
day: null,
newEnrollments: "16",
scheduledMeetings: "20",
attendanceRate: "11%",
completedClasses: "13",
classCompletionRate: "47%",
graduatedStudents: "28",
children: [
{
year: "2023",
quarter: "Q1",
month: "March",
day: "10",
newEnrollments: "34",
scheduledMeetings: "28",
attendanceRate: "97%",
completedClasses: "20",
classCompletionRate: "15%",
graduatedStudents: "17",
},
{
year: "2023",
quarter: "Q1",
month: "March",
day: "11",
newEnrollments: "43",
scheduledMeetings: "23",
attendanceRate: "66%",
completedClasses: "26",
classCompletionRate: "47%",
graduatedStudents: "9",
},
],
},
{
year: "2023",
quarter: "Q1",
month: "April",
day: null,
newEnrollments: "20",
scheduledMeetings: "41",
attendanceRate: "95%",
completedClasses: "26",
classCompletionRate: "83%",
graduatedStudents: "43",
children: [
{
year: "2023",
quarter: "Q1",
month: "April",
day: "15",
newEnrollments: "19",
scheduledMeetings: "35",
attendanceRate: "69%",
completedClasses: "8",
classCompletionRate: "75%",
graduatedStudents: "23",
},
],
},
],
},
],
},
];
FAQs
Unknown package
We found that playbook_ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.