Phone numbers

A single, searchable list of every phone number on the account. It merges active numbers with in-progress number orders and ports, in one table with status tabs, sortable columns, a search box and pagination.

Usage

React

TypeScript

import { PhoneNumbers } from '@dialstack/sdk-react/phone-numbers';

function NumbersPage() {
  return <PhoneNumbers />;
}

Web Component

HTML

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

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

Account-scoped

The component lists every number on the account, so there is no per-user setup. It loads its data as soon as it has an instance: inside the React provider, after setInstance(), or when created with dialstack.create('phone-numbers').

Status tabs

Numbers are grouped into three tabs. Every tab shows the phone number itself, plus the columns relevant to that state:

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

Numbers with no Inbound Caller ID Prefix read Not set, the same empty state the caller ID column uses.

A count badge on the In Progress tab highlights numbers that need attention, such as an order or transfer that hit an issue. You can set call routing from the In Progress tab too, before the number activates, so it routes calls the moment it goes live.

Search

A search box below the status tabs filters the list as you type. It matches:

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

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

Sorting and pagination

Click any column header to sort by it, and again to reverse the order. The list is paginated in the browser, with Previous and Next controls beneath the table.

Options

These are specific to phone numbers. The common options (locale, formatting, icons, layout variant, classes, load callbacks) apply too.

React prop	Web Component method	Type	Default	Description
limit	setLimit(limit)	number	10	Rows per page
onRowClick	setOnRowClick(cb)	(event: PhoneNumberRowClickEvent) => void	—	Called when a row or its routing cell is clicked
classes	setClasses(classes)	PhoneNumbersClasses	—	Extra CSS classes (see Styling)

Row clicks

The event carries the selected phoneNumber, the merged item, and a section that tells the two clickable areas apart:

• 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. Go straight to that number's routing.

For an active number, item.did is the phone number's ID.

React

TypeScript

<PhoneNumbers
  limit={20}
  onRowClick={(event) => {
    if (event.section === 'routing' && event.item.did) {
      router.push(`/phone-numbers/${event.item.did}/routing`);
    } else {
      router.push(`/phone-numbers/${encodeURIComponent(event.phoneNumber)}`);
    }
  }}
/>

Web Component

JavaScript

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

phoneNumbers.setLimit(20);
phoneNumbers.setOnRowClick((event) => {
  if (event.section === 'routing' && event.item.did) {
    window.location.href = `/phone-numbers/${event.item.did}/routing`;
  } else {
    window.location.href = `/phone-numbers/${encodeURIComponent(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 can't be clicked.

Styling

classes adds your own CSS class names to parts of the component. For colors, fonts and spacing, see Theming.

Key	Applied to
loading	Loading state
error	Error state
empty	The "no numbers" message
table	Table
row	Each row
statusBadge	Status badges
pagination	Pagination controls

React

TypeScript

<PhoneNumbers layoutVariant="comfortable" classes={{ row: 'hover:bg-gray-50' }} />

Web Component

JavaScript

phoneNumbers.setLayoutVariant('comfortable');
phoneNumbers.setClasses({ row: 'hover:bg-gray-50' });

Next steps

• Component basics — shared options
• Call logs — the account's call table
• Theming — customize appearance