Trying to use USWDS tables in my Angular project, functionality missing unless table is visible on page load.

[dajones537]

I include USWDS as a package dependency in my package.json. In my angular.json, I include something like this:

"scripts": [
          "node_modules/uswds/dist/js/uswds.min.js"
]

For the uswds sortable table on my home page, everything looks great: the uswds.min.js created the appropriate sort buttons and such on my table. However, I have other pages / components thata are not initially visible. When I navigate to them, they are not given the sort headers buttons and such because the script has already run one time. If I manually copy the contents of uswds.min.js and paste and run them in chrome's console, the headers appear.

What is the best way to have the table functionality script(s) ran whenever a new table that is made visible sometime after initial page load and thus the uswds.min.js script has already ran? This in the readme sounds relevant:

import USWDS from "@uswds/uswds/js";
const { characterCount, accordion } = USWDS; // deconstruct your components here

But I haven't been able to make any import of this sort work. For example, "import USWDS from "uswds/src/js/components";" results in this error: "Could not find a declaration for module [...]"

EDIT: I'm using uswds 2.14.0.

EDIT TWO:

I've gotten past this issue with the help below, thanks. Here is roughly what I look like now:

Define types in types.d.ts

declare module 'uswds/src/js/components/table';
declare module 'uswds/src/js/components/accordion';

Import inside my component

import table from 'uswds/src/js/components/table';

Use it

const myTable = document.getElementById(this.tableId);
table.on(myTable);

I do have a new issue now, however, see below, in which clicking a sort button on a table that's nested inside another table results in toggleSort executing twice. Haven't solved that issue, but anyway I've gotten past the initial issue that this thread was about.

[jbouder]

Its been a little while since I've used USWDS in Angular, but I have been using in React, and in order to get it to work properly in react, I have to call the table.on() and table.off() functions appropriately when the table component loads/unloads to enable sorting functionality. There is an example here (scroll down to the Angular section): https://designsystem.digital.gov/documentation/developers/#js-customization-2.

This sort of thing also needs to be done on other more dynamic components like Accordion, Tooltip, etc.

[dajones537]

The Angular example in that link looks like the example in the readme:

import USWDS from "@uswds/uswds/js"; const { characterCount, accordion } = USWDS; // deconstruct your components here

When I try to import I get "Could not find a declaration for module [...]" errors. Without working imports, I don't think I can use the on or off functions yet. So for starters I need to figure out how to import, I think. Angular uses Typescript, and it seems like typescript doesn't know what to do with the plain old .js files inside uswds.

Edit: another example:

Error: ../../core/components/dan/dan.component.ts:9:23 - error TS2307: Cannot find module '@uswds/uswds/js/usa-accordion' or its corresponding type declarations.

[jbouder]

You might need to define types like I've done here: https://github.com/MetroStar/comet/blob/main/packages/comet-uswds/src/uswds/types.d.ts

[dajones537]

That sounds promising. I'll get back into this when I'm back at work this coming Tuesday, thanks.

[dajones537]

I've added a types.d.ts file with this in it:

declare module '@uswds/uswds/packages/usa-table';

Then I do this import in my component:

import { table } from "@uswds/uswds/packages/usa-table";

And I get the following error on compile:

./src/app/core/components/fake/fake.component.ts:5:0-56 - Error: Module not found: Error: Package path ./packages/usa-table is not exported from package C:\Users\fake\Documents\GitHub\fakeParent\fakeUi\node_modules\@uswds\uswds (see exports field in C:\Users\fake\Documents\GitHub\fakeParent\fakeUi\node_modules\@uswds\uswds\package.json)

EDIT: I may have had the wrong path in my module declaration. I used "packages" there because that's what I saw in folder structure, but per the exports config in uswds's package.json, I think I needed "js" like you had. Just compiled successfully with this, like what you had:

declare module '@uswds/uswds/js/usa-table';

[dajones537]

Ok, so here's my current import:

import { table } from "@uswds/uswds/js/usa-table";

aFunction(): void { console.log('We\'re now going to try to uswds-ify this table...', table); let ref = document.getElementById('aTable'); table.on(ref); console.log('done') }

In the console.log table shows as undefined, and I get an undefined error on table.on. However, if I use a breakpoint and mouseover table, table is NOT undefined.

[dajones537]

I changed my import from:

import { table } from "@uswds/uswds/js/usa-table";

to

import table from "@uswds/uswds/js/usa-table";

table is no longer undefined, and doing table.on(ref) gives this:

However, the sort buttons only work once:

At this point clicking sort buttons doesn't do anything.