Skip to main content

CallLogs

Display a paginated table of call history with filtering, sorting, and customization options.

Basic Usage​

import { CallLogs } from '@dialstack/sdk';

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

Pagination is handled automatically by the component using cursor-based pagination. You don't need to manage cursors or page state manually. The component automatically loads more data as users scroll or click "Load More". See the Pagination Guide for details.

Props​

PropTypeDefaultDescription
dateRange{ start?: string; end?: string }-Filter by date range (ISO 8601)
localeLocaleEnglishCustom locale for UI strings
formattingFormattingOptions-Date/phone formatting options
iconsComponentIcons-Custom SVG icons
layoutVariant'compact' | 'comfortable' | 'default''default'Layout density
classesCallLogsClasses-Custom CSS classes
displayOptionsCallLogDisplayOptions-Show/hide columns
customRowRenderer(call: CallLog) => string-Custom row rendering
onLoaderStart(event) => void-Loading started callback
onLoadError(event) => void-Loading failed callback
onRowClick(event) => void-Row clicked callback

Date Range Filtering​

Filter calls by date range using ISO 8601 date strings:

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

Filter from a specific date to now:

<CallLogs
  dateRange={{
    start: '2025-01-01',
    // end is optional - defaults to now
  }}
/>

Display Options​

Control which columns are visible:

<CallLogs
  displayOptions={{
    showDate: true, // Date/time column
    showDirection: true, // Inbound/outbound indicator
    showFrom: true, // From number
    showTo: true, // To number
    showDuration: true, // Call duration
    showStatus: true, // Call status
  }}
/>

CallLogDisplayOptions​

OptionTypeDefaultDescription
showDatebooleantrueShow date/time column
showDirectionbooleantrueShow direction indicator
showFrombooleantrueShow from number
showTobooleantrueShow to number
showDurationbooleantrueShow call duration
showStatusbooleantrueShow call status

Formatting​

Customize date and phone number formatting:

<CallLogs
  formatting={{
    defaultCountry: 'US', // ISO 3166-1 alpha-2
    dateLocale: 'en-US', // BCP 47 language tag
    use24HourTime: false, // 12-hour vs 24-hour
    showTimezone: true, // Show timezone
  }}
/>

FormattingOptions​

OptionTypeDefaultDescription
defaultCountrystring'US'Country for phone formatting
dateLocalestring'en-US'Locale for dates
use24HourTimebooleanfalseUse 24-hour time format
showTimezonebooleantrueShow timezone in dates

Callbacks​

onRowClick​

Handle row clicks:

<CallLogs
  onRowClick={(event) => {
    console.log('Call ID:', event.callId);
    console.log('Full call data:', event.call);

    // Navigate to call detail
    navigate(`/calls/${event.callId}`);
  }}
/>

onLoadError​

Handle errors:

<CallLogs
  onLoadError={(event) => {
    console.error('Load failed:', event.error);
    showToast('Failed to load call logs');
  }}
/>

Custom Styling​

CSS Classes​

Apply custom classes for framework integration:

<CallLogs
  classes={{
    base: 'rounded-lg shadow',
    loading: 'animate-pulse',
    error: 'border-red-500',
    empty: 'text-gray-400',
    table: 'min-w-full',
    header: 'bg-gray-50',
    row: 'hover:bg-gray-100',
    rowInbound: 'border-l-green-500',
    rowOutbound: 'border-l-blue-500',
    pagination: 'mt-4',
  }}
/>

CallLogsClasses​

ClassDefaultDescription
base'dialstack-component'Container element
loading'dialstack-component--loading'Loading state
error'dialstack-component--error'Error state
empty'dialstack-component--empty'No data state
table'dialstack-call-logs-table'Table element
header'dialstack-call-logs-header'Table header
row'dialstack-call-logs-row'Table row
rowInbound'dialstack-call-logs-row--inbound'Inbound call row
rowOutbound'dialstack-call-logs-row--outbound'Outbound call row
pagination'dialstack-call-logs-pagination'Pagination controls

Layout Variants​

Adjust spacing density:

<CallLogs layoutVariant="compact" />    // Tighter spacing
<CallLogs layoutVariant="default" />    // Standard spacing
<CallLogs layoutVariant="comfortable" /> // More breathing room

CallLog Data Model​

The CallLog type represents a single call record:

interface CallLog {
  id: string;
  user_id?: string;
  endpoint_id?: string;
  did_id?: string;
  direction: 'inbound' | 'outbound' | 'internal';
  from_number: string;
  to_number: string;
  started_at: string;
  answered_at?: string;
  ended_at?: string;
  duration_seconds?: number;
  status: 'completed' | 'no-answer' | 'busy' | 'failed' | 'voicemail';
}

Complete Example​

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

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

  // Calculate date range (last 30 days)
  const thirtyDaysAgo = new Date();
  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Call History</h1>

      <CallLogs
        dateRange={{
          start: thirtyDaysAgo.toISOString().split('T')[0],
        }}
        layoutVariant="comfortable"
        displayOptions={{
          showDate: true,
          showDirection: true,
          showFrom: true,
          showTo: true,
          showDuration: true,
          showStatus: true,
        }}
        formatting={{
          defaultCountry: 'US',
          dateLocale: 'en-US',
          use24HourTime: false,
        }}
        classes={{
          base: 'bg-white rounded-lg shadow',
          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>
  );
}

Next Steps​