Shadcn Logs Table

1.The panel makes room by hiding columns

While an event is selected, columnVisibility hides Service and Request, whose values the panel header already shows, so the message column keeps enough width to read next to the panel.

const hiddenWhileOpen = { service: false, statusClass: false }

const table = useLogsTable({
  data,
  columns,
  state: { columnVisibility: selectedId ? hiddenWhileOpen : {} },
})

2.Selection is an id, checked against the visible rows

The panel stores the selected row id, not the row. Each render looks that id up in the current row model, so when a filter or search removes the event the panel closes instead of describing a row that is no longer in the table.

const rows = table.getRowModel().rows
const selectedIndex = rows.findIndex((row) => row.id === selectedId)
const selected = selectedIndex === -1 ? undefined : rows[selectedIndex]

useEffect(() => {
  if (selectedId && !selected) setSelectedId(null)
}, [selectedId, selected])

3.Arrow keys move through events

Rows are focusable. Up and down move both focus and the selection, so the panel follows the keyboard the way it does in a mail client, and the panel's own previous and next buttons use the same selectAt helper. Escape closes the panel from a row or from inside it.

function selectAt(index: number) {
  const row = rows.at(index)
  if (index < 0 || !row) return
  setSelectedId(row.id)
  document.getElementById(`log-row-${row.id}`)?.focus()
}

4.Filters are shared with the expandable layout

Search, the date range, and the level, service, and status filters come from the same useLogsTable hook and LogsToolbar as the Expandable rows example. See that tab for how faceted counts, the date range, and search highlighting work.

export function useLogsTable(options: LogsTableOptions) {
  return useReactTable({
    getRowId: (row) => row.id,
    globalFilterFn: searchLogs,
    getFilteredRowModel: getFilteredRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    // ...
    ...options,
  })
}