From d5206480f51bb69b01dd750ab201ef21b3fad2c5 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Mon, 13 Nov 2023 16:19:45 -0500 Subject: [PATCH] feat(#1423): Add table page Signed-off-by: Vanessa Tran --- src/App.tsx | 5 +- src/routes/components/Table.tsx | 401 ++++++++++++++++++++++++++++++++ 2 files changed, 404 insertions(+), 2 deletions(-) create mode 100644 src/routes/components/Table.tsx diff --git a/src/App.tsx b/src/App.tsx index d52786290..c13184384 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,12 +13,12 @@ import ButtonPage from "./routes/components/Button"; import FormStepperPage from "./routes/components/FormStepper"; import CheckboxPage from "./routes/components/Checkbox"; import BadgePage from "./routes/components/Badge"; - import DetailsPage from "./routes/components/Details"; import ListPage from "@routes/components/List"; import PopoverPage from "./routes/components/Popover"; import ContainerPage from "@routes/components/Container"; import SkeletonPage from "@routes/components/Skeleton.tsx"; +import TablePage from "./routes/components/Table"; import AllComponentsPage from "./routes/components/AllComponents"; import ComponentNotFoundPage from "./routes/not-found/NotFound"; import Root from "./routes/root"; @@ -86,7 +86,8 @@ const router = createBrowserRouter( } /> } /> } /> - } />ß + } /> + } /> } /> diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx new file mode 100644 index 000000000..afd44bcdd --- /dev/null +++ b/src/routes/components/Table.tsx @@ -0,0 +1,401 @@ +import {useContext, useEffect, useState} from "react"; +import {ComponentBinding, LanguageContext, Sandbox} from "@components/sandbox"; +import { + ComponentProperties, + ComponentProperty, +} from "@components/component-properties/ComponentProperties"; +import {Category, ComponentHeader} from "@components/component-header/ComponentHeader"; +import { + GoABadge, + GoABlock, + GoAButton, + GoAContainer, + GoATab, + GoATable, + GoATableSortHeader, + GoATabs, +} from "@abgov/react-components"; +import {CodeSnippet} from "@components/code-snippet/CodeSnippet.tsx"; + +interface User { + firstName: string; + lastName: string; + age: number; +} + +export default function TablePage() { + const [tableProps, setTableProps] = useState({}); + const [tableBindings, setTableBindings] = useState([ + { + label: "Width", + type: "string", + name: "width", + value: "", + }, + { + label: "Variant", + type: "list", + name: "variant", + options: ["", "normal", "relaxed"], + defaultValue: "normal", + value: "", + }, + ]); + + const componentProperties: ComponentProperty[] = [ + { + name: "width", + type: "string", + description: "Width of the table. By default it will fit the enclosed content.", + }, + { + name: "variant", + type: "normal | relaxed", + description: "A relaxed variant of the table with more vertical padding for the cells", + defaultValue: "normal", + }, + { + name: "_sort", + lang: "angular", + type: "CustomEvent({detail: {sortBy: string: sortDir: number}})", + description: "Sort event fired when a GoATableSortHeader component is used.", + }, + { + name: "onSort", + lang: "react", + type: "(sortBy: string, sortDir: number) => void", + description: "Sort event fired when a GoATableSortHeader component is used.", + }, + ]; + + function onSandboxChange(tableBindings: ComponentBinding[], props: Record) { + setTableBindings(tableBindings); + setTableProps(props); + } + + // For table demo -- needs to do sort functionality + const language = useContext(LanguageContext); + const [users, setUsers] = useState([]); + useEffect(() => { + const _users: User[] = [ + { + firstName: "Christian", + lastName: "Batz", + age: 18, + }, + { + firstName: "Brain", + lastName: "Wisozk", + age: 19, + }, + { + firstName: "Neha", + lastName: "Jones", + age: 23, + }, + { + firstName: "Tristin", + lastName: "Buckridge", + age: 31, + }, + ]; + setUsers(_users); + }, []); + + function sortData(sortBy: string, sortDir: number) { + const _users = [...users]; + _users.sort((a: any, b: any) => { + return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir; + }); + setUsers(_users); + } + + return ( + <> + + + + {/*Table sandbox*/} + + + + + Status + Text + Number + Action + + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + Lorem ipsum + 1234567890 + + Action + + + + + + + + + {/*Examples*/} + + Sortable columns + Number columns + + +

Sortable columns

+ {/*Sortable columns demo - sandbox cannot display users.map and its logic*/} + + + + + + First name + + + Last name + + + + Age + + + + + + {users.map(user => ( + + {user.firstName} + {user.lastName} + {user.age} + + ))} + + + + + {language === "react" && ( + ([]); + useEffect(() => { + const _users: User[] = [ + { + firstName: "Christian", + lastName: "Batz", + age: 18 + }, + { + firstName: "Brain", + lastName: "Wisozk", + age: 19 + }, + { + firstName: "Neha", + lastName: "Jones", + age: 23 + }, + { + firstName: "Tristin", + lastName: "Buckridge", + age: 31 + } + ]; + setUsers(_users); + }, []); + function sortData(sortBy: string, sortDir: number) { + const _users = [...users]; + _users.sort((a: any, b: any) => { + return (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir; + }); + setUsers(_users); + } + return ( + + + + + First name + + + Last name + + + Age + + + + + {users.map(user => + + {user.firstName} + {user.lastName} + {user.age} + + )} + + + ) + `} + /> + )} + + {language === "angular" && ( + (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir + ); + } + } + `} + /> + )} + + {language === "angular" && ( + + + + First name and really long header + Last name + Age + + + + + {{ user.firstName }} + {{ user.lastName }} + {{ user.age }} + + + + `} + /> + )} + +

Number column

+ + + + + Col 1 + Col 2 + Number Column + + + + + Item 1 + Item 2 + 54 + + + Item 1 + Item 2 + 4567 + + + + + + + + Design guidelines + + + }> + + + ); +}