Data Grid
Sorting, scrolling, column types, and virtual scrolling.
Overview
The data grid is the central area of the interface. It displays your data in a high-performance, scrollable table powered by ag-Grid and backed by DuckDB. The grid handles datasets of any size - from a few hundred rows to millions - without slowing down.
Virtual Scrolling
The grid uses infinite scroll with virtual rows. Instead of loading your entire dataset into the browser at once, it fetches rows in pages from DuckDB as you scroll. This means you can explore files with millions of rows just as smoothly as small ones.
- Rows are fetched on demand as you scroll down.
- A pulsing placeholder animation appears while new rows are loading.
- The total row count is displayed in the toolbar so you always know how large your dataset is.
Sorting
Click any column header to sort your data. Each click cycles through three states:
- Ascending - smallest to largest (A–Z for text, oldest to newest for dates).
- Descending - largest to smallest (Z–A for text, newest to oldest for dates).
- None - returns to the original row order.
Sorting is performed by DuckDB, so it works instantly even on very large datasets. A sort indicator arrow appears in the column header to show the current direction.
Column Types
Each column header displays a type indicator so you can see at a glance what kind of data it holds:
| Indicator | Column Type | Examples |
|---|---|---|
| Abc | Text / VARCHAR | Names, categories, IDs |
| # | Numeric (INTEGER, FLOAT, etc.) | Revenue, counts, percentages |
| Date | DATE / TIMESTAMP | Order dates, created_at |
| Bool | BOOLEAN | is_active, has_shipped |
Row Count Display
The toolbar shows the total number of rows in your current view. When you apply operations like Filter or Limit, the count updates to reflect the transformed result. This helps you track how each pipeline step affects the size of your data.
Loading States
While data is being fetched or a pipeline step is executing, the grid displays pulsing placeholder rows. This gives you clear visual feedback that work is happening in the background. Once the data is ready, the placeholders are seamlessly replaced with actual rows.
Tips
- Resize columns by dragging the border between column headers.
- The row number column on the left helps you track position as you scroll.
- Use the Column Explorer alongside the grid to get visual summaries of your data.