Docs/Configuration

Configuration

This guide covers all available configuration options and how to use them effectively.

Basic Configuration

The scheduler accepts a configuration object with the following structure:

const config = {
  // Data source
  data: [],

  // Column definitions
  columns: [],

  // Optional settings
  options: {
    pagination: true,
    pageSize: 10,
    sortable: true,
  }
};

Configuration Options

Data Options

OptionTypeDefaultDescription
dataArray[]The data to display
dataSourceFunction-Async function to fetch data
rowKeystring'id'Unique identifier field

Display Options

OptionTypeDefaultDescription
paginationbooleantrueEnable pagination
pageSizenumber10Items per page
sortablebooleantrueEnable column sorting
filterablebooleanfalseEnable column filtering

Column Definition

Each column can be configured with these properties:

const columns = [
  {
    field: 'name',
    header: 'Name',
    sortable: true,
    width: 200,
    formatter: (value) => value.toUpperCase(),
  },
  {
    field: 'email',
    header: 'Email',
    sortable: true,
  },
];

Advanced Configuration

Custom Renderers

const columns = [
  {
    field: 'status',
    header: 'Status',
    cellRenderer: (value, row) => {
      const span = document.createElement('span');
      span.className = `status-${value}`;
      span.textContent = value;
      return span;
    },
  },
];

Event Handlers

const config = {
  // ... other options
  onRowClick: (row, index) => {
    console.log('Row clicked:', row);
  },
  onSort: (column, direction) => {
    console.log('Sorted by:', column, direction);
  },
  onPageChange: (page, pageSize) => {
    console.log('Page changed:', page);
  },
};

Environment-Specific Configuration

Development

const config = {
  debug: true,
  strictMode: true,
  // ... other options
};

Production

const config = {
  debug: false,
  strictMode: false,
  // ... other options
};

Next Steps