LoadingRenderer

Custom loading renderer function. Returns an element or HTML string to display as the loading indicator.

Used with the loadingRenderer property in GridConfig to replace the default spinner with custom content.

type LoadingRenderer = (context: LoadingContext) => HTMLElement | string

Example

// Simple text loading indicator
const textLoader: LoadingRenderer = () => {
  const el = document.createElement('div');
  el.textContent = 'Loading...';
  return el;
};

// Custom spinner with size awareness
const customSpinner: LoadingRenderer = (ctx) => {
  const spinner = document.createElement('my-spinner');
  spinner.size = ctx.size === 'large' ? 48 : 24;
  return spinner;
};

// Material Design-style progress bar
const progressBar: LoadingRenderer = () => {
  const container = document.createElement('div');
  container.className = 'progress-bar-container';
  container.innerHTML = '<div class="progress-bar"></div>';
  return container;
};

grid.gridConfig = {
  loadingRenderer: customSpinner,
};

See Also

• LoadingContext for the context object passed to the renderer
• LoadingSize for size variants (‘large’ | ‘small’)