Skip to content

Commit

Permalink
feat(DDI-1169): add table sort functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisolsen
chrisolsen committed Jan 26, 2023
1 parent 9b2f0e7 commit 7f310a2
Show file tree
Hide file tree
Showing 13 changed files with 450 additions and 202 deletions.
12 changes: 9 additions & 3 deletions apps/angular-demo/src/app/table/table.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
<goa-table width="100%" mb="xl">
<goa-table width="100%" mb="xl" (_sort)="handleSort($event)">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>
<goa-table-sort-header name="firstName"
>First name and really long header</goa-table-sort-header
>
</th>
<th>
<goa-table-sort-header name="lastName">Last name</goa-table-sort-header>
</th>
<th>Col 3</th>
</tr>
</thead>
Expand Down
95 changes: 12 additions & 83 deletions apps/angular-demo/src/app/table/table.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Component } from "@angular/core";
import { faker } from "@faker-js/faker";

interface User {
id: number;
id: string;
firstName: string;
lastName: string;
age: number;
Expand All @@ -17,90 +18,18 @@ export class TableComponent {
constructor() {
for (let i = 0; i < 10; i++) {
this.users.push({
id: Math.random(),
firstName: getFirstName(),
lastName: getLastName(),
age: getAge(),
id: faker.datatype.uuid(),
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
age: faker.datatype.number({ min: 18, max: 60 }),
});
}
}
}

function getFirstName(): string {
const index = Math.floor(Math.random() * (firstNames.length - 1));
return firstNames[index];
}

function getLastName(): string {
const index = Math.floor(Math.random() * (lastNames.length - 1));
return lastNames[index];
}

function getAge(): number {
return 18 + Math.floor(Math.random() * 60);
handleSort(event: any) {
const { sortBy, sortDir } = event.detail;
this.users.sort(
(a: any, b: any) => (a[sortBy] > b[sortBy] ? -1 : 1) * sortDir
);
}
}

const firstNames = [
"James",
"John",
"Robert",
"Michael",
"William",
"David",
"Richard",
"Charles",
"Josep",
"Thomas",
"Christopher",
"Daniel",
"Paul",
"Mark",
"Donald",
"Georg",
"Kenneth",
"Steve",
"Edward",
"Brian",
"Ronald",
"Anthon",
"Kevin",
"Jason",
"Matthew",
"Gary",
"Timothy",
"Jose",
"Larry",
"Jeffrey",
"Frank",
"Scot",
"Eric",
"Stephen",
"Andrew",
];

const lastNames = [
"Smith",
"Johnson",
"Williams",
"Brown",
"Jones",
"Garcia",
"Miller",
"Davis",
"Rodriguez",
"Martinez",
"Hernandez",
"Lopez",
"Gonzalez",
"Wilson",
"Anderson",
"Thomas",
"Taylor",
"Moore",
"Jackson",
"Martin",
"Lee",
"Thompson",
"White",
"Harris",
];
102 changes: 12 additions & 90 deletions apps/react-demo/src/routes/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import * as React from "react";
import { GoATable } from "@abgov/react-components";
import { useEffect } from "react";
import { faker } from "@faker-js/faker";

interface User {
id: string;
firstName: string;
lastName: string;
age: number;
}

export default function Table() {
const [data, setData] = React.useState<User[]>([]);
Expand All @@ -9,10 +17,10 @@ export default function Table() {
const users: User[] = [];
for (let i = 0; i < 10; i++) {
users.push({
id: Math.random(),
firstName: getFirstName(),
lastName: getLastName(),
age: getAge(),
id: faker.datatype.uuid(),
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
age: faker.datatype.number({ min: 18, max: 60 }),
});
}
setData(users);
Expand Down Expand Up @@ -66,13 +74,6 @@ export default function Table() {
);
}

interface User {
id: number;
firstName: string;
lastName: string;
age: number;
}

function TableStaticHead() {
return (
<thead>
Expand Down Expand Up @@ -109,82 +110,3 @@ function TableStaticBody() {
</tbody>
);
}

function getFirstName(): string {
const index = Math.floor(Math.random() * (firstNames.length - 1));
return firstNames[index];
}

function getLastName(): string {
const index = Math.floor(Math.random() * (lastNames.length - 1));
return lastNames[index];
}

function getAge(): number {
return 18 + Math.floor(Math.random() * 60);
}

const firstNames = [
"James",
"John",
"Robert",
"Michael",
"William",
"David",
"Richard",
"Charles",
"Josep",
"Thomas",
"Christopher",
"Daniel",
"Paul",
"Mark",
"Donald",
"Georg",
"Kenneth",
"Steve",
"Edward",
"Brian",
"Ronald",
"Anthon",
"Kevin",
"Jason",
"Matthew",
"Gary",
"Timothy",
"Jose",
"Larry",
"Jeffrey",
"Frank",
"Scot",
"Eric",
"Stephen",
"Andrew",
];

const lastNames = [
"Smith",
"Johnson",
"Williams",
"Brown",
"Jones",
"Garcia",
"Miller",
"Davis",
"Rodriguez",
"Martinez",
"Hernandez",
"Lopez",
"Gonzalez",
"Wilson",
"Anderson",
"Thomas",
"Taylor",
"Moore",
"Jackson",
"Martin",
"Lee",
"Thompson",
"White",
"Harris",
];
34 changes: 24 additions & 10 deletions libs/docs/src/BrowserSupport.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Meta } from "@storybook/addon-docs";
import { GoATable } from '@abgov/react-components';
import { GoATable } from "@abgov/react-components";

<Meta title={`Supported browsers`} />

Expand Down Expand Up @@ -29,25 +29,37 @@ The design system components are tested on the following browsers and devices:
<td>Supported</td>
<td>Supported</td>
<td>Supported</td>
<td><b>Android OS:</b> 10+, <b>iOS:</b> 15+</td>
<td>
<b>Android OS:</b> 10+, <b>iOS:</b> 15+
</td>
</tr>
<tr>
<td>Microsoft Edge</td>
<td>Latest and Latest -1</td>
<td>Supported</td>
<td>Supported</td>
<td>Supported <span style={{ color: "red"}}>(Not tested)</span></td>
<td>Supported <span style={{ color: "red"}}>(Not tested)</span></td>
<td><b>Android OS:</b> 10+, <b>iOS:</b> 15+</td>
<td>
Supported <span style={{ color: "red" }}>(Not tested)</span>
</td>
<td>
Supported <span style={{ color: "red" }}>(Not tested)</span>
</td>
<td>
<b>Android OS:</b> 10+, <b>iOS:</b> 15+
</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td>Latest and Latest -1</td>
<td>Supported</td>
<td>Supported</td>
<td>Supported</td>
<td>Supported <span style={{ color: "red"}}>(Not tested)</span></td>
<td><b>Android OS:</b> 10+, <b>iOS:</b> 15+</td>
<td>
Supported <span style={{ color: "red" }}>(Not tested)</span>
</td>
<td>
<b>Android OS:</b> 10+, <b>iOS:</b> 15+
</td>
</tr>
<tr>
<td>Apple Safari</td>
Expand All @@ -56,10 +68,12 @@ The design system components are tested on the following browsers and devices:
<td>Supported</td>
<td>N/A</td>
<td>Supported</td>
<td><b>Android OS:</b> 10+, <b>iOS:</b> 15+</td>
<td>
<b>Android OS:</b> 10+, <b>iOS:</b> 15+
</td>
</tr>
</GoATable>

*Latest: The latest stable version
\*Latest: The latest stable version

**Latest -1: The version prior to the latest version.
\*\*Latest -1: The version prior to the latest version.
5 changes: 4 additions & 1 deletion libs/docs/src/components/common/Dropdown.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,10 @@ export const Template = (args) => {

#### Placeholder

<Story name="Placeholder" args={{ name: "colors", placeholder: "Select a color" }}>
<Story
name="Placeholder"
args={{ name: "colors", placeholder: "Select a color" }}
>
{Template.bind()}
</Story>

Expand Down
Loading

0 comments on commit 7f310a2

Please sign in to comment.