LogTable

Shell

Browse streaming logs in a windowed table with preserved scroll position, follow state, value filters, density, and sorting.

data

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { LogTable } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Windowed log

Sixty rows, only the visible ones in the DOM. Hover a cell in a column that names a field to filter for or against its value.

No cell action yet.

Density

Pick a row height

Empty

LogTable

Prop	Type	Default	Description
rowsRequired	Row[]	—	표시할 행
columnsRequired	LogColumn<Row>[]	—	컬럼 정의 (표시 중인 것만)
getRowIdRequired	(row: Row) => string	—	행 식별자
selectedId	string \| null	—	선택된 행
onSelect	(id: string) => void	—	행 선택
onLoadMore	() => void	—	다음 페이지 요청
prepending	boolean	false	상단에 행이 삽입되는 라이브 목록
onFollowChange	(following: boolean) => void	—	최신 행 고정 여부 보고
isNew	(row: Row) => boolean	—	방금 도착한 행 강조
sort	LogSort \| null	—	정렬 상태
onSortChange	(sort: LogSort) => void	—	헤더 클릭 정렬
onCellAction	(action: LogCellAction) => void	—	셀 값 포함/제외 필터
highlightTerms	string[]	—	셀 텍스트에서 표시할 검색어. 쿼리의 자유 텍스트만 넘긴다
density	"compact" \| "normal" \| "comfortable"	"normal"	행 높이와 글자 크기

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

LogTable 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

DomainTable

Shells

Manage domain rows in a Composite grid with keyboard navigation.

DataTable

Shells

Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.

QueryResultsTable

Shells

Explore windowed query results with typed headers, local sorting, resizable columns, row details, and explicit null, boolean, and object values.

WidgetGrid

Shells

Arrange draggable and resizable dashboard widgets with react-grid-layout.

TreeTable

Shells

Explore hierarchical rows with recursive rendering and expand and collapse controls.

InlineEditTable

Shells

Edit cells with a double click, confirm with Enter, and cancel with Escape.

LogTable

Shell

Browse streaming logs in a windowed table with preserved scroll position, follow state, value filters, density, and sorting.

data

Related docs

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

import { LogTable } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Windowed log

Sixty rows, only the visible ones in the DOM. Hover a cell in a column that names a field to filter for or against its value.

No cell action yet.

Density

Pick a row height

Empty

LogTable

Prop	Type	Default	Description
rowsRequired	Row[]	—	표시할 행
columnsRequired	LogColumn<Row>[]	—	컬럼 정의 (표시 중인 것만)
getRowIdRequired	(row: Row) => string	—	행 식별자
selectedId	string \| null	—	선택된 행
onSelect	(id: string) => void	—	행 선택
onLoadMore	() => void	—	다음 페이지 요청
prepending	boolean	false	상단에 행이 삽입되는 라이브 목록
onFollowChange	(following: boolean) => void	—	최신 행 고정 여부 보고
isNew	(row: Row) => boolean	—	방금 도착한 행 강조
sort	LogSort \| null	—	정렬 상태
onSortChange	(sort: LogSort) => void	—	헤더 클릭 정렬
onCellAction	(action: LogCellAction) => void	—	셀 값 포함/제외 필터
highlightTerms	string[]	—	셀 텍스트에서 표시할 검색어. 쿼리의 자유 텍스트만 넘긴다
density	"compact" \| "normal" \| "comfortable"	"normal"	행 높이와 글자 크기

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

LogTable 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.