Audit log viewer

A filterable security log table with severity badges, row-level background tinting for critical entries, a fixed header so column names stay visible while scrolling, and a live search that filters across multiple fields at once.

Fixed header with capped scroll height

Set fixedHeader and fixedHeaderScrollHeight so the table body scrolls independently while the column headers stay pinned:

<DataTable
  fixedHeader
  fixedHeaderScrollHeight="340px"
  columns={columns}
  data={logs}
/>

Severity row tinting

Use conditionalRowStyles to give critical and error rows a distinct background without adding a visual column:

const conditionalRowStyles: ConditionalStyles<LogEntry>[] = [
  { when: r => r.severity === 'critical', style: { backgroundColor: '#fef2f2' } },
  { when: r => r.severity === 'error',    style: { backgroundColor: '#fff7f7' } },
];

Multi-field live search

Filter client-side across several fields by combining a search string with a severity toggle — no extra library needed:

const filtered = logs.filter(r => {
  if (severity !== 'all' && r.severity !== severity) return false;
  if (search) {
    const q = search.toLowerCase();
    return r.user.includes(q) || r.action.includes(q)
      || r.resource.includes(q) || r.ip.includes(q);
  }
  return true;
});