dialstack-phone-numbers

The phone-numbers Web Component displays a unified, filterable list of all phone numbers for the authenticated account. It merges the account's active numbers together with any in-flight number orders and ports into a single table with status tabs, sortable columns, a search box, and pagination.

Usage

HTML

<dialstack-phone-numbers></dialstack-phone-numbers>

<script>
  // `dialstack` is your initialized instance (see the full example below)
  document.querySelector('dialstack-phone-numbers').setInstance(dialstack);
</script>

Account-scoped

This element loads every phone number on the account — there's no per-user setup. It fetches its data as soon as it's wired to an initialized instance via setInstance() (or created with dialstack.create('phone-numbers'), which wires it for you).

Status tabs

Numbers are grouped into three tabs, each showing the columns relevant to that state (every tab shows the phone number itself):

Tab	Additional columns
Active	Caller ID, Usage (two-way, inbound-only, or fax), Call Routing
In Progress	Status, Call Routing, Carrier, Transfer Date
Cancelled	Date Cancelled

A count badge on the In Progress tab highlights any numbers that need attention (for example, an order or transfer that hit an issue). Call routing can be set from the In Progress tab as well — before the number activates — so it starts routing the moment it goes live.

Search

A search box sits on its own row below the status tabs. Typing filters the list live and matches against:

• the phone number — both the plain digits and the formatted form, so 4165551234 and (416) 555 both match;
• the caller ID name;
• the losing carrier — the carrier a number is being ported away from, which only in-progress ports have; and
• the call-routing target name.

Search applies within the currently selected tab, so switch tabs if a number you expect isn't showing. Filtering runs entirely in the browser over the already-loaded list — there is no extra network request per keystroke.

Sorting and pagination

Every column header is sortable; click it to toggle ascending/descending. The list is paginated client-side — use the Previous / Next controls beneath the table. Set the page size with setLimit() (default: 10).

Methods

Common Methods

Method	Parameters	Description
setInstance	instance: DialStackInstance	Set SDK instance
setLocale	locale: Locale	Set UI strings
setFormatting	options: FormattingOptions	Set date/phone formatting
setIcons	icons: ComponentIcons	Set custom SVG icons
setLayoutVariant	variant: 'compact' | 'comfortable' | 'default'	Set layout density
setClasses	classes: PhoneNumbersClasses	Set CSS classes
setOnLoaderStart	callback: (event) => void	Set loading callback
setOnLoadError	callback: (event) => void	Set error callback

Phone-Numbers-Specific Methods

Method	Parameters	Description
setLimit	limit: number	Rows per page (default: 10)
setOnRowClick	callback: (event) => void	Row / routing-cell click callback

Row clicks

Wire setOnRowClick to navigate when a row is selected. The event carries the selected number, the merged item, and a section that distinguishes the two clickable areas:

• section: 'detail' — the row body was clicked (open the number's, order's, or transfer's detail).
• section: 'routing' — the call-routing cell was clicked (jump straight to that number's routing).

JavaScript

const phoneNumbers = document.querySelector('dialstack-phone-numbers');

phoneNumbers.setOnRowClick((event) => {
  if (event.section === 'routing' && event.item.did_id) {
    window.location.href = `/phone-numbers/${event.item.did_id}`;
  } else {
    window.location.href = `/phone-numbers/${event.phoneNumber}`;
  }
});

Fax numbers

A fax-enabled number receives inbound calls as faxes and has no call routing, so its Call Routing cell shows "Not applicable" and is not clickable.

Styling

JavaScript

phoneNumbers.setLayoutVariant('comfortable');

phoneNumbers.setClasses({
  base: 'my-phone-numbers',
  table: 'my-table',
  row: 'my-row',
  statusBadge: 'my-badge',
  pagination: 'my-pagination',
});

See Theming for the full appearance system.

Complete Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk"></script>
  </head>
  <body>
    <dialstack-phone-numbers></dialstack-phone-numbers>

    <script>
      // Initialize
      const dialstack = DialStack.initialize({
        publishableKey: 'pk_live_YOUR_KEY',
        fetchClientSecret: async () => {
          const res = await fetch('/api/dialstack/session', { method: 'POST' });
          const { client_secret } = await res.json();
          return client_secret;
        },
        appearance: {
          theme: 'auto',
          variables: {
            colorPrimary: '#6772E5',
          },
        },
      });

      const phoneNumbers = document.querySelector('dialstack-phone-numbers');

      // Optional configuration
      phoneNumbers.setLimit(20);
      phoneNumbers.setLayoutVariant('comfortable');

      phoneNumbers.setOnRowClick((event) => {
        console.log('Selected:', event.phoneNumber, 'via', event.section);
      });

      phoneNumbers.setOnLoadError((event) => {
        console.error('Load error:', event.error);
      });

      // Wire the element to the initialized instance
      phoneNumbers.setInstance(dialstack);
    </script>
  </body>
</html>

Next Steps

• call-logs Element - Call logs reference
• Theming - Customize appearance
• i18n - Internationalization