LoadingRenderer

Since v1.7.0

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.

When a string is returned it is passed through the grid’s HTML sanitizer before being inserted (same as cell and empty-state renderers), so scripts and event-handler attributes are stripped. Return an HTMLElement if you need full control over the produced DOM.

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’)