Call logs

A paginated table of the account's calls, with a date-range filter, configurable columns and row clicks.

Usage

React

TypeScript

import { CallLogs } from '@dialstack/sdk-react/call-logs';

function Dashboard() {
  return <CallLogs />;
}

Web Component

HTML

<dialstack-call-logs></dialstack-call-logs>

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

The table pages itself with Previous and Next controls. See Pagination.

Options

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

React prop	Web Component method	Type	Default	Description
dateRange	setDateRange(range)	{ start?: string; end?: string }	—	Only show calls in this range (ISO 8601 dates)
limit	setLimit(limit)	number	10	Rows per page
displayOptions	setDisplayOptions(options)	CallLogDisplayOptions	—	Show or hide columns (see below)
customRowRenderer	setCustomRowRenderer(renderer)	(call: CallLog) => string	—	Return your own HTML for each row
onRowClick	setOnRowClick(cb)	(event: { callId; call: CallLog }) => void	—	Called when a row is clicked
classes	setClasses(classes)	CallLogsClasses	—	Extra CSS classes (see Styling)

Rows are CallLog records.

Date range

end is optional and defaults to now.

React

TypeScript

<CallLogs dateRange={{ start: '2025-01-01', end: '2025-01-31' }} />

Web Component

JavaScript

callLogs.setDateRange({ start: '2025-01-01', end: '2025-01-31' });

CallLogDisplayOptions

Option	Type	Default	Description
showDate	boolean	true	Date and time column
showDirection	boolean	true	Inbound/outbound indicator
showFrom	boolean	true	From number
showTo	boolean	true	To number
showDuration	boolean	true	Call duration
showStatus	boolean	true	Call status
showQuality	boolean	true	Call quality (MOS) column

React

TypeScript

<CallLogs displayOptions={{ showQuality: false, showStatus: false }} />

Web Component

JavaScript

callLogs.setDisplayOptions({ showQuality: false, showStatus: false });

Row clicks

The event carries the call's ID and the full CallLog.

React

TypeScript

<CallLogs onRowClick={(event) => navigate(`/calls/${event.callId}`)} />

Web Component

JavaScript

callLogs.setOnRowClick((event) => {
  window.location.href = `/calls/${event.callId}`;
});

Custom row renderer

Return an HTML string for each row. Escape any value you interpolate: caller names come from the caller.

JavaScript

const escape = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);

const renderRow = (call) => `
  <div class="custom-row">
    <span>${call.direction === 'inbound' ? 'In' : 'Out'}</span>
    <span>${escape(call.from_number)} → ${escape(call.to_number)}</span>
    <span>${call.duration_seconds ?? 0}s</span>
  </div>
`;

// React: <CallLogs customRowRenderer={renderRow} />
callLogs.setCustomRowRenderer(renderRow);

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 calls" message
table	Table
header	Table header
row	Each row
rowInbound	An inbound call's row
rowOutbound	An outbound call's row
pagination	Pagination controls

React

TypeScript

<CallLogs classes={{ table: 'min-w-full', row: 'hover:bg-gray-50 cursor-pointer' }} />

Web Component

JavaScript

callLogs.setClasses({ table: 'min-w-full', row: 'hover:bg-gray-50 cursor-pointer' });

Complete example

React

TypeScript

import { useState } from 'react';
import { CallLogs } from '@dialstack/sdk-react/call-logs';

function CallLogsPage() {
  const [selectedCall, setSelectedCall] = useState<string | null>(null);

  const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Calls</h1>
      <CallLogs
        dateRange={{ start: thirtyDaysAgo.toISOString().split('T')[0] }}
        limit={20}
        layoutVariant="comfortable"
        formatting={{ defaultCountry: 'US', use24HourTime: false }}
        classes={{ row: 'cursor-pointer hover:bg-gray-50' }}
        onRowClick={(event) => setSelectedCall(event.callId)}
        onLoadError={(event) => console.error('Failed to load calls:', event.error)}
      />
      {selectedCall && (
        <CallDetailModal callId={selectedCall} onClose={() => setSelectedCall(null)} />
      )}
    </div>
  );
}

Web Component

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk-js"></script>
  </head>
  <body>
    <h1>Calls</h1>
    <dialstack-call-logs></dialstack-call-logs>

    <script>
      DialStack.loadDialstackAndInitialize({
        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;
        },
      }).then((dialstack) => {
        const callLogs = document.querySelector('dialstack-call-logs');
        const thirtyDaysAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
        callLogs.setDateRange({ start: thirtyDaysAgo.toISOString().split('T')[0] });
        callLogs.setLimit(20);
        callLogs.setLayoutVariant('comfortable');
        callLogs.setFormatting({ defaultCountry: 'US', use24HourTime: false });
        callLogs.setOnRowClick((event) => console.log('Clicked call', event.callId));
        callLogs.setOnLoadError((event) => console.error('Load error:', event.error));
        callLogs.setInstance(dialstack);
      });
    </script>
  </body>
</html>

Next steps

• Call history — a compact list for one phone number
• Voicemails — voicemail list with playback
• Theming — customize appearance