diff --git a/src/examples/badge/BadgeExamples.tsx b/src/examples/badge/BadgeExamples.tsx
index 1743ff880..b9d7cbd81 100644
--- a/src/examples/badge/BadgeExamples.tsx
+++ b/src/examples/badge/BadgeExamples.tsx
@@ -1,16 +1,11 @@
-import {
- GoabBadge,
- GoabBlock,
-} from "@abgov/react-components";
-import { Sandbox } from "@components/sandbox";
import { ShowStatusInATable } from "@examples/show-status-in-a-table.tsx";
+import { ShowMultipleTagsTogether } from "@examples/show-multiple-tags-together.tsx";
import { ShowStatusOnACard } from "@examples/show-status-on-a-card.tsx";
import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
export default function BadgeExamples() {
return (
<>
-
@@ -21,13 +16,7 @@ export default function BadgeExamples() {
exampleTitle="Show multiple tags together"
figmaExample="https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=60735-375622&t=tGwTYaG8Orm4iOm7-4">
-
-
-
-
-
-
-
+
{
+ return (
+ <>
+
+
+
+
+ | Col 1 |
+ Col 2 |
+ Number Column |
+
+
+
+
+ | Item 1 |
+ Item 2 |
+ 54 |
+
+
+ | Item 1 |
+ Item 2 |
+ 4567 |
+
+
+
+
+
+ );
+};
+
+export default DisplayNumbersInATableSoTheyCanBeScannedEasily;
diff --git a/src/examples/hero-banner-with-actions.tsx b/src/examples/hero-banner-with-actions.tsx
new file mode 100644
index 000000000..c72ba661d
--- /dev/null
+++ b/src/examples/hero-banner-with-actions.tsx
@@ -0,0 +1,93 @@
+import { GoabButton, GoabHeroBanner, GoabHeroBannerActions } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { Sandbox } from "@components/sandbox";
+
+export const HeroBannerWithActions = () => {
+ const { version } = useContext(LanguageVersionContext);
+
+ function noop() {}
+
+ return (
+ <>
+
+ {version === "old" && (
+
+ Digital services help to support Albertan citizens receive government services.
+
+ Call to action
+
+
+ `}
+ />
+ )}
+
+ {version === "new" && (
+
+ Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
+
+ Call to action
+
+
+ `}
+ />
+ )}
+
+ {/*React code*/}
+ {version === "old" && (
+
+ Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
+
+ Call to action
+
+
+ `}
+ />
+ )}
+ {version === "new" && (
+
+ Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
+
+ Call to action
+
+
+ `}
+ />
+ )}
+
+
+ Resources are available to help Alberta entrepreneurs and small businesses start, grow and
+ succeed.
+
+
+ Call to action
+
+
+
+
+
+ );
+};
+
+export default HeroBannerWithActions;
diff --git a/src/examples/hero-banner/HeroBannerExamples.tsx b/src/examples/hero-banner/HeroBannerExamples.tsx
new file mode 100644
index 000000000..f7d1f8e22
--- /dev/null
+++ b/src/examples/hero-banner/HeroBannerExamples.tsx
@@ -0,0 +1,14 @@
+import { HeroBannerWithActions } from "@examples/hero-banner-with-actions.tsx";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+
+export const HeroBannerExamples = () => {
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/src/examples/icon-button/IconButtonExamples.tsx b/src/examples/icon-button/IconButtonExamples.tsx
new file mode 100644
index 000000000..ca3a83834
--- /dev/null
+++ b/src/examples/icon-button/IconButtonExamples.tsx
@@ -0,0 +1,14 @@
+import { ShowMultipleActionsInACompactTable } from "@examples/show-multiple-actions-in-a-compact-table.tsx";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+
+export const IconButtonExamples = () => {
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/src/examples/show-multiple-actions-in-a-compact-table.tsx b/src/examples/show-multiple-actions-in-a-compact-table.tsx
new file mode 100644
index 000000000..645fb6e5a
--- /dev/null
+++ b/src/examples/show-multiple-actions-in-a-compact-table.tsx
@@ -0,0 +1,115 @@
+import { GoabBadge, GoabBlock, GoabIconButton, GoabTable } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+
+export const ShowMultipleActionsInACompactTable = () => {
+ return (
+ <>
+
+
+
+
+ | Status |
+ Name |
+ Id Number |
+ Edit | Flag | Send |
+
+
+
+
+ |
+
+ |
+ Darlene Robertson |
+ 45904 |
+
+
+
+
+
+
+ |
+ |
+
+
+ |
+
+ |
+ Floyd Miles |
+ 47838 |
+
+
+
+
+
+
+ |
+ |
+
+
+ |
+
+ |
+ Kathryn Murphy |
+ 34343 |
+
+
+
+
+
+
+ |
+ |
+
+
+ |
+
+ |
+ Annette Black |
+ 89897 |
+
+
+
+
+
+
+ |
+ |
+
+
+ |
+
+ |
+ Esther Howard |
+ 12323 |
+
+
+
+
+
+
+ |
+ |
+
+
+ |
+
+ |
+ Jane Cooper |
+ 56565 |
+
+
+
+
+
+
+ |
+ |
+
+
+
+
+
+ );
+};
+
+export default ShowMultipleActionsInACompactTable;
diff --git a/src/examples/show-multiple-tags-together.tsx b/src/examples/show-multiple-tags-together.tsx
new file mode 100644
index 000000000..324dd9b78
--- /dev/null
+++ b/src/examples/show-multiple-tags-together.tsx
@@ -0,0 +1,18 @@
+import { GoabBadge, GoabBlock } from "@abgov/react-components";
+import { Sandbox } from "@components/sandbox";
+
+export const ShowMultipleTagsTogether = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ShowMultipleTagsTogether;
diff --git a/src/examples/sort-data-in-a-table.tsx b/src/examples/sort-data-in-a-table.tsx
new file mode 100644
index 000000000..ad7fe3480
--- /dev/null
+++ b/src/examples/sort-data-in-a-table.tsx
@@ -0,0 +1,409 @@
+import { useContext, useEffect, useState } from "react";
+import { GoabTable, GoabTableSortHeader } from "@abgov/react-components";
+import type { GoabTableOnSortDetail } from "@abgov/ui-components-common";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+interface User {
+ firstName: string;
+ lastName: string;
+ age: number;
+}
+
+export const SortDataInATable = () => {
+ const { version } = useContext(LanguageVersionContext);
+
+ 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(event: GoabTableOnSortDetail) {
+ const _users = [...users];
+ _users.sort((a: any, b: any) => {
+ return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
+ });
+ setUsers(_users);
+ }
+
+ return (
+ // NOTE: sort functionality breaks when wrapped in Sandbox component
+ //
+ <>
+
+
+
+ |
+ First name
+ |
+
+ Last name
+ |
+
+
+ Age
+
+ |
+
+
+
+ {users.map(user => (
+
+ | {user.firstName} |
+ {user.lastName} |
+ {user.age} |
+
+ ))}
+
+
+
+ {/*React code*/}
+ {version === "old" && (
+ ([]);
+
+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} |
+
+ ))}
+
+
+);
+ `}
+ />
+ )}
+
+ {version === "new" && (
+ ([]);
+
+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(event: GoabTableOnSortDetail) {
+ const _users = [...users];
+ _users.sort((a: any, b: any) => {
+ return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
+ });
+ setUsers(_users);
+}
+
+return (
+
+
+
+ |
+ First name
+ |
+
+ Last name
+ |
+
+
+ Age
+
+ |
+
+
+
+ {users.map((user) => (
+
+ | {user.firstName} |
+ {user.lastName} |
+ {user.age} |
+
+ ))}
+
+
+);
+ `}
+ />
+ )}
+
+ {/*Angular code*/}
+ {version === "old" && (
+ (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
+ );
+ }
+}
+ `}
+ />
+ )}
+
+ {version === "old" && (
+
+
+
+ |
+ First name and really long header
+ |
+
+ Last name
+ |
+
+ Age
+ |
+
+
+
+
+ | {{ user.firstName }} |
+ {{ user.lastName }} |
+ {{ user.age }} |
+
+
+
+ `}
+ />
+ )}
+
+ {version === "new" && (
+ (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
+ );
+ }
+}
+ `}
+ />
+ )}
+
+ {version === "new" && (
+
+
+
+ | First name and really long header |
+ Last name |
+ Age |
+
+
+
+
+ | {{ user.firstName }} |
+ {{ user.lastName }} |
+ {{ user.age }} |
+
+
+
+ `}
+ />
+ )}
+
+ );
+};
+
+export default SortDataInATable;
diff --git a/src/examples/tables/TablesExamples.tsx b/src/examples/tables/TablesExamples.tsx
new file mode 100644
index 000000000..6bdf55899
--- /dev/null
+++ b/src/examples/tables/TablesExamples.tsx
@@ -0,0 +1,28 @@
+import SortDataInATable from "@examples/sort-data-in-a-table.tsx";
+import DisplayNumbersInATableSoTheyCanBeScannedEasily from "@examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.tsx";
+import FilterDataInATable from "@examples/filter-data-in-a-table.tsx";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+
+export const TablesExamples = () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/routes/components/HeroBanner.tsx b/src/routes/components/HeroBanner.tsx
index fb723a190..aafe798d2 100644
--- a/src/routes/components/HeroBanner.tsx
+++ b/src/routes/components/HeroBanner.tsx
@@ -1,35 +1,24 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
import { ComponentBinding, Sandbox } from "@components/sandbox";
import {
ComponentProperties,
ComponentProperty,
} from "@components/component-properties/ComponentProperties.tsx";
import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
-import {
- GoabButton,
- GoabHeroBanner,
- GoabHeroBannerActions,
- GoabTab,
- GoabTabs,
- GoabBadge,
-} from "@abgov/react-components";
+import { GoabHeroBanner, GoabTab, GoabTabs, GoabBadge } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { HeroBannerExamples } from "@examples/hero-banner/HeroBannerExamples.tsx";
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-14412";
+const FIGMA_LINK =
+ "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-14412";
export default function HeroBannerPage() {
- const {version} = useContext(LanguageVersionContext);
const [heroBannerProps, setHeroBannerProps] = useState({
heading: "Heading",
});
- const relatedComponents = [
- { link: "/components/header", name: "Header" },
- ];
+ const relatedComponents = [{ link: "/components/header", name: "Header" }];
const [heroBannerBindings, setHeroBannerBindings] = useState([
{
label: "Heading",
@@ -204,8 +193,6 @@ export default function HeroBannerPage() {
setHeroBannerProps(props as { heading: string; [key: string]: unknown });
}
- function noop() {}
-
return (
<>
- Playground
+
+ Playground
+
Resources are available to help Alberta entrepreneurs and small businesses start,
@@ -239,80 +228,8 @@ export default function HeroBannerPage() {
Examples
- }
- >
-
-
-
-
- {version === "old" &&
- Digital services help to support Albertan citizens receive government services.
-
- Call to action
-
-
- `}
- />}
-
- {version === "new" &&
- Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
-
- Call to action
-
-
- `}
- />}
-
- {/*React code*/}
- {version === "old" &&
- Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
-
- Call to action
-
-
- `}
- />}
- {version === "new" &&
- Resources are available to help Alberta entrepreneurs and small businesses start, grow and succeed.
-
- Call to action
-
-
- `}
- />}
-
-
- Resources are available to help Alberta entrepreneurs and small businesses start,
- grow and succeed.
-
-
- Call to action
-
-
-
-
+ }>
+
diff --git a/src/routes/components/IconButton.tsx b/src/routes/components/IconButton.tsx
index 3e0ce9eeb..b985c8202 100644
--- a/src/routes/components/IconButton.tsx
+++ b/src/routes/components/IconButton.tsx
@@ -1,10 +1,9 @@
import {
GoabBadge,
- GoabBlock,
- GoabIconButton, GoabIconButtonProps,
+ GoabIconButton,
+ GoabIconButtonProps,
GoabTab,
- GoabTable,
- GoabTabs
+ GoabTabs,
} from "@abgov/react-components";
import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx";
import {
@@ -18,7 +17,7 @@ import { ComponentContent } from "@components/component-content/ComponentContent
import { GoabIconType } from "@abgov/ui-components-common";
import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { IconButtonExamples } from "@examples/icon-button/IconButtonExamples.tsx";
type ComponentPropsType = GoabIconButtonProps;
type CastingType = {
@@ -31,7 +30,8 @@ export default function IconButtonPage() {
icon: "refresh" as GoabIconType,
ariaLabel: "Refresh icon",
});
- const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302107";
+ const FIGMA_LINK =
+ "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302107";
const [iconButtonBindings, setIconButtonBindings] = useState([
{
label: "Variant",
@@ -71,7 +71,7 @@ export default function IconButtonPage() {
type: "string",
name: "ariaLabel",
value: "Refresh icon",
- }
+ },
]);
const oldComponentProperties: ComponentProperty[] = [
@@ -212,24 +212,27 @@ export default function IconButtonPage() {
description="An icon-only button for common or repetitive actions."
relatedComponents={[
{ link: "/components/button", name: "Button" },
- { link: "/components/button-group", name: "Button group" }
+ { link: "/components/button-group", name: "Button group" },
]}
figmaLink={FIGMA_LINK}
githubLink="Icon button"
/>
-
- Playground
+
+ Playground
+
{/*Component properties table*/}
-
-
+
- }
- >
-
-
-
-
-
-
-
- | Status |
- Name |
- Id Number |
- Edit | Flag | Send |
-
-
-
-
- |
-
- |
- Darlene Robertson |
- 45904 |
-
-
-
-
-
-
- |
- |
-
-
- |
-
- |
- Floyd Miles |
- 47838 |
-
-
-
-
-
-
- |
- |
-
-
- |
-
- |
- Kathryn Murphy |
- 34343 |
-
-
-
-
-
-
- |
- |
-
-
- |
-
- |
- Annette Black |
- 89897 |
-
-
-
-
-
-
- |
- |
-
-
- |
-
- |
- Esther Howard |
- 12323 |
-
-
-
-
-
-
- |
- |
-
-
- |
-
- |
- Jane Cooper |
- 56565 |
-
-
-
-
-
-
- |
- |
-
-
-
-
+ }>
+
diff --git a/src/routes/components/Table.tsx b/src/routes/components/Table.tsx
index 0fab4f93d..e54a2960b 100644
--- a/src/routes/components/Table.tsx
+++ b/src/routes/components/Table.tsx
@@ -1,45 +1,29 @@
-import { useContext, useEffect, useState } from "react";
+import { useState } from "react";
import { ComponentBinding, Sandbox } from "@components/sandbox";
import {
ComponentProperties,
ComponentProperty,
} from "@components/component-properties/ComponentProperties";
import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
-import {
- GoabBadge,
- GoabButton,
- GoabTab,
- GoabTable,
- GoabTableSortHeader,
- GoabTabs,
-} from "@abgov/react-components";
-import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBadge, GoabButton, GoabTab, GoabTable, GoabTabs } from "@abgov/react-components";
import { GoabTableProps } from "@abgov/react-components";
import { ComponentContent } from "@components/component-content/ComponentContent";
import { GoabTableOnSortDetail } from "@abgov/ui-components-common";
-import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
-import { FilterDataInATable } from "@examples/filter-data-in-a-table.tsx";
import { omit } from "lodash";
import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
-
-interface User {
- firstName: string;
- lastName: string;
- age: number;
-}
+import { TablesExamples } from "@examples/tables/TablesExamples.tsx";
type ComponentPropsType = Omit & {
onSort?: (sortBy: string, sortDir: number) => void;
};
export default function TablePage() {
- const { version } = useContext(LanguageVersionContext);
const [tableProps, setTableProps] = useState({
width: "100%",
});
- const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=3785-18038";
+ const FIGMA_LINK =
+ "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=3785-18038";
const [tableBindings, setTableBindings] = useState([
{
label: "Width",
@@ -122,42 +106,6 @@ export default function TablePage() {
setTableProps(props as ComponentPropsType);
}
- // For table demo -- needs to do sort functionality
- 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(event: GoabTableOnSortDetail) {
- const _users = [...users];
- _users.sort((a: any, b: any) => {
- return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
- });
- setUsers(_users);
- }
-
return (
<>
- Playground
+
+ Playground
+
-
+
-
- Examples
-
-
- }
- >
-
-
-
-
-
-
-
-
- |
- First name
- |
-
- Last name
- |
-
-
- Age
-
- |
-
-
-
- {users.map(user => (
-
- | {user.firstName} |
- {user.lastName} |
- {user.age} |
-
- ))}
-
-
-
-
- {/*React code*/}
- {version === "old" && (
- ([]);
-
- 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} |
-
- )}
-
-
- )
- `}
- />
- )}
-
- {version === "new" && (
- ([]);
-
- 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(event: GoabTableOnSortDetail) {
- const _users = [...users];
- _users.sort((a: any, b: any) => {
- return (a[event.sortBy] > b[event.sortBy] ? 1 : -1) * event.sortDir;
- });
- setUsers(_users);
- }
-
- return (
-
-
-
- |
- First name
- |
-
- Last name
- |
-
- Age
- |
-
-
-
- {users.map(user =>
-
- | {user.firstName} |
- {user.lastName} |
- {user.age} |
-
- )}
-
-
- )
- `}
- />
- )}
-
- {/*Angular code*/}
- {version === "old" && (
- (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
- );
- }
- }
- `}
- />
- )}
-
- {version === "old" && (
-
-
-
- | First name and really long header |
- Last name |
- Age |
-
-
-
-
- | {{ user.firstName }} |
- {{ user.lastName }} |
- {{ user.age }} |
-
-
-
- `}
- />
- )}
-
- {version === "new" && (
- (a[sortBy] > b[sortBy] ? 1 : -1) * sortDir
- );
- }
- }
- `}
- />
- )}
-
- {version === "new" && (
-
-
-
- | First name and really long header |
- Last name |
- Age |
-
-
-
-
- | {{ user.firstName }} |
- {{ user.lastName }} |
- {{ user.age }} |
-
-
-
- `}
- />
- )}
-
-
-
-
-
-
-
- | Col 1 |
- Col 2 |
- Number Column |
-
-
-
-
- | Item 1 |
- Item 2 |
- 54 |
-
-
- | Item 1 |
- Item 2 |
- 4567 |
-
-
-
-
-
-
-
-
+
+ Examples
+
+
+ }>
+
@@ -636,7 +211,6 @@ export default function TablePage() {
-