LyteNyte Grid Stock Screener Demo

This demo shows how to build a stock screener using LyteNyte Grid. It’s a fork of the code used to create the stock screener demo on the 1771 Technologies website.

The demo highlights the flexibility of LyteNyte Grid and some of its key capabilities.

Overview

The stock screener demo highlights these key LyteNyte Grid features:

• Sorting Rows: Click the arrow icons in a column header or open the Sort Manager dialog to sort rows. You can apply multiple sorts simultaneously.
• Filtering: The demo manages filtering through a floating row positioned below the header row. Quick filter expressions are supported, and users may also expand a filter configuration popover for given columns. The filter popover demonstrates LyteNyte Grid’s Filter Tree feature.
• Quick Search: Enter text into the input field to instantly locate matching rows in the grid using LyteNyte Grid’s Quick Search feature.
• Row Grouping and Aggregations: Use the Pill Manager or the Column Manager to group rows and calculate aggregations. The demo shows the Column Manager in both a side panel and a dialog to highlight flexible layout options.
• Column Resizing and Autosizing: You can resize and move columns. Autosize all columns to fit their content with a single action.

Additional demo features include custom cell renderers, copy and paste, cell range selection, row selection, and context menus. This list isn’t exhaustive. Explore the code to inspire your own implementations and use cases.

Note

The stock screener demo doesn’t cover every LyteNyte Grid feature. Other commonly used features not shown include:

• Column Pivoting
• Server Data Loading
• Tree Data
• Full Width Rows
• Cell Editing
• Row Dragging

For details on all LyteNyte Grid features, see the documentation.

🚀 Getting Started

The project uses Vite for bundling and development. Vite isn’t required but is our preferred choice. LyteNyte Grid works with Next.js, React Router, TanStack Start, or any ESM-compatible framework.

To get started, clone the repository:

git clone https://github.com/1771-Technologies/stock-screen-demo.git

Install dependencies and start the dev server:

pnpm i
pnpm run dev

This starts a development server using the standard Vite toolchain. The dev build runs React in development mode, which is slower than a production build. To test performance, create a production build:

pnpm run build
pnpm run preview

About the Data

The demo uses a client-side data source with a small subset of real stock data, located in src/data.ts. The dataset is over a year old and provided for demonstration only. Do not use it for making financial decisions.