Skip to content
Patternfly Logo

Log viewer

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.



With complex toolbar

With header component

5019 lines

With ANSI color logs



datastring | string[]String or String Array data being sent by the consumer
footerReact.ReactNodeComponent rendered in the log viewer console window footer
hasLineNumbersbooleanFlag to enable or disable line numbers on the log viewer.
hasToolbarbooleanConsumer may turn off the visibility on the toolbar
headerReact.ReactNodeComponent rendered in the log viewer console window header
heightnumber | stringHeight of the log viewer.
innerRefReact.RefObject<any>Forwarded ref
isTextWrappedbooleanFlag indicating that log viewer is wrapping text or not
itemCountnumberNumber of rows to display in the log viewer
loadingContentReact.ReactNodeContent displayed while the log viewer is loading
onScroll({ scrollDirection, scrollOffset, scrollOffsetToBottom, scrollUpdateWasRequested }: { scrollDirection: 'forward' | 'backward'; scrollOffset: number; scrollOffsetToBottom: number; scrollUpdateWasRequested: boolean; }) => voidCallback function when scrolling the window. scrollDirection is the direction of scroll, could be 'forward'|'backward'. scrollOffset and scrollOffsetToBottom are the offset of the current position to the top or the bottom. scrollUpdateWasRequested is false when the scroll event is cause by the user interaction in the browser, else it's true. @example onScroll={({scrollDirection, scrollOffset, scrollOffsetToBottom, scrollUpdateWasRequested})=>{}}
overScanCountnumberRows rendered outside of view. The more rows are rendered, the higher impact on performance
scrollToRownumberRow index to scroll to
theme'dark' | 'light'Flag indicating that log viewer is dark themed
toolbarReact.ReactNodeToolbar rendered in the log viewer header
widthnumber | stringWidth of the log viewer.


minSearchCharsNo type info1
placeholderNo type info'Search'

View source on GitHub