Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1169 table sort #1025

Merged
merged 3 commits into from
Feb 7, 2023
Merged

1169 table sort #1025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb39b8e
chore: allow css file changes to trigger recompile
chrisolsen Jan 26, 2023
9b2f0e7
chore: move css vars into own folder
chrisolsen Jan 26, 2023
1d91478
feat(DDI-1169): add table sort functionality
chrisolsen Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions apps/angular-demo/src/app/table/table.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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