---
url: /api/ai.md
---
# @sqlrooms/ai

# @sqlrooms/ai

An AI integration package for SQLRooms that provides components and utilities for adding AI-powered features to your data applications. This package enables natural language querying, data analysis, and AI-assisted insights.

## Features

* 🤖 **AI Query Interface**: Natural language to SQL conversion
* 📊 **Automated Analysis**: AI-powered data analysis and insights
* 🔄 **State Management**: Zustand-based state management for AI features
* 🧩 **UI Components**: Ready-to-use components for AI interactions
* 📝 **Query History**: Track and manage AI query history
* 🎯 **Tool Integration**: Framework for AI tools and actions

## Installation

```bash
npm install @sqlrooms/ai
# or
yarn add @sqlrooms/ai
```

Since version 0.8.2, you will need to install the LLM providers you want to use. For example, to use OpenAI, you can install the `@ai-sdk/openai` package:

```bash
npm install @ai-sdk/openai
```

Google LLM provider:

```bash
npm install @ai-sdk/google
```

Anthropic LLM provider:

```bash
npm install @ai-sdk/anthropic
```

DeepSeek LLM provider:

```bash
npm install @ai-sdk/deepseek
```

XAI LLM provider:

```bash
npm install @ai-sdk/xai
```

ollama LLM provider:

```bash
npm install ollama-ai-provider-v2
```

## Basic Usage

### Setting Up AI Integration

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  // Base room configuration
  ...createRoomShellSlice({
    config: {
      // Your room configuration
    },
  }),
  // Add AI slice
  ...createAiSlice({
    getApiKey: (modelProvider) => {
      // Return API key for the specified model provider
      return process.env.OPENAI_API_KEY || '';
    },
    initialAnalysisPrompt: 'What insights can you provide from my data?',
    // Optional: Add custom tools
    customTools: {
      // Your custom tools
    },
    // Optional: Custom instructions for the AI
    getInstructions: (tablesSchema) => {
      return `Analyze the following tables: ${tablesSchema.map((t) => t.name).join(', ')}`;
    },
  }),
});

function MyApp() {
  return (
    <RoomStateProvider roomStore={roomStore}>
      <MyDataApp />
    </RoomStateProvider>
  );
}
```

### Advanced Store Configuration

For more complex applications, you can combine multiple slices:

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {
  createSqlEditorSlice,
  createDefaultSqlEditorConfig,
} from '@sqlrooms/sql-editor';
import {createRoomStore, createRoomShellSlice} from '@sqlrooms/room-shell';

// Define your application state type
export type RoomState = RoomState<RoomConfig> &
  AiSliceState &
  SqlEditorSliceState;

// Create the store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice({
      config: {
        ...createDefaultSqlEditorConfig(),
      },
    }),
    // AI slice
    ...createAiSlice({
      config: {
        // Optional: Pre-configured AI sessions
        sessions: [
          {
            id: 'default-session',
            name: 'Default Analysis',
            modelProvider: 'openai',
            model: 'gpt-4o',
            analysisResults: [],
            createdAt: new Date(),
          },
        ],
        currentSessionId: 'default-session',
      }
      getApiKey: (modelProvider) => {
        // Return API key based on provider
        return apiKeys[modelProvider] || '';
      },
      // Custom tools and instructions
    }),
    // SQL Editor slice
    ...createSqlEditorSlice(),
  }),
);
```

### Using AI Query Controls

```tsx
import {QueryControls} from '@sqlrooms/ai';

function AiQueryPanel() {
  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">Ask AI</h2>
      <QueryControls
        placeholder="Ask a question about your data..."
        onSubmit={(query) => console.log('Processing query:', query)}
      />
    </div>
  );
}
```

### Displaying Analysis Results

```tsx
import {AnalysisResultsContainer, AnalysisResult} from '@sqlrooms/ai';

function AnalysisPanel() {
  // Get the current session and its analysis results
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const analysisResults = currentSession?.analysisResults || [];

  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">AI Analysis</h2>
      <AnalysisResultsContainer>
        {analysisResults.map((result) => (
          <AnalysisResult key={result.id} result={result} />
        ))}
      </AnalysisResultsContainer>
    </div>
  );
}
```

### Working with AI State

```tsx
function AiStatusIndicator() {
  const isRunningAnalysis = useRoomStore((state) => state.ai.isRunningAnalysis);
  const analysisPrompt = useRoomStore((state) => state.ai.analysisPrompt);
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const lastResult =
    currentSession?.analysisResults[currentSession.analysisResults.length - 1];

  if (isRunningAnalysis) {
    return <div>AI is analyzing your data...</div>;
  }

  if (lastResult?.errorMessage) {
    return <div>Error: {lastResult.errorMessage.message}</div>;
  }

  if (analysisPrompt) {
    return <div>Last query: "{analysisPrompt}"</div>;
  }

  return <div>Ask AI a question about your data</div>;
}
```

## AiSlice API Reference

The AiSlice provides a comprehensive set of state fields and methods for managing AI interactions in your application.

### State Fields

#### `analysisPrompt`

The current prompt text entered by the user for analysis.

```tsx
const prompt = useRoomStore((state) => state.ai.analysisPrompt);
```

#### `isRunningAnalysis`

Boolean flag indicating whether an analysis is currently in progress.

```tsx
const isRunning = useRoomStore((state) => state.ai.isRunningAnalysis);
```

#### `tools`

Record of available AI tools that can be used during analysis.

```tsx
const availableTools = useRoomStore((state) => state.ai.tools);
```

#### `analysisAbortController`

Optional AbortController instance that can be used to cancel an ongoing analysis.

```tsx
const abortController = useRoomStore(
  (state) => state.ai.analysisAbortController,
);
```

### Methods

#### `setAnalysisPrompt(prompt: string)`

Sets the current analysis prompt text.

```tsx
const setPrompt = useRoomStore((state) => state.ai.setAnalysisPrompt);
setPrompt('Analyze sales trends for the last quarter');
```

#### `startAnalysis()`

Starts the analysis process using the current prompt.

```tsx
const startAnalysis = useRoomStore((state) => state.ai.startAnalysis);
await startAnalysis();
```

#### `cancelAnalysis()`

Cancels any ongoing analysis.

```tsx
const cancelAnalysis = useRoomStore((state) => state.ai.cancelAnalysis);
cancelAnalysis();
```

#### `setAiModel(modelProvider: string, model: string)`

Sets the AI model and provider for the current session.

```tsx
const setModel = useRoomStore((state) => state.ai.setAiModel);
setModel('openai', 'gpt-4o');
```

#### `createSession(name?: string, modelProvider?: string, model?: string)`

Creates a new analysis session with optional name and model settings.

```tsx
const createSession = useRoomStore((state) => state.ai.createSession);
createSession('Financial Analysis', 'openai', 'gpt-4o');
```

#### `switchSession(sessionId: string)`

Switches to a different analysis session by ID.

```tsx
const switchSession = useRoomStore((state) => state.ai.switchSession);
switchSession('session-123');
```

#### `renameSession(sessionId: string, name: string)`

Renames an existing analysis session.

```tsx
const renameSession = useRoomStore((state) => state.ai.renameSession);
renameSession('session-123', 'Q4 Sales Analysis');
```

#### `deleteSession(sessionId: string)`

Deletes an analysis session by ID.

```tsx
const deleteSession = useRoomStore((state) => state.ai.deleteSession);
deleteSession('session-123');
```

#### `getCurrentSession()`

Returns the current active analysis session.

```tsx
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
```

#### `deleteAnalysisResult(sessionId: string, resultId: string)`

Deletes a specific analysis result from a session.

```tsx
const deleteResult = useRoomStore((state) => state.ai.deleteAnalysisResult);
deleteResult('session-123', 'result-456');
```

#### `findToolComponent(toolName: string)`

Finds the React component associated with a specific tool.

```tsx
const ChartComponent = useRoomStore((state) =>
  state.ai.findToolComponent('chart'),
);
```

## Data Structure

The basic data structure of the AI package is:

```ts
ai: {
  sessions: [
    {
      id: defaultSessionId,
      name: 'Default Session',
      modelProvider: 'openai',
      model: 'gpt-4o-mini',
      analysisResults: [],
      createdAt: new Date(),
    },
  ],
  currentSessionId: defaultSessionId,
}
```

Each session has a `analysisResults` which is an array of `AnalysisResult`. Each `AnalysisResult` has the following properties:

* `id`: The unique identifier for the analysis result
* `prompt`: The user prompt that was used to generate the analysis result
* `streamMessage`: The stream message from the LLM
* `errorMessage`: The error message from the LLM
* `isCompleted`: Whether the analysis result has been completed

For each user prompt, the LLM will run multiple tools (e.g. `query`, `chart`) and return the result as the `streamMessage`. The structure of the `streamMessage` is as follows:

* `text`: the final response from the LLM (streamable)
* `reasoning`: the reasoning of the LLM (only for reason models)
* `toolCallMessages`: the message array of the tool calls executed by the LLM

Each `toolCallMessages` has the following properties:

* `toolName`: the name of the tool
* `toolCallId`: the id of the tool call
* `args`: the arguments of the tool call
* `llmResult`: the result from the execution of the tool, which will be sent back to the LLM as response.
* `additionalData`: the additional data of the tool, which can be used to pass the output of the tool to next tool call or the component for rendering.

## Rendering

```text
|--------------------------------|
| AnalysisResultsContainer       |
|--------------------------------|
|  |--------------------------|  |
|  | AnalysisResult           |  |
|  |                          |  |
|  | streamMessage            |  |
|  |                          |  |
|  | |---------------------|  |  |
|  | | Tools               |  |  |
|  | |---------------------|  |  |
|  | | |---------------|   |  |  |
|  | | |ToolCallMessage|   |  |  |
|  | | |---------------|   |  |  |
|  | | |---------------|   |  |  |
|  | | |ToolCallMessage|   |  |  |
|  | | |---------------|   |  |  |
|  | |    ...              |  |  |
|  | |---------------------|  |  |
|  |                          |  |
|  | text                     |  |
|  |--------------------------|  |
|--------------------------------|
```

## Tools

In AI package, we provide a tool() to allow creating function tool for LLM to use. It is an extension of the `tool` from `vercel ai sdk`, and it supports not only `execute` function, but also `context` object and `component` object:

* `execute` needs to return
  * llmResult: the result send back to LLM (no raw data)
  * additionalData: the data will be used by `component` and next `tool`
* `context`
  * provide e.g. runtime or async data for `execute`
  * `execute` can access `context` via `options.context`
* `component`
  * use `additionalData` to render a React component for this `tool`

For example, the `query` tool is defined as follows:

```ts
const functions = {
  weather: tool({
    description: 'Get the weather in a city from a weather station',
    parameters: z.object({cityName: z.string()}),
    execute: async ({cityName}, options) => {
      const getStation = options.context?.getStation;
      const station = getStation ? await getStation(cityName) : null;
      return {
        llmResult: `The weather in ${cityName} is sunny from weather station ${station}.`,
        additionalData: {
          weather: 'sunny',
          station,
        },
      };
    },
    context: {
      getStation: async (cityName: string) => {
        const stations = {
          'New York': '123',
          'Los Angeles': '456',
          Chicago: '789',
        };
        return stations[cityName];
      },
    },
    component: WeatherStation,
  }),
};
```

## Advanced Features

* **Custom AI Tools**: Define custom tools for AI to use with the tool() function
* **Multiple Sessions**: Create and manage multiple analysis sessions for different purposes
* **Model Selection**: Switch between different AI models and providers
* **Result Management**: Save, delete, and organize analysis results
* **Conversation Context**: Maintain context across multiple queries in a session
* **Feedback Loop**: Collect user feedback to improve AI responses

For more information, visit the SQLRooms documentation.

## AI Settings Configuration

This package now includes comprehensive AI settings components. These components provide a complete set of UI elements for managing AI model configuration, parameters, and usage tracking.

### AI Settings Features

* **createAiSettingsSlice**: Function to create a Zustand slice for managing AI model configuration with room-shell integration
* **AiSettingsPanel**: Main configuration panel with modular sub-components for different configuration aspects
* **ProvidersSettings**: Component for configuring AI providers (OpenAI, Anthropic, etc.) with API keys and base URLs
* **ModelsSettings**: Component for managing available models and their parameters
* **ModelParametersSettings**: Component for configuring model parameters like max steps and system instructions
* **ModelSelector**: Standalone model selector component for quick model switching

### AI Settings Usage

#### Individual Components

```tsx
import {
  AiSettingsPanel,
  ModelSelector,
} from '@sqlrooms/ai';
import {useRoomStore} from '../store';

// Main configuration panel with sub-components
<AiSettingsPanel isOpen={isConfigOpen} setIsOpen={setIsConfigOpen}>
  <AiSettingsPanel.ProvidersSettings />
  <AiSettingsPanel.ModelsSettings />
  <AiSettingsPanel.ModelParametersSettings  />
</AiSettingsPanel>

// Standalone model selector
<ModelSelector />
```

### AI Settings API Reference

#### Core Components

* **`AiSettingsPanel`**: Main configuration panel with modular sub-components
  * `AiSettingsPanel.ProvidersSettings`: Configure AI providers (OpenAI, Anthropic, etc.)
  * `AiSettingsPanel.ModelsSettings`: Manage available models and their parameters
  * `AiSettingsPanel.ModelParametersSettings`: Configure model parameters and instructions
* **`ModelSelector`**: Standalone model selector for quick switching

#### Slice Configuration

The package uses a slice-based configuration system that integrates with SQLRooms room-shell:

* **`createAiSettingsSlice()`**: Creates the AI settings configuration slice for state management
* **`AiSettingsSliceConfig`**: TypeScript type for configuration schema
* **`createDefaultAiSettings(providers)`**: Helper to create default configuration with providers
* **`getApiKey(config, provider, model)`**: Utility to get API key from configuration
* **`getBaseUrl(config, provider, model)`**: Utility to get base URL from configuration

#### Store Integration

The AI settings configuration integrates with the main AI slice through helper functions:

* **`getApiKey()`**: Function to retrieve API key from current session and model config
* **`getMaxSteps()`**: Function to get max steps from model configuration
* **`getBaseUrl()`**: Function to get base URL from current session and model config
* **`getInstructions(tablesSchema)`**: Function to generate system instructions with optional custom instructions

## Interfaces

* [ModelUsageData](interfaces/ModelUsageData.md)

## Type Aliases

* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [ErrorMessageSchema](type-aliases/ErrorMessageSchema.md)
* [AnalysisResultSchema](type-aliases/AnalysisResultSchema.md)
* [AnalysisSessionSchema](type-aliases/AnalysisSessionSchema.md)
* [AiSliceTool](type-aliases/AiSliceTool.md)
* [AiSliceState](type-aliases/AiSliceState.md)
* [SessionType](type-aliases/SessionType.md)
* [AiSettingsSliceState](type-aliases/AiSettingsSliceState.md)
* [DefaultToolsOptions](type-aliases/DefaultToolsOptions.md)
* [QueryToolParameters](type-aliases/QueryToolParameters.md)

## Variables

* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)
* [AiSliceConfig](variables/AiSliceConfig.md)
* [ErrorMessageSchema](variables/ErrorMessageSchema.md)
* [AnalysisResultSchema](variables/AnalysisResultSchema.md)
* [AnalysisSessionSchema](variables/AnalysisSessionSchema.md)
* [QueryToolParameters](variables/QueryToolParameters.md)

## Functions

* [createDefaultAiConfig](functions/createDefaultAiConfig.md)
* [createAiSlice](functions/createAiSlice.md)
* [useStoreWithAi](functions/useStoreWithAi.md)
* [AnalysisResult](functions/AnalysisResult.md)
* [AnalysisResultsContainer](functions/AnalysisResultsContainer.md)
* [ModelSelector](functions/ModelSelector.md)
* [QueryControls](functions/QueryControls.md)
* [SessionControls](functions/SessionControls.md)
* [DeleteSessionDialog](functions/DeleteSessionDialog.md)
* [SessionActions](functions/SessionActions.md)
* [SessionDropdown](functions/SessionDropdown.md)
* [SessionTitle](functions/SessionTitle.md)
* [ToolErrorMessage](functions/ToolErrorMessage.md)
* [useScrollToBottom](functions/useScrollToBottom.md)
* [createAiSettingsSlice](functions/createAiSettingsSlice.md)
* [useStoreWithAiSettings](functions/useStoreWithAiSettings.md)
* [AiModelParameters](functions/AiModelParameters.md)
* [AiModelUsage](functions/AiModelUsage.md)
* [AiModelsSettings](functions/AiModelsSettings.md)
* [AiProvidersSettings](functions/AiProvidersSettings.md)
* [AiSettingsPanel](functions/AiSettingsPanel.md)
* [createDefaultAiSettingsConfig](functions/createDefaultAiSettingsConfig.md)
* [createDefaultAiInstructions](functions/createDefaultAiInstructions.md)
* [createDefaultAiTools](functions/createDefaultAiTools.md)
* [QueryToolResult](functions/QueryToolResult.md)

---

---
url: /api/ai-config.md
---
# @sqlrooms/ai-config

## Type Aliases

* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [ErrorMessageSchema](type-aliases/ErrorMessageSchema.md)
* [AnalysisResultSchema](type-aliases/AnalysisResultSchema.md)
* [AnalysisSessionSchema](type-aliases/AnalysisSessionSchema.md)

## Variables

* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)
* [AiSliceConfig](variables/AiSliceConfig.md)
* [ErrorMessageSchema](variables/ErrorMessageSchema.md)
* [AnalysisResultSchema](variables/AnalysisResultSchema.md)
* [AnalysisSessionSchema](variables/AnalysisSessionSchema.md)

## Functions

* [createDefaultAiConfig](functions/createDefaultAiConfig.md)

---

---
url: /api/ai-core.md
---
# @sqlrooms/ai-core

# @sqlrooms/ai

An AI integration package for SQLRooms that provides components and utilities for adding AI-powered features to your data applications. This package enables natural language querying, data analysis, and AI-assisted insights.

## Features

* 🤖 **AI Query Interface**: Natural language to SQL conversion
* 📊 **Automated Analysis**: AI-powered data analysis and insights
* 🔄 **State Management**: Zustand-based state management for AI features
* 🧩 **UI Components**: Ready-to-use components for AI interactions
* 📝 **Query History**: Track and manage AI query history
* 🎯 **Tool Integration**: Framework for AI tools and actions

## Installation

```bash
npm install @sqlrooms/ai
# or
yarn add @sqlrooms/ai
```

Since version 0.8.2, you will need to install the LLM providers you want to use. For example, to use OpenAI, you can install the `@ai-sdk/openai` package:

```bash
npm install @ai-sdk/openai
```

Google LLM provider:

```bash
npm install @ai-sdk/google
```

Anthropic LLM provider:

```bash
npm install @ai-sdk/anthropic
```

DeepSeek LLM provider:

```bash
npm install @ai-sdk/deepseek
```

XAI LLM provider:

```bash
npm install @ai-sdk/xai
```

ollama LLM provider:

```bash
npm install ollama-ai-provider-v2
```

## Basic Usage

### Setting Up AI Integration

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with AI capabilities
const {roomStore, useRoomStore} = createRoomStore({
  // Base room configuration
  ...createRoomShellSlice({
    config: {
      // Your room configuration
    },
  }),
  // Add AI slice
  ...createAiSlice({
    getApiKey: (modelProvider) => {
      // Return API key for the specified model provider
      return process.env.OPENAI_API_KEY || '';
    },
    initialAnalysisPrompt: 'What insights can you provide from my data?',
    // Optional: Add custom tools
    customTools: {
      // Your custom tools
    },
    // Optional: Custom instructions for the AI
    getInstructions: (tablesSchema) => {
      return `Analyze the following tables: ${tablesSchema.map((t) => t.name).join(', ')}`;
    },
  }),
});

function MyApp() {
  return (
    <RoomStateProvider roomStore={roomStore}>
      <MyDataApp />
    </RoomStateProvider>
  );
}
```

### Advanced Store Configuration

For more complex applications, you can combine multiple slices:

```tsx
import {createAiSlice} from '@sqlrooms/ai';
import {
  createSqlEditorSlice,
  createDefaultSqlEditorConfig,
} from '@sqlrooms/sql-editor';
import {createRoomStore, createRoomShellSlice} from '@sqlrooms/room-shell';

// Define your application state type
export type RoomState = RoomState<RoomConfig> &
  AiSliceState &
  SqlEditorSliceState;

// Create the store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice({
      config: {
        ...createDefaultSqlEditorConfig(),
      },
    }),
    // AI slice
    ...createAiSlice({
      config: {
        // Optional: Pre-configured AI sessions
        sessions: [
          {
            id: 'default-session',
            name: 'Default Analysis',
            modelProvider: 'openai',
            model: 'gpt-4o',
            analysisResults: [],
            createdAt: new Date(),
          },
        ],
        currentSessionId: 'default-session',
      }
      getApiKey: (modelProvider) => {
        // Return API key based on provider
        return apiKeys[modelProvider] || '';
      },
      // Custom tools and instructions
    }),
    // SQL Editor slice
    ...createSqlEditorSlice(),
  }),
);
```

### Using AI Query Controls

```tsx
import {QueryControls} from '@sqlrooms/ai';

function AiQueryPanel() {
  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">Ask AI</h2>
      <QueryControls
        placeholder="Ask a question about your data..."
        onSubmit={(query) => console.log('Processing query:', query)}
      />
    </div>
  );
}
```

### Displaying Analysis Results

```tsx
import {AnalysisResultsContainer, AnalysisResult} from '@sqlrooms/ai';

function AnalysisPanel() {
  // Get the current session and its analysis results
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const analysisResults = currentSession?.analysisResults || [];

  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-4 text-xl font-bold">AI Analysis</h2>
      <AnalysisResultsContainer>
        {analysisResults.map((result) => (
          <AnalysisResult key={result.id} result={result} />
        ))}
      </AnalysisResultsContainer>
    </div>
  );
}
```

### Working with AI State

```tsx
function AiStatusIndicator() {
  const isRunningAnalysis = useRoomStore((state) => state.ai.isRunningAnalysis);
  const analysisPrompt = useRoomStore((state) => state.ai.analysisPrompt);
  const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
  const lastResult =
    currentSession?.analysisResults[currentSession.analysisResults.length - 1];

  if (isRunningAnalysis) {
    return <div>AI is analyzing your data...</div>;
  }

  if (lastResult?.errorMessage) {
    return <div>Error: {lastResult.errorMessage.message}</div>;
  }

  if (analysisPrompt) {
    return <div>Last query: "{analysisPrompt}"</div>;
  }

  return <div>Ask AI a question about your data</div>;
}
```

## AiSlice API Reference

The AiSlice provides a comprehensive set of state fields and methods for managing AI interactions in your application.

### State Fields

#### `analysisPrompt`

The current prompt text entered by the user for analysis.

```tsx
const prompt = useRoomStore((state) => state.ai.analysisPrompt);
```

#### `isRunningAnalysis`

Boolean flag indicating whether an analysis is currently in progress.

```tsx
const isRunning = useRoomStore((state) => state.ai.isRunningAnalysis);
```

#### `tools`

Record of available AI tools that can be used during analysis.

```tsx
const availableTools = useRoomStore((state) => state.ai.tools);
```

#### `analysisAbortController`

Optional AbortController instance that can be used to cancel an ongoing analysis.

```tsx
const abortController = useRoomStore(
  (state) => state.ai.analysisAbortController,
);
```

### Methods

#### `setAnalysisPrompt(prompt: string)`

Sets the current analysis prompt text.

```tsx
const setPrompt = useRoomStore((state) => state.ai.setAnalysisPrompt);
setPrompt('Analyze sales trends for the last quarter');
```

#### `startAnalysis()`

Starts the analysis process using the current prompt.

```tsx
const startAnalysis = useRoomStore((state) => state.ai.startAnalysis);
await startAnalysis();
```

#### `cancelAnalysis()`

Cancels any ongoing analysis.

```tsx
const cancelAnalysis = useRoomStore((state) => state.ai.cancelAnalysis);
cancelAnalysis();
```

#### `setAiModel(modelProvider: string, model: string)`

Sets the AI model and provider for the current session.

```tsx
const setModel = useRoomStore((state) => state.ai.setAiModel);
setModel('openai', 'gpt-4o');
```

#### `createSession(name?: string, modelProvider?: string, model?: string)`

Creates a new analysis session with optional name and model settings.

```tsx
const createSession = useRoomStore((state) => state.ai.createSession);
createSession('Financial Analysis', 'openai', 'gpt-4o');
```

#### `switchSession(sessionId: string)`

Switches to a different analysis session by ID.

```tsx
const switchSession = useRoomStore((state) => state.ai.switchSession);
switchSession('session-123');
```

#### `renameSession(sessionId: string, name: string)`

Renames an existing analysis session.

```tsx
const renameSession = useRoomStore((state) => state.ai.renameSession);
renameSession('session-123', 'Q4 Sales Analysis');
```

#### `deleteSession(sessionId: string)`

Deletes an analysis session by ID.

```tsx
const deleteSession = useRoomStore((state) => state.ai.deleteSession);
deleteSession('session-123');
```

#### `getCurrentSession()`

Returns the current active analysis session.

```tsx
const currentSession = useRoomStore((state) => state.ai.getCurrentSession());
```

#### `deleteAnalysisResult(sessionId: string, resultId: string)`

Deletes a specific analysis result from a session.

```tsx
const deleteResult = useRoomStore((state) => state.ai.deleteAnalysisResult);
deleteResult('session-123', 'result-456');
```

#### `findToolComponent(toolName: string)`

Finds the React component associated with a specific tool.

```tsx
const ChartComponent = useRoomStore((state) =>
  state.ai.findToolComponent('chart'),
);
```

## Data Structure

The basic data structure of the AI package is:

```ts
ai: {
  sessions: [
    {
      id: defaultSessionId,
      name: 'Default Session',
      modelProvider: 'openai',
      model: 'gpt-4o-mini',
      analysisResults: [],
      createdAt: new Date(),
    },
  ],
  currentSessionId: defaultSessionId,
}
```

Each session has a `analysisResults` which is an array of `AnalysisResult`. Each `AnalysisResult` has the following properties:

* `id`: The unique identifier for the analysis result
* `prompt`: The user prompt that was used to generate the analysis result
* `streamMessage`: The stream message from the LLM
* `errorMessage`: The error message from the LLM
* `isCompleted`: Whether the analysis result has been completed

For each user prompt, the LLM will run multiple tools (e.g. `query`, `chart`) and return the result as the `streamMessage`. The structure of the `streamMessage` is as follows:

* `text`: the final response from the LLM (streamable)
* `reasoning`: the reasoning of the LLM (only for reason models)
* `toolCallMessages`: the message array of the tool calls executed by the LLM

Each `toolCallMessages` has the following properties:

* `toolName`: the name of the tool
* `toolCallId`: the id of the tool call
* `args`: the arguments of the tool call
* `llmResult`: the result from the execution of the tool, which will be sent back to the LLM as response.
* `additionalData`: the additional data of the tool, which can be used to pass the output of the tool to next tool call or the component for rendering.

## Rendering

```text
|--------------------------------|
| AnalysisResultsContainer       |
|--------------------------------|
|  |--------------------------|  |
|  | AnalysisResult           |  |
|  |                          |  |
|  | streamMessage            |  |
|  |                          |  |
|  | |---------------------|  |  |
|  | | Tools               |  |  |
|  | |---------------------|  |  |
|  | | |---------------|   |  |  |
|  | | |ToolCallMessage|   |  |  |
|  | | |---------------|   |  |  |
|  | | |---------------|   |  |  |
|  | | |ToolCallMessage|   |  |  |
|  | | |---------------|   |  |  |
|  | |    ...              |  |  |
|  | |---------------------|  |  |
|  |                          |  |
|  | text                     |  |
|  |--------------------------|  |
|--------------------------------|
```

## Tools

In AI package, we provide a tool() to allow creating function tool for LLM to use. It is an extension of the `tool` from `vercel ai sdk`, and it supports not only `execute` function, but also `context` object and `component` object:

* `execute` needs to return
  * llmResult: the result send back to LLM (no raw data)
  * additionalData: the data will be used by `component` and next `tool`
* `context`
  * provide e.g. runtime or async data for `execute`
  * `execute` can access `context` via `options.context`
* `component`
  * use `additionalData` to render a React component for this `tool`

For example, the `query` tool is defined as follows:

```ts
const functions = {
  weather: tool({
    description: 'Get the weather in a city from a weather station',
    parameters: z.object({cityName: z.string()}),
    execute: async ({cityName}, options) => {
      const getStation = options.context?.getStation;
      const station = getStation ? await getStation(cityName) : null;
      return {
        llmResult: `The weather in ${cityName} is sunny from weather station ${station}.`,
        additionalData: {
          weather: 'sunny',
          station,
        },
      };
    },
    context: {
      getStation: async (cityName: string) => {
        const stations = {
          'New York': '123',
          'Los Angeles': '456',
          Chicago: '789',
        };
        return stations[cityName];
      },
    },
    component: WeatherStation,
  }),
};
```

## Advanced Features

* **Custom AI Tools**: Define custom tools for AI to use with the tool() function
* **Multiple Sessions**: Create and manage multiple analysis sessions for different purposes
* **Model Selection**: Switch between different AI models and providers
* **Result Management**: Save, delete, and organize analysis results
* **Conversation Context**: Maintain context across multiple queries in a session
* **Feedback Loop**: Collect user feedback to improve AI responses

For more information, visit the SQLRooms documentation.

## Type Aliases

* [AiSliceConfig](type-aliases/AiSliceConfig.md)
* [AiSliceTool](type-aliases/AiSliceTool.md)
* [AiSliceState](type-aliases/AiSliceState.md)
* [SessionType](type-aliases/SessionType.md)

## Variables

* [AiSliceConfig](variables/AiSliceConfig.md)

## Functions

* [createDefaultAiConfig](functions/createDefaultAiConfig.md)
* [createAiSlice](functions/createAiSlice.md)
* [useStoreWithAi](functions/useStoreWithAi.md)
* [AnalysisResult](functions/AnalysisResult.md)
* [AnalysisResultsContainer](functions/AnalysisResultsContainer.md)
* [ModelSelector](functions/ModelSelector.md)
* [QueryControls](functions/QueryControls.md)
* [SessionControls](functions/SessionControls.md)
* [DeleteSessionDialog](functions/DeleteSessionDialog.md)
* [SessionActions](functions/SessionActions.md)
* [SessionDropdown](functions/SessionDropdown.md)
* [SessionTitle](functions/SessionTitle.md)
* [ToolErrorMessage](functions/ToolErrorMessage.md)
* [useScrollToBottom](functions/useScrollToBottom.md)

---

---
url: /api/ai-settings.md
---
# @sqlrooms/ai-settings

# @sqlrooms/ai

AI settings UI and state management

## Interfaces

* [ModelUsageData](interfaces/ModelUsageData.md)

## Type Aliases

* [AiSettingsSliceConfig](type-aliases/AiSettingsSliceConfig.md)
* [AiSettingsSliceState](type-aliases/AiSettingsSliceState.md)

## Variables

* [AiSettingsSliceConfig](variables/AiSettingsSliceConfig.md)

## Functions

* [createAiSettingsSlice](functions/createAiSettingsSlice.md)
* [useStoreWithAiSettings](functions/useStoreWithAiSettings.md)
* [AiModelParameters](functions/AiModelParameters.md)
* [AiModelUsage](functions/AiModelUsage.md)
* [AiModelsSettings](functions/AiModelsSettings.md)
* [AiProvidersSettings](functions/AiProvidersSettings.md)
* [AiSettingsPanel](functions/AiSettingsPanel.md)
* [createDefaultAiSettingsConfig](functions/createDefaultAiSettingsConfig.md)

---

---
url: /api/canvas.md
---
# @sqlrooms/canvas

# @sqlrooms/canvas

ReactFlow-based canvas for building and editing DAGs of SQL and Vega nodes, with a Zustand slice for persistence in SQLRooms apps.

* CanvasSlice stores nodes and edges under `canvas.config`
* Canvas component renders and edits the graph

## Type Aliases

* [CanvasSliceConfig](type-aliases/CanvasSliceConfig.md)
* [CanvasSliceState](type-aliases/CanvasSliceState.md)

## Variables

* [CanvasSliceConfig](variables/CanvasSliceConfig.md)

## Functions

* [Canvas](functions/Canvas.md)
* [createDefaultCanvasConfig](functions/createDefaultCanvasConfig.md)
* [createCanvasSlice](functions/createCanvasSlice.md)

---

---
url: /api/cosmos.md
---
# @sqlrooms/cosmos

A powerful graph visualization package for SQLRooms applications. This package provides React components and hooks for creating interactive graph visualizations using a WebGL-based graph rendering engine, with state management through Zustand.

This package is built on top of the [Cosmos library](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library.

## Features

* 🌐 **Interactive Graphs**: Create dynamic, interactive graph visualizations
* 🚀 **WebGL Rendering**: High-performance rendering for large graphs
* 🧩 **React Components**: Ready-to-use components for graph visualization
* 🔄 **State Management**: Zustand-based state management for graph state
* 🎛️ **Simulation Controls**: Fine-grained control over physics simulation
* 🎨 **Customizable Styling**: Extensive options for visual customization

## Installation

```bash
npm install @sqlrooms/cosmos
```

## Basic Usage

### Simple Graph Visualization

```tsx
import {
  CosmosGraph,
  CosmosGraphControls,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';

function MyGraph() {
  const graphData = {
    nodes: [
      {id: 'node1', label: 'Node 1'},
      {id: 'node2', label: 'Node 2'},
      {id: 'node3', label: 'Node 3'},
    ],
    links: [
      {source: 'node1', target: 'node2'},
      {source: 'node2', target: 'node3'},
      {source: 'node3', target: 'node1'},
    ],
  };

  return (
    <div style={{width: '800px', height: '600px'}}>
      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
        <CosmosGraphControls />
      </CosmosGraph>
    </div>
  );
}
```

### With Simulation Controls

```tsx
import {
  CosmosGraph,
  CosmosGraphControls,
  CosmosSimulationControls,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';

function AdvancedGraph() {
  return (
    <div style={{width: '800px', height: '600px', position: 'relative'}}>
      <CosmosGraph config={createDefaultCosmosConfig()} data={graphData}>
        <CosmosGraphControls />
        <CosmosSimulationControls className="absolute bottom-4 left-4" />
      </CosmosGraph>
    </div>
  );
}
```

### Using with Zustand Store

```tsx
import {
  createCosmosSlice,
  useStoreWithCosmos,
  createDefaultCosmosConfig,
} from '@sqlrooms/cosmos';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with cosmos capabilities
const useStore = createRoomStore({
  cosmos: createCosmosSlice(createDefaultCosmosConfig()),
});

function GraphWithState() {
  const {setGraphData, toggleSimulation, isSimulationRunning, zoomToFit} =
    useStoreWithCosmos(useStore);

  // Load graph data
  useEffect(() => {
    setGraphData(myGraphData);
  }, []);

  return (
    <div>
      <button onClick={toggleSimulation}>
        {isSimulationRunning ? 'Pause' : 'Resume'} Simulation
      </button>
      <button onClick={zoomToFit}>Zoom to Fit</button>

      <CosmosGraph store={useStore}>
        <CosmosGraphControls />
      </CosmosGraph>
    </div>
  );
}
```

## Configuration

The Cosmos graph visualization system provides extensive configuration options for both visual appearance and physics simulation.

### Visual Configuration

```tsx
const config = {
  pointSizeScale: 1.2, // Base scale for node sizes
  scalePointsOnZoom: true, // Dynamic node sizing with zoom
  renderLinks: true, // Toggle link visibility
  linkArrows: true, // Show directional arrows
  curvedLinks: true, // Use curved links
  linkWidth: 1.5, // Width of links
  linkOpacity: 0.8, // Opacity of links
  // ... other visual options
};
```

### Physics Simulation Configuration

```tsx
const config = {
  simulationGravity: 0.2, // Center attraction strength
  simulationRepulsion: 1.0, // Node repulsion strength
  simulationLinkSpring: 1.2, // Link elasticity
  simulationLinkDistance: 15, // Preferred link distance
  simulationFriction: 0.85, // Movement damping
  simulationDecay: 1000, // Simulation cooling rate
  // ... other physics options
};
```

## Advanced Features

* **Custom Node Rendering**: Define custom renderers for nodes
* **Interactive Events**: Handle click, hover, and drag events
* **Data Binding**: Connect graph data to your application state
* **Layout Algorithms**: Apply different layout algorithms
* **Performance Optimization**: Options for handling large graphs

For more information, visit the SQLRooms documentation.

## About Cosmograph Cosmos

This package is built on top of [Cosmograph Cosmos](https://github.com/cosmograph-org/cosmos), a GPU-accelerated force graph layout and rendering library. Cosmograph Cosmos offers:

* **GPU Acceleration**: All computations and rendering happen on the GPU in fragment and vertex shaders
* **High Performance**: Capable of rendering hundreds of thousands of nodes and links in real-time
* **WebGL-based**: Utilizes WebGL for efficient graph visualization
* **Advanced Physics**: Sophisticated force-directed layout algorithms

For more information about the underlying library, visit the [Cosmograph Cosmos GitHub repository](https://github.com/cosmograph-org/cosmos) or the [official documentation](https://cosmograph-org.github.io/cosmos/).

## Type Aliases

* [CosmosGraphProps](type-aliases/CosmosGraphProps.md)
* [CosmosSliceState](type-aliases/CosmosSliceState.md)
* [RoomStateWithCosmos](type-aliases/RoomStateWithCosmos.md)
* [CosmosSliceConfig](type-aliases/CosmosSliceConfig.md)

## Variables

* [CosmosSliceConfig](variables/CosmosSliceConfig.md)

## Functions

* [CosmosGraph](functions/CosmosGraph.md)
* [CosmosGraphControls](functions/CosmosGraphControls.md)
* [CosmosSimulationControls](functions/CosmosSimulationControls.md)
* [createCosmosSlice](functions/createCosmosSlice.md)
* [useStoreWithCosmos](functions/useStoreWithCosmos.md)
* [createDefaultCosmosConfig](functions/createDefaultCosmosConfig.md)
* [useHoverState](functions/useHoverState.md)

## References

### CosmosSliceConfigType

Renames and re-exports [CosmosSliceConfig](variables/CosmosSliceConfig.md)

---

---
url: /api/data-table.md
---
# @sqlrooms/data-table

A high-performance data table component library for SQLRooms applications. This package provides flexible and feature-rich table components for displaying and interacting with large datasets, with special support for Apache Arrow data structures.

## Features

* 📊 **Multiple Table Variants**: Paginated, virtualized, and query-specific tables
* 🚀 **High Performance**: Optimized for handling large datasets efficiently
* 🏹 **Arrow Integration**: Native support for Apache Arrow data structures
* 🔍 **Sorting & Filtering**: Built-in data manipulation capabilities
* 📱 **Responsive Design**: Tables that work well on all screen sizes
* 🎨 **Customizable**: Flexible styling and configuration options

## Installation

```bash
npm install @sqlrooms/data-table
# or
yarn add @sqlrooms/data-table
```

## Basic Usage

### Paginated Data Table

```tsx
import {DataTablePaginated} from '@sqlrooms/data-table';

function MyDataTable() {
  const data = [
    {id: 1, name: 'Alice', age: 28},
    {id: 2, name: 'Bob', age: 34},
    {id: 3, name: 'Charlie', age: 42},
    // More data...
  ];

  const columns = [
    {accessorKey: 'id', header: 'ID'},
    {accessorKey: 'name', header: 'Name'},
    {accessorKey: 'age', header: 'Age'},
  ];

  return (
    <DataTablePaginated
      data={data}
      columns={columns}
      pageSize={10}
      enableSorting
      enableFiltering
    />
  );
}
```

### Working with SQL Query Results

```tsx
import {QueryDataTable} from '@sqlrooms/data-table';
import {useSql} from '@sqlrooms/duckdb';

function QueryResultsTable() {
  const {data, isLoading, error} = useSql({
    query:
      'SELECT id, name, email, created_at FROM users ORDER BY created_at DESC',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return <QueryDataTable data={data} />;
}
```

### Using with Apache Arrow

```tsx
import {useArrowDataTable} from '@sqlrooms/data-table';
import {Table} from 'apache-arrow';

function ArrowTable({arrowTable}: {arrowTable: Table}) {
  const {columns, data} = useArrowDataTable(arrowTable);

  return <DataTablePaginated columns={columns} data={data} pageSize={25} />;
}
```

## Advanced Features

* **Custom Cell Rendering**: Define custom renderers for specific cell types
* **Row Selection**: Enable row selection with checkboxes
* **Expandable Rows**: Show additional details in expandable row sections
* **Column Resizing**: Allow users to resize columns
* **Export Options**: Export table data to CSV or other formats
* **Theming**: Customize the appearance to match your application

For more information, visit the SQLRooms documentation.

## Type Aliases

* [DataTablePaginatedProps](type-aliases/DataTablePaginatedProps.md)

## Functions

* [ColumnTypeBadge](functions/ColumnTypeBadge.md)
* [DataTableArrowPaginated](functions/DataTableArrowPaginated.md)
* [DataTableModal](functions/DataTableModal.md)
* [DataTablePaginated](functions/DataTablePaginated.md)
* [~~DataTableVirtualized~~](functions/DataTableVirtualized.md)
* [QueryDataTable](functions/QueryDataTable.md)
* [QueryDataTableActionsMenu](functions/QueryDataTableActionsMenu.md)
* [useArrowDataTable](functions/useArrowDataTable.md)
* [makePagedQuery](functions/makePagedQuery.md)

---

---
url: /api/discuss.md
---
# @sqlrooms/discuss

A simple discussion system for SQLRooms applications. Can be used for commenting and annotation with support for threaded conversations, real-time updates, and anchor-based discussions.

## Overview

The `@sqlrooms/discuss` module provides a complete discussion system with the following key features:

* **Threaded conversations**: Support for replies to discussions and comments
* **Anchor-based discussions**: Link discussions to specific data points or UI elements
* **Real-time state management**: Built on Zustand for reactive updates
* **Customizable rendering**: Flexible component system for custom UI implementations
* **Delete confirmation**: Built-in confirmation dialogs for safe content removal
* **Highlighting**: Visual highlighting of specific discussions

## Main Components

### Core Components

#### `DiscussionList`

The main container component that renders all discussions with built-in forms for adding, editing, and replying to content.

```tsx
import {DiscussionList} from '@sqlrooms/discuss';

<DiscussionList
  className="flex flex-col gap-4"
  renderComment={(props) => <CustomCommentRenderer {...props} />}
  renderDiscussion={(props) => <CustomDiscussionRenderer {...props} />}
/>;
```

#### `CommentItem`

Individual comment renderer with built-in edit/delete actions.

```tsx
import {CommentItem} from '@sqlrooms/discuss';

<CommentItem comment={comment} discussion={discussion}>
  <div className="flex flex-col gap-1">
    <div className="text-muted-foreground text-xs">
      {comment.userId} - {formatTimeRelative(comment.timestamp)}
    </div>
    <div className="whitespace-pre-wrap text-sm">{comment.text}</div>
  </div>
</CommentItem>;
```

#### `DiscussionItem`

Container for a complete discussion thread including root comment and replies.

```tsx
import {DiscussionItem} from '@sqlrooms/discuss';

<DiscussionItem
  discussion={discussion}
  renderComment={customCommentRenderer}
  className="rounded border p-4"
/>;
```

### Store Integration

#### Store Setup with `createDiscussSlice`

To use the discussion system, you need to integrate it with your room store using `createDiscussSlice`:

```tsx
import {
  createDefaultDiscussConfig,
  createDiscussSlice,
  DiscussSliceConfig,
  DiscussSliceState,
} from '@sqlrooms/discuss';
import {
  BaseRoomConfig,
  createRoomShellSlice,
  createRoomStore,
  RoomShellSliceState,
} from '@sqlrooms/room-shell';
import {z} from 'zod';

// 1. Extend your app config with DiscussSliceConfig
export const RoomConfig = BaseRoomConfig.merge(DiscussSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// 2. Extend your app state with DiscussSliceState
export type RoomState = RoomShellSliceState<RoomConfig> & DiscussSliceState;

// 3. Create the store with discuss slice
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Add the discuss slice with a user ID
    ...createDiscussSlice({userId: 'current-user-id'})(set, get, store),

    // Add your room shell slice
    ...createRoomShellSlice<RoomConfig>({
      connector: yourDatabaseConnector,
      config: {
        // Include default discuss config
        ...createDefaultDiscussConfig(),
        // Your other config...
        layout: {
          /* your layout */
        },
        dataSources: [
          /* your data sources */
        ],
      },
      room: {
        // Your room configuration
      },
    })(set, get, store),
  }),
);
```

#### Using the Store Hook

Access discussion state and actions using the provided hook:

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function MyComponent() {
  // Get discussions
  const discussions = useStoreWithDiscussion(
    (state) => state.discuss.config.discussions,
  );

  // Get actions
  const addDiscussion = useStoreWithDiscussion(
    (state) => state.discuss.addDiscussion,
  );
  const setReplyToItem = useStoreWithDiscussion(
    (state) => state.discuss.setReplyToItem,
  );

  // Add a new discussion
  const handleAddDiscussion = (text: string, anchorId?: string) => {
    addDiscussion(text, anchorId);
  };

  // Start replying to a discussion
  const handleReply = (discussionId: string) => {
    setReplyToItem({discussionId});
  };
}
```

## Usage Examples

### Basic Discussion Panel

```tsx
import {DiscussionList, CommentItem} from '@sqlrooms/discuss';
import {useStoreWithDiscussion} from '@sqlrooms/discuss';
import {formatTimeRelative} from '@sqlrooms/utils';

const DiscussionPanel = () => {
  const discussions = useStoreWithDiscussion(
    (state) => state.discuss.config.discussions,
  );

  return (
    <div className="h-full">
      {discussions.length === 0 ? (
        <div className="py-10 text-center text-gray-400">
          <p>No comments yet. Start a discussion!</p>
        </div>
      ) : (
        <DiscussionList
          className="flex flex-col gap-4"
          renderComment={(props) => {
            const {comment, discussion} = props;
            const {anchorId} = discussion;
            const isRootComment = comment.id === discussion.rootComment.id;

            return (
              <CommentItem {...props}>
                <div className="flex flex-col gap-1">
                  {anchorId && isRootComment && (
                    <div className="text-md flex items-center gap-2 font-medium">
                      📍 Linked to: {anchorId}
                    </div>
                  )}
                  <div className="text-muted-foreground text-xs">
                    {comment.userId} - {formatTimeRelative(comment.timestamp)}
                  </div>
                  <div className="whitespace-pre-wrap text-sm">
                    {comment.text}
                  </div>
                </div>
              </CommentItem>
            );
          }}
        />
      )}
    </div>
  );
};
```

### Anchor-Based Discussions

Link discussions to specific data points or UI elements:

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function DataVisualization() {
  const addDiscussion = useStoreWithDiscussion(
    (state) => state.discuss.addDiscussion,
  );
  const setHighlightedDiscussionId = useStoreWithDiscussion(
    (state) => state.discuss.setHighlightedDiscussionId,
  );

  // Handle clicking on a data point
  const handleDataPointClick = (dataId: string) => {
    // Add a discussion linked to this data point
    addDiscussion('What do you think about this data point?', dataId);
  };

  // Highlight related discussion when hovering over data
  const handleDataPointHover = (dataId: string) => {
    const discussions =
      useStoreWithDiscussion.getState().discuss.config.discussions;
    const relatedDiscussion = discussions.find((d) => d.anchorId === dataId);
    if (relatedDiscussion) {
      setHighlightedDiscussionId(relatedDiscussion.id);
    }
  };

  return (
    <div>
      {/* Your data visualization with clickable elements */}
      <div
        onClick={() => handleDataPointClick('airport-LAX')}
        onMouseEnter={() => handleDataPointHover('airport-LAX')}
        className="cursor-pointer hover:bg-blue-100"
      >
        LAX Airport
      </div>
    </div>
  );
}
```

### Custom Comment Rendering

```tsx
import {DiscussionList, CommentItem} from '@sqlrooms/discuss';
import {Avatar, Badge} from '@sqlrooms/ui';

const CustomDiscussionPanel = () => {
  return (
    <DiscussionList
      renderComment={(props) => {
        const {comment, discussion} = props;

        return (
          <CommentItem {...props}>
            <div className="flex gap-3">
              <Avatar className="h-8 w-8">
                {comment.userId.charAt(0).toUpperCase()}
              </Avatar>
              <div className="flex-1">
                <div className="mb-1 flex items-center gap-2">
                  <span className="font-medium">{comment.userId}</span>
                  <Badge variant="secondary" className="text-xs">
                    {formatTimeRelative(comment.timestamp)}
                  </Badge>
                </div>
                <div className="text-sm leading-relaxed">{comment.text}</div>
              </div>
            </div>
          </CommentItem>
        );
      }}
    />
  );
};
```

### Programmatic Discussion Management

```tsx
import {useStoreWithDiscussion} from '@sqlrooms/discuss';

function DiscussionManager() {
  const {
    addDiscussion,
    removeDiscussion,
    addComment,
    setReplyToItem,
    setEditingItem,
    submitEdit,
  } = useStoreWithDiscussion((state) => state.discuss);

  // Add a new discussion
  const createDiscussion = () => {
    addDiscussion('New discussion topic', 'optional-anchor-id');
  };

  // Reply to a discussion
  const replyToDiscussion = (discussionId: string) => {
    setReplyToItem({discussionId});
    // User can now type in the form and call submitEdit
  };

  // Edit a comment
  const editComment = (discussionId: string, commentId: string) => {
    setEditingItem({discussionId, commentId});
    // User can now edit in the form and call submitEdit
  };

  // Direct comment addition (bypassing UI state)
  const addDirectComment = (discussionId: string, text: string) => {
    addComment(discussionId, text);
  };

  return (
    <div className="flex gap-2">
      <button onClick={createDiscussion}>New Discussion</button>
      <button onClick={() => replyToDiscussion('discussion-id')}>Reply</button>
      <button onClick={() => editComment('discussion-id', 'comment-id')}>
        Edit
      </button>
    </div>
  );
}
```

## API Reference

### Types

* `Comment`: Individual comment with id, userId, text, timestamp, and optional parentId
* `Discussion`: Container with id, optional anchorId, rootComment, and array of reply comments
* `DiscussSliceConfig`: Configuration type for the discuss slice
* `DiscussSliceState`: State type including all discussion actions and UI state

### Key Functions

* `createDiscussSlice({ userId })`: Creates the discussion slice for your store
* `createDefaultDiscussConfig()`: Returns default configuration for discussions
* `useStoreWithDiscussion(selector)`: Hook to access discussion state and actions

### Main Actions

* `submitEdit(text)`: Submit based on current UI state (add/reply/edit)
* `addDiscussion(text, anchorId?)`: Add new discussion
* `addComment(discussionId, text, parentId?)`: Add reply to discussion
* `setReplyToItem(item)`: Set reply context for UI
* `setEditingItem(item)`: Set editing context for UI
* `setHighlightedDiscussionId(id)`: Highlight specific discussion

This module integrates seamlessly with the SQLRooms ecosystem and provides a complete foundation for building collaborative discussion features in your applications.

## Type Aliases

* [Comment](type-aliases/Comment.md)
* [Discussion](type-aliases/Discussion.md)
* [DiscussSliceConfig](type-aliases/DiscussSliceConfig.md)
* [DiscussSliceState](type-aliases/DiscussSliceState.md)
* [RoomStateWithDiscussion](type-aliases/RoomStateWithDiscussion.md)

## Variables

* [Comment](variables/Comment.md)
* [Discussion](variables/Discussion.md)
* [DiscussSliceConfig](variables/DiscussSliceConfig.md)

## Functions

* [createDefaultDiscussConfig](functions/createDefaultDiscussConfig.md)
* [createDiscussSlice](functions/createDiscussSlice.md)
* [useStoreWithDiscussion](functions/useStoreWithDiscussion.md)
* [DiscussionList](functions/DiscussionList.md)
* [CommentItem](functions/CommentItem.md)
* [DeleteConfirmDialog](functions/DeleteConfirmDialog.md)
* [DiscussionItem](functions/DiscussionItem.md)

---

---
url: /api/dropzone.md
---
# @sqlrooms/dropzone

This package is part of the SQLRooms framework.

A flexible file upload component for SQLRooms applications that provides drag-and-drop functionality for files. This package makes it easy to handle file uploads with a modern, user-friendly interface.

## Features

* 📁 **Drag and Drop**: Intuitive drag-and-drop file upload interface
* 📋 **File Selection**: Traditional file selection dialog support
* 🔍 **File Validation**: Validate file types and sizes
* 📊 **Upload Progress**: Track and display upload progress
* 🎨 **Customizable**: Flexible styling and configuration options
* 🧩 **React Integration**: Seamless integration with React applications

## Installation

```bash
npm install @sqlrooms/dropzone
# or
yarn add @sqlrooms/dropzone
```

## Basic Usage

### Simple File Dropzone

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function MyFileUploader() {
  const handleFileDrop = (files) => {
    console.log('Files dropped:', files);
    // Process the files...
  };

  return (
    <FileDropzone
      onFileDrop={handleFileDrop}
      accept=".csv,.json,.xlsx"
      maxSize={10 * 1024 * 1024} // 10MB
    />
  );
}
```

### With Custom Styling

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function CustomStyledDropzone() {
  return (
    <FileDropzone
      onFileDrop={handleFiles}
      className="rounded-lg border-2 border-dashed border-blue-400 p-8 transition-colors hover:border-blue-600"
      activeClassName="border-green-500 bg-green-50"
      rejectClassName="border-red-500 bg-red-50"
      dragMessage="Drop your files here"
      idleMessage="Drag files or click to upload"
      rejectMessage="File type not supported"
    />
  );
}
```

### With File Type Validation

```tsx
import {FileDropzone} from '@sqlrooms/dropzone';

function DataFileUploader() {
  const handleFileDrop = (files) => {
    // Process data files...
  };

  return (
    <div className="rounded-lg border p-4">
      <h2 className="mb-2 text-xl font-bold">Upload Data Files</h2>
      <p className="mb-4 text-gray-600">
        Supported formats: CSV, JSON, Excel, Parquet
      </p>
      <FileDropzone
        onFileDrop={handleFileDrop}
        accept={{
          'text/csv': ['.csv'],
          'application/json': ['.json'],
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
            '.xlsx',
          ],
          'application/octet-stream': ['.parquet'],
        }}
        maxFiles={5}
        maxSize={50 * 1024 * 1024} // 50MB
      />
    </div>
  );
}
```

## Advanced Features

* **Multiple File Upload**: Support for uploading multiple files at once
* **File Preview**: Preview files before uploading
* **Custom Validation**: Define custom validation rules for files
* **Upload Cancellation**: Cancel ongoing uploads
* **Accessibility**: Fully accessible interface with keyboard support

For more information, visit the SQLRooms documentation.

## Functions

* [FileDropzone](functions/FileDropzone.md)

---

---
url: /api/duckdb.md
---
# @sqlrooms/duckdb

A powerful wrapper around DuckDB-WASM that provides React hooks and utilities for working with DuckDB in browser environments.

## Features

### React Integration & Type Safety

* **React Hooks**: Seamless integration with React applications via `useSql`
* **Runtime Validation**: Optional Zod schema validation for query results with type transformations
* **Typed Row Accessors**: Type-safe row access with validation and multiple iteration methods

### Data Management

* **File Operations**: Import data from various file formats (CSV, JSON, Parquet) with auto-detection
* **Arrow Integration**: Work directly with Apache Arrow tables for efficient columnar data processing
* **Schema Management**: Comprehensive database, schema, and table discovery and management
* **Qualified Table Names**: Full support for `database.schema.table` naming convention

### Performance & Operations

* **Query Deduplication**: Automatic deduplication of identical running queries to prevent duplicate execution
* **Query Cancellation**: Cancel running queries with full composability support via `QueryHandle` interface ([learn more](https://sqlrooms.org/query-cancellation))
* **Data Export**: Export query results to CSV files with pagination for large datasets
* **Batch Processing**: Handle large datasets efficiently with built-in pagination support

## Installation

```bash
npm install @sqlrooms/duckdb
```

## Basic Usage

### Using the SQL Hook

```tsx
import {useSql} from '@sqlrooms/duckdb';

function UserList() {
  // Basic usage with TypeScript types
  const {data, isLoading, error} = useSql<{id: number; name: string}>({
    query: 'SELECT id, name FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return (
    <ul>
      {Array.from(data.rows()).map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
```

For more information and examples on using the `useSql` hook, see the [useSql API documentation](/api/duckdb/functions/useSql).

### Using Zod for Runtime Validation

```tsx
import {useSql} from '@sqlrooms/duckdb';
import {z} from 'zod';

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  created_at: z.string().transform((str) => new Date(str)),
});

function ValidatedUserList() {
  const {data, isLoading, error} = useSql(userSchema, {
    query: 'SELECT id, name, email, created_at FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) {
    if (error instanceof z.ZodError) {
      return <div>Validation Error: {error.errors[0].message}</div>;
    }
    return <div>Error: {error.message}</div>;
  }
  if (!data) return null;

  return (
    <ul>
      {data.toArray().map((user) => (
        <li key={user.id}>
          {user.name} ({user.email}) - Joined:{' '}
          {user.created_at.toLocaleDateString()}
        </li>
      ))}
    </ul>
  );
}
```

### Accessing the Underlying Arrow Table and Schema

You can access the underlying Arrow table and schema of a `useSql()` query result. This is especially useful if you want to pass the data to a library that expect an Apache Arrow Table as input without additional data transformation:

```tsx
import {useSql} from '@sqlrooms/duckdb';

function ArrowTableSchemaExample() {
  const {data, isLoading, error} = useSql({
    query: 'SELECT id, name FROM users',
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data || !data.arrowTable) return null;

  const {arrowTable} = data;
  const fields = arrowTable.schema.fields;
  const numRows = arrowTable.numRows;

  return (
    <table>
      <thead>
        <tr>
          {fields.map((field) => (
            <th key={field.name}>{field.name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {Array.from({length: numRows}).map((_, rowIdx) => (
          <tr key={rowIdx}>
            {fields.map((field, colIdx) => (
              <td key={field.name}>
                {String(arrowTable.getChildAt(colIdx)?.get(rowIdx) ?? '')}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

## Working with Tables

### Using the Store for Direct Database Operations

```tsx
function DatabaseManager() {
  const createTableFromQuery = useRoomStore(
    (state) => state.db.createTableFromQuery,
  );
  const addTable = useRoomStore((state) => state.db.addTable);
  const dropTable = useRoomStore((state) => state.db.dropTable);
  const tables = useRoomStore((state) => state.db.tables);
  const refreshTableSchemas = useRoomStore(
    (state) => state.db.refreshTableSchemas,
  );

  // Create a table from a query
  const handleCreateTable = async () => {
    const result = await createTableFromQuery(
      'filtered_users',
      'SELECT * FROM users WHERE active = true',
    );
    console.log(`Created table with ${result.rowCount} rows`);
  };

  // Add a table from JavaScript objects
  const handleAddTable = async () => {
    const users = [
      {id: 1, name: 'Alice', email: 'alice@example.com'},
      {id: 2, name: 'Bob', email: 'bob@example.com'},
    ];
    await addTable('new_users', users);
  };

  // Drop a table
  const handleDropTable = async () => {
    await dropTable('old_table');
  };

  return (
    <div>
      <button onClick={handleCreateTable}>Create Filtered Users Table</button>
      <button onClick={handleAddTable}>Add New Users Table</button>
      <button onClick={handleDropTable}>Drop Old Table</button>
      <button onClick={refreshTableSchemas}>Refresh Schemas</button>

      <h3>Available Tables:</h3>
      <ul>
        {tables.map((table) => (
          <li key={table.table.toString()}>
            {table.table.toString()} ({table.columns.length} columns)
          </li>
        ))}
      </ul>
    </div>
  );
}
```

### Working with Qualified Table Names

```tsx
import {makeQualifiedTableName} from '@sqlrooms/duckdb';

// Support for database.schema.table naming
const qualifiedTable = makeQualifiedTableName({
  database: 'mydb',
  schema: 'public',
  table: 'users',
});

// Use with table operations
await createTableFromQuery(qualifiedTable, 'SELECT * FROM source_table');
await dropTable(qualifiedTable);
const tableExists = await checkTableExists(qualifiedTable);
```

## Loading Data from Files

### Using Load Functions Directly

```tsx
import {loadCSV, loadJSON, loadParquet, loadObjects} from '@sqlrooms/duckdb';

function DataLoader() {
  const getConnector = useRoomStore((state) => state.db.getConnector);

  const handleLoadCSV = async (file: File) => {
    const connector = await getConnector();

    // Generate SQL to load CSV file
    const sql = loadCSV('my_table', file.name, {
      auto_detect: true,
      replace: true,
    });

    // Execute the load operation
    await connector.query(sql).result;
  };

  const handleLoadObjects = async () => {
    const connector = await getConnector();
    const data = [
      {id: 1, name: 'Alice'},
      {id: 2, name: 'Bob'},
    ];

    // Generate SQL to load objects
    const sql = loadObjects('users', data, {replace: true});
    await connector.query(sql).result;
  };

  return (
    <div>
      <input
        type="file"
        accept=".csv"
        onChange={(e) => {
          if (e.target.files?.[0]) handleLoadCSV(e.target.files[0]);
        }}
      />
      <button onClick={handleLoadObjects}>Load Sample Data</button>
    </div>
  );
}
```

### Using the Connector Directly

```tsx
function AdvancedDataLoader() {
  const connector = useRoomStore((state) => state.db.connector);

  const handleFileUpload = async (file: File) => {
    // Load file directly using the connector
    await connector.loadFile(file, 'uploaded_data', {
      method: 'auto', // Auto-detect file type
      replace: true,
      temp: false,
    });
  };

  const handleLoadArrowTable = async (arrowTable: arrow.Table) => {
    // Load Arrow table directly
    await connector.loadArrow(arrowTable, 'arrow_data');
  };

  return (
    <input
      type="file"
      accept=".csv,.json,.parquet"
      onChange={(e) => {
        if (e.target.files?.[0]) handleFileUpload(e.target.files[0]);
      }}
    />
  );
}
```

## Exporting Data to CSV

```tsx
import {useExportToCsv} from '@sqlrooms/duckdb';

function ExportButton() {
  const {exportToCsv} = useExportToCsv();

  const handleExport = async () => {
    await exportToCsv('SELECT * FROM users ORDER BY name', 'users_export.csv');
  };

  return <button onClick={handleExport}>Export to CSV</button>;
}
```

## Low-Level DuckDB Access

### Basic direct usage

```tsx
async function executeCustomQuery() {
  // Grab the connector directly (no React hook necessary inside plain TS)
  const connector = useRoomStore((state) => state.db.connector);

  // QueryHandle is promise-like – await it directly
  const result = await connector.query('SELECT COUNT(*) AS count FROM users');

  // Inspect Arrow table
  const count = result.getChildAt(0)?.get(0);
  console.log(`Total users: ${count}`);
}
```

### Cancellation examples

```tsx
async function cancelExample() {
  const connector = useRoomStore((state) => state.db.connector);

  // 1. Manual cancel via the handle
  const query = connector.query('SELECT * FROM large_table');
  setTimeout(() => h.cancel(), 2000); // cancel after 2 s
  await query; // throws if cancelled

  // 2. Composable cancellation – many queries, one controller
  const controller = new AbortController();
  const q1 = connector.query('SELECT 1', {signal: controller.signal});
  const q2 = connector.query('SELECT 2', {signal: controller.signal});
  controller.abort(); // cancels q1 & q2
  await Promise.allSettled([q1, q2]);
}
```

### Advanced operations with the Zustand store

```tsx
function AdvancedOperations() {
  const executeSql = useRoomStore((s) => s.db.executeSql);
  const sqlSelectToJson = useRoomStore((s) => s.db.sqlSelectToJson);
  const checkTableExists = useRoomStore((s) => s.db.checkTableExists);

  const handleAdvancedQuery = async () => {
    // Cached execution with deduplication
    const query = await executeSql('SELECT * FROM users LIMIT 10');
    if (query) {
      const rows = await query; // await handle directly
      console.log('Query result:', rows);
    }

    // Parse SQL to JSON (analysis tool)
    const parsed = await sqlSelectToJson('SELECT id, name FROM users');
    console.log('Parsed query:', parsed);

    // Safety check before destructive operations
    const exists = await checkTableExists('users');
    console.log('Table exists:', exists);
  };

  return <button onClick={handleAdvancedQuery}>Run Advanced Operations</button>;
}
```

For more information, visit the SQLRooms documentation.

## Enumerations

* [DuckDBAccessMode](enumerations/DuckDBAccessMode.md)

## Interfaces

* [DuckDBConfig](interfaces/DuckDBConfig.md)
* [DuckDBBundles](interfaces/DuckDBBundles.md)
* [BaseDuckDbConnectorOptions](interfaces/BaseDuckDbConnectorOptions.md)
* [BaseDuckDbConnectorImpl](interfaces/BaseDuckDbConnectorImpl.md)
* [QueryOptions](interfaces/QueryOptions.md)
* [DuckDbConnector](interfaces/DuckDbConnector.md)
* [WasmDuckDbConnector](interfaces/WasmDuckDbConnector.md)
* [TypedRowAccessor](interfaces/TypedRowAccessor.md)
* [UseSqlQueryResult](interfaces/UseSqlQueryResult.md)

## Type Aliases

* [DuckDbSliceConfig](type-aliases/DuckDbSliceConfig.md)
* [SchemaAndDatabase](type-aliases/SchemaAndDatabase.md)
* [DuckDbSliceState](type-aliases/DuckDbSliceState.md)
* [QueryHandle](type-aliases/QueryHandle.md)
* [QualifiedTableName](type-aliases/QualifiedTableName.md)
* [TableColumn](type-aliases/TableColumn.md)
* [DataTable](type-aliases/DataTable.md)
* [ColumnTypeCategory](type-aliases/ColumnTypeCategory.md)
* [DbSchemaNode](type-aliases/DbSchemaNode.md)
* [NodeObject](type-aliases/NodeObject.md)
* [ColumnNodeObject](type-aliases/ColumnNodeObject.md)
* [TableNodeObject](type-aliases/TableNodeObject.md)
* [SchemaNodeObject](type-aliases/SchemaNodeObject.md)
* [DatabaseNodeObject](type-aliases/DatabaseNodeObject.md)
* [~~DuckConn~~](type-aliases/DuckConn.md)
* [~~DuckDb~~](type-aliases/DuckDb.md)
* [~~DuckDbQueryResult~~](type-aliases/DuckDbQueryResult.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)

## Variables

* [DuckDbSliceConfig](variables/DuckDbSliceConfig.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDefaultDuckDbConfig](functions/createDefaultDuckDbConfig.md)
* [createDuckDbSlice](functions/createDuckDbSlice.md)
* [useStoreWithDuckDb](functions/useStoreWithDuckDb.md)
* [arrowTableToJson](functions/arrowTableToJson.md)
* [createBaseDuckDbConnector](functions/createBaseDuckDbConnector.md)
* [createWasmDuckDbConnector](functions/createWasmDuckDbConnector.md)
* [createWebSocketDuckDbConnector](functions/createWebSocketDuckDbConnector.md)
* [createDuckDbConnector](functions/createDuckDbConnector.md)
* [isWasmDuckDbConnector](functions/isWasmDuckDbConnector.md)
* [load](functions/load.md)
* [loadCSV](functions/loadCSV.md)
* [loadJSON](functions/loadJSON.md)
* [loadParquet](functions/loadParquet.md)
* [loadSpatial](functions/loadSpatial.md)
* [loadObjects](functions/loadObjects.md)
* [isQualifiedTableName](functions/isQualifiedTableName.md)
* [makeQualifiedTableName](functions/makeQualifiedTableName.md)
* [escapeVal](functions/escapeVal.md)
* [escapeId](functions/escapeId.md)
* [isNumericDuckType](functions/isNumericDuckType.md)
* [getColValAsNumber](functions/getColValAsNumber.md)
* [getSqlErrorWithPointer](functions/getSqlErrorWithPointer.md)
* [splitSqlStatements](functions/splitSqlStatements.md)
* [sanitizeQuery](functions/sanitizeQuery.md)
* [makeLimitQuery](functions/makeLimitQuery.md)
* [useExportToCsv](functions/useExportToCsv.md)
* [getDuckDbTypeCategory](functions/getDuckDbTypeCategory.md)
* [getArrowColumnTypeCategory](functions/getArrowColumnTypeCategory.md)
* [createTypedRowAccessor](functions/createTypedRowAccessor.md)
* [useDuckDb](functions/useDuckDb.md)
* [useSql](functions/useSql.md)
* [~~useDuckDbQuery~~](functions/useDuckDbQuery.md)
* [isSpatialLoadFileOptions](functions/isSpatialLoadFileOptions.md)

---

---
url: /api/duckdb-config.md
---
# @sqlrooms/duckdb-config

A central configuration and type definitions package that maintains base DuckDB configuration schemas and Zod schema definitions for SQLRooms. It provides TypeScript types and interfaces along with essential constants and utilities used for managing DuckDB state.

## Features

* 📝 **DuckDB Configuration**: Define and manage room DuckDB configuration schemas.
* 🔍 **Type Safety**: Strong TypeScript typing for DuckDB configuration objects.
* ✅ **Validation**: Zod schemas for runtime validation of DuckDB configurations.

## Installation

```bash
npm install @sqlrooms/duckdb-config
# or
yarn add @sqlrooms/duckdb-config
```

## Basic Usage

### Working with DuckDB Configuration

```tsx
import {
  DuckDbSliceConfig,
  createDefaultDuckDbConfig,
} from '@sqlrooms/duckdb-config';

// Create a new DuckDB configuration
const duckDbConfig: DuckDbSliceConfig = createDefaultDuckDbConfig();

// This is then used as part of a bigger room configuration.
// The `RoomConfig` for a room is typically a composition of slice configurations.
// For example:
//
// import {SqlEditorSliceConfig} from '@sqlrooms/sql-editor-config';
//
// type RoomConfig = DuckDbSliceConfig & SqlEditorSliceConfig;
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [DuckDbSliceConfig](type-aliases/DuckDbSliceConfig.md)

## Variables

* [DuckDbSliceConfig](variables/DuckDbSliceConfig.md)

## Functions

* [createDefaultDuckDbConfig](functions/createDefaultDuckDbConfig.md)

---

---
url: /api/layout.md
---
# @sqlrooms/layout

This package is part of the SQLRooms framework and provides flexible layout components for building complex, resizable, and draggable interfaces.

## Overview

The `@sqlrooms/layout` package offers a set of components and utilities for creating dynamic, multi-pane layouts in SQLRooms applications. It's primarily built around the [react-mosaic](https://nomcopter.github.io/react-mosaic/) library, which provides a powerful windowing system similar to the one found in advanced IDEs.

> **Note:** This package uses [react-mosaic](https://nomcopter.github.io/react-mosaic/) which should not be confused with [uwdata/mosaic](https://github.com/uwdata/mosaic) used in the [`@sqlrooms/mosaic`](/api/mosaic/) package for data visualization purposes.

## Installation

```bash
npm install @sqlrooms/layout
```

## Mosaic Tree Structure

The mosaic layout is defined by a tree structure where each node is either a string (representing a panel ID) or an object with `direction`, `first`, `second`, and optional `splitPercentage` properties. Here's an example of how a mosaic tree might look:

```tsx
// Simple two-panel layout with 30/70 split
const simpleMosaicTree = {
  direction: 'row',
  first: 'data-sources', // Left panel (30% width)
  second: 'main', // Right panel (70% width)
  splitPercentage: 30,
};

// More complex nested layout
const complexMosaicTree = {
  direction: 'row',
  first: 'data-sources', // Left panel
  second: {
    // Right side contains a nested layout
    direction: 'column',
    first: 'main', // Top panel
    second: {
      // Bottom contains another nested layout
      direction: 'row',
      first: 'sql-editor',
      second: 'visualization',
      splitPercentage: 50,
    },
    splitPercentage: 60,
  },
  splitPercentage: 20,
};
```

## Components

### MosaicLayout

A wrapper around the `Mosaic` component from react-mosaic-component that provides a customized look and feel consistent with SQLRooms styling.

```tsx
import {MosaicLayout} from '@sqlrooms/layout';

// Example usage
<MosaicLayout
  renderTile={(id, path) => <YourTileContent id={id} />}
  value={yourMosaicTree}
  onChange={handleLayoutChange}
/>;
```

### MosaicTile

A component for rendering individual tiles within the mosaic layout.

## Utility Functions

The package provides several utility functions for working with mosaic layouts:

* `makeMosaicStack`: Creates a stack of mosaic nodes with specified weights and direction
* `visitMosaicLeafNodes`: Traverses all leaf nodes in a mosaic tree
* `getVisibleMosaicLayoutPanels`: Gets an array of all visible panel IDs
* `findMosaicNodePathByKey`: Finds the path to a specific node by its key
* `removeMosaicNodeByKey`: Removes a node from the mosaic tree by its key

## Learn More

For more information about the underlying react-mosaic library, visit:

* [react-mosaic documentation](https://nomcopter.github.io/react-mosaic/)
* [react-mosaic GitHub repository](https://github.com/nomcopter/react-mosaic)

## License

MIT

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [RoomPanelInfo](type-aliases/RoomPanelInfo.md)
* [LayoutSliceConfig](type-aliases/LayoutSliceConfig.md)
* [LayoutSliceState](type-aliases/LayoutSliceState.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [LayoutSliceConfig](variables/LayoutSliceConfig.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultLayoutConfig](functions/createDefaultLayoutConfig.md)
* [createLayoutSlice](functions/createLayoutSlice.md)
* [useStoreWithLayout](functions/useStoreWithLayout.md)
* [MosaicLayout](functions/MosaicLayout.md)
* [makeMosaicStack](functions/makeMosaicStack.md)
* [visitMosaicLeafNodes](functions/visitMosaicLeafNodes.md)
* [getVisibleMosaicLayoutPanels](functions/getVisibleMosaicLayoutPanels.md)
* [findMosaicNodePathByKey](functions/findMosaicNodePathByKey.md)
* [removeMosaicNodeByKey](functions/removeMosaicNodeByKey.md)

---

---
url: /api/layout-config.md
---
# @sqlrooms/layout-config

A central configuration and type definitions package that maintains base layout configuration schemas and Zod schema definitions for SQLRooms. It provides TypeScript types and interfaces along with essential constants and utilities used for managing layouts.

## Features

* 📝 **Layout Configuration**: Define and manage room layout configuration schemas for Mosaic layouts
* 🔍 **Type Safety**: Strong TypeScript typing for layout configuration objects
* ✅ **Validation**: Zod schemas for runtime validation of layout configurations

## Installation

```bash
npm install @sqlrooms/layout-config
# or
yarn add @sqlrooms/layout-config
```

## Basic Usage

### Working with Mosaic Layout Configuration

```tsx
import {
  MosaicLayoutConfig,
  LayoutConfig,
  MAIN_VIEW,
} from '@sqlrooms/layout-config';

// Create a new room configuration
const layoutConfig: MosaicLayoutConfig = {
  type: 'mosaic',
  nodes: {
    direction: 'row',
    first: MAIN_VIEW,
    second: {
      direction: 'column',
      first: 'files',
      second: 'tables',
    },
  },
};

// This can be part of a bigger room configuration
interface RoomConfig {
  // ... other properties
  layout: LayoutConfig;
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)

---

---
url: /api/monaco-editor.md
---
# @sqlrooms/monaco-editor

This package is part of the SQLRooms framework.

# Monaco Editor

Monaco Editor components for SQLRooms, including specialized editors for JSON.

## Installation

```bash
npm install @sqlrooms/monaco-editor
```

## Components

### MonacoEditor

A base Monaco Editor component with common functionality.

```tsx
import {MonacoEditor} from '@sqlrooms/monaco-editor';

function MyComponent() {
  return (
    <MonacoEditor
      className="h-[400px]"
      language="javascript"
      value="// Your code here"
      onChange={(value) => console.log(value)}
    />
  );
}
```

### JsonMonacoEditor

A specialized Monaco Editor for editing JSON with schema validation.

```tsx
import {JsonMonacoEditor} from '@sqlrooms/monaco-editor';

function MyJsonEditor() {
  const schema = {
    type: 'object',
    properties: {
      name: {type: 'string'},
      age: {type: 'number'},
    },
    required: ['name'],
  };

  return (
    <JsonMonacoEditor
      className="h-[400px]"
      value={{name: 'John', age: 30}}
      schema={schema}
      onChange={(value) => console.log(value)}
    />
  );
}
```

### Configuring the loader for offline use

By default, the editor loads its sources from a CDN. To use the editor in an
offline environment, you need to bundle `monaco-editor` with your application.
You can do this with the `configureMonacoLoader` utility. This function is a
thin wrapper around the [`loader.config` function](https://github.com/suren-atoyan/monaco-react#loader-config)
and sets up `self.MonacoEnvironment` automatically when web workers are passed.

Here's an example of how to configure the loader to use bundled workers with
Vite (note the `?worker` suffix):

```ts
import {configureMonacoLoader} from '@sqlrooms/monaco-editor';
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

// Use the monaco-editor package instead of a CDN
configureMonacoLoader({
  monaco,
  workers: {
    default: editorWorker,
    json: jsonWorker,
    typescript: tsWorker,
    javascript: tsWorker,
  },
});
```

You can also use `configureMonacoLoader` to specify a custom path to the
editor's sources, for example, if you are hosting them on a different CDN:

```ts
// configureMonacoLoader({paths: {vs: 'https://unpkg.com/monaco-editor/min/vs'}});
```

## Props

### MonacoEditor Props

| Prop      | Type                 | Default      | Description                              |
| --------- | -------------------- | ------------ | ---------------------------------------- |
| className | string               | ''           | CSS class name for the editor container  |
| language  | string               | 'javascript' | The language of the editor               |
| theme     | 'vs-dark' | 'light' | 'vs-dark'    | The theme of the editor                  |
| value     | string               | ''           | The value of the editor                  |
| readOnly  | boolean              | false        | Whether the editor is read-only          |
| options   | object               | {}           | Additional options for the editor        |
| onMount   | function             | -            | Callback when the editor is mounted      |
| onChange  | function             | -            | Callback when the editor content changes |

### JsonMonacoEditor Props

Extends `MonacoEditorProps` with:

| Prop   | Type             | Default | Description                         |
| ------ | ---------------- | ------- | ----------------------------------- |
| schema | object           | -       | The JSON schema to validate against |
| value  | string | object | ''      | The JSON value to edit              |

## License

MIT

## Interfaces

* [JsonMonacoEditorProps](interfaces/JsonMonacoEditorProps.md)
* [MonacoEditorProps](interfaces/MonacoEditorProps.md)
* [LoaderWorkers](interfaces/LoaderWorkers.md)
* [MonacoLoaderOptions](interfaces/MonacoLoaderOptions.md)

## Type Aliases

* [LoaderConfig](type-aliases/LoaderConfig.md)

## Variables

* [DEFAULT\_CDN\_PATH](variables/DEFAULT_CDN_PATH.md)

## Functions

* [JsonMonacoEditor](functions/JsonMonacoEditor.md)
* [MonacoEditor](functions/MonacoEditor.md)
* [configureMonacoLoader](functions/configureMonacoLoader.md)
* [ensureMonacoLoaderConfigured](functions/ensureMonacoLoaderConfigured.md)
* [hslToHex](functions/hslToHex.md)
* [getCssColor](functions/getCssColor.md)
* [getMonospaceFont](functions/getMonospaceFont.md)

---

---
url: /api/mosaic.md
---
# @sqlrooms/mosaic

This package is part of the SQLRooms framework. It provides React components and hooks for integrating [Mosaic](https://idl.uw.edu/mosaic/) - a visualization library for data exploration and analysis - into SQLRooms applications.

## Overview

Mosaic is a JavaScript library for data visualization and analysis developed by the [Interactive Data Lab (IDL)](https://idl.uw.edu/) at the University of Washington. It combines the expressiveness of declarative visualization grammars with the power of reactive programming and SQL queries.

One of Mosaic's powerful features is its cross-filtering capability powered by DuckDB, allowing users to interactively filter and explore large datasets with millions of records directly in the browser. This enables creating interactive dashboards where selections in one chart automatically filter data in other charts. For an example of this functionality, see the [Cross-Filter Flights demo](https://idl.uw.edu/mosaic/examples/flights-200k.html) which demonstrates interactive filtering across multiple visualizations of a 200,000-record flight dataset.

This package provides:

* React components for rendering Vega-Lite charts using Mosaic
* Hooks for integrating Mosaic with DuckDB in SQLRooms applications
* Utilities for working with Mosaic specifications

## Installation

```bash
npm install @sqlrooms/mosaic
```

## Usage

### VgPlotChart Component

The `VgPlotChart` component renders a Vega-Lite chart using the Mosaic library:

```tsx
import {VgPlotChart, Spec} from '@sqlrooms/mosaic';

const spec: Spec = {
  // Your Vega-Lite specification
};

function MyChart() {
  return <VgPlotChart spec={spec} />;
}
```

### useMosaic Hook

The `useMosaic` hook provides access to the Mosaic connector for DuckDB:

```tsx
import {useMosaic} from '@sqlrooms/mosaic';

function MyComponent() {
  const {isMosaicLoading, mosaicConnector} = useMosaic();

  if (isMosaicLoading) {
    return <div>Loading...</div>;
  }

  // Use mosaicConnector to interact with DuckDB through Mosaic
  return <div>Mosaic is ready!</div>;
}
```

## Resources

* [Mosaic Documentation](https://idl.uw.edu/mosaic/)
* [Cross-Filter Flights Demo](https://idl.uw.edu/mosaic/examples/flights-200k.html)
* [Vega-Lite Documentation](https://vega.github.io/vega-lite/)
* [DuckDB Documentation](https://duckdb.org/docs/)

## License

MIT

## Type Aliases

* [Spec](type-aliases/Spec.md)

## Functions

* [VgPlotChart](functions/VgPlotChart.md)
* [useMosaic](functions/useMosaic.md)

---

---
url: /api/motherduck.md
---
# @sqlrooms/motherduck

[MotherDuck](https://motherduck.com/) is a managed DuckDB-in-the-cloud service that enables you to run DuckDB queries both in your browser and in the cloud.

This package exposes a `createWasmMotherDuckDbConnector` function, which allows SQLRooms to connect to MotherDuck.
The connector is implemented using the [`@motherduck/wasm-client`](https://motherduck.com/docs/sql-reference/wasm-client/) library which is a customized version of [`@duckdb/duckdb-wasm`](https://github.com/duckdb/duckdb-wasm/tree/main/packages/duckdb-wasm) capable of querying MotherDuck datasets in the cloud from the browser.

## Example

See [`MotherDuck Cloud Query Editor`](/examples#motherduck-cloud-query-editor) for a usage example.

## Interfaces

* [WasmMotherDuckDbConnectorOptions](interfaces/WasmMotherDuckDbConnectorOptions.md)
* [WasmMotherDuckDbConnector](interfaces/WasmMotherDuckDbConnector.md)

## Functions

* [isWasmMotherDuckDbConnector](functions/isWasmMotherDuckDbConnector.md)
* [createWasmMotherDuckDbConnector](functions/createWasmMotherDuckDbConnector.md)

---

---
url: /api/recharts.md
---
# @sqlrooms/recharts

A package that provides Recharts integration for SQLRooms based on [shadcn Chart component](https://ui.shadcn.com/docs/components/chart).

## Namespaces

* [CartesianGrid](namespaces/CartesianGrid/index.md)
* [Customized](namespaces/Customized/index.md)
* [Label](namespaces/Label/index.md)
* [LabelList](namespaces/LabelList/index.md)

## Classes

* [Area](classes/Area.md)
* [Bar](classes/Bar.md)
* [Brush](classes/Brush.md)
* [CartesianAxis](classes/CartesianAxis.md)
* [ErrorBar](classes/ErrorBar.md)
* [Line](classes/Line.md)
* [ReferenceArea](classes/ReferenceArea.md)
* [ReferenceDot](classes/ReferenceDot.md)
* [ReferenceLine](classes/ReferenceLine.md)
* [Scatter](classes/Scatter.md)
* [XAxis](classes/XAxis.md)
* [YAxis](classes/YAxis.md)
* [ZAxis](classes/ZAxis.md)
* [Sankey](classes/Sankey.md)
* [Treemap](classes/Treemap.md)
* [DefaultLegendContent](classes/DefaultLegendContent.md)
* [Legend](classes/Legend.md)
* [Tooltip](classes/Tooltip.md)
* [Funnel](classes/Funnel.md)
* [Pie](classes/Pie.md)
* [PolarAngleAxis](classes/PolarAngleAxis.md)
* [PolarRadiusAxis](classes/PolarRadiusAxis.md)
* [Radar](classes/Radar.md)
* [RadialBar](classes/RadialBar.md)

## Interfaces

* [ZAxisProps](interfaces/ZAxisProps.md)
* [TreemapProps](interfaces/TreemapProps.md)
* [DefaultTooltipContentProps](interfaces/DefaultTooltipContentProps.md)
* [ResponsiveContainerProps](interfaces/ResponsiveContainerProps.md)
* [PieLabelRenderProps](interfaces/PieLabelRenderProps.md)

## Type Aliases

* [AreaProps](type-aliases/AreaProps.md)
* [BarProps](type-aliases/BarProps.md)
* [BrushProps](type-aliases/BrushProps.md)
* [CartesianAxisProps](type-aliases/CartesianAxisProps.md)
* [CartesianGridProps](type-aliases/CartesianGridProps.md)
* [ErrorBarProps](type-aliases/ErrorBarProps.md)
* [LineProps](type-aliases/LineProps.md)
* [ReferenceAreaProps](type-aliases/ReferenceAreaProps.md)
* [ReferenceDotProps](type-aliases/ReferenceDotProps.md)
* [ReferenceLineProps](type-aliases/ReferenceLineProps.md)
* [ScatterProps](type-aliases/ScatterProps.md)
* [XAxisProps](type-aliases/XAxisProps.md)
* [YAxisProps](type-aliases/YAxisProps.md)
* [CellProps](type-aliases/CellProps.md)
* [CustomizedProps](type-aliases/CustomizedProps.md)
* [DefaultLegendContentProps](type-aliases/DefaultLegendContentProps.md)
* [LabelProps](type-aliases/LabelProps.md)
* [LabelListProps](type-aliases/LabelListProps.md)
* [LegendProps](type-aliases/LegendProps.md)
* [TextProps](type-aliases/TextProps.md)
* [TooltipProps](type-aliases/TooltipProps.md)
* [LayerProps](type-aliases/LayerProps.md)
* [SurfaceProps](type-aliases/SurfaceProps.md)
* [FunnelProps](type-aliases/FunnelProps.md)
* [PieLabel](type-aliases/PieLabel.md)
* [PieProps](type-aliases/PieProps.md)
* [PolarAngleAxisProps](type-aliases/PolarAngleAxisProps.md)
* [PolarGridProps](type-aliases/PolarGridProps.md)
* [PolarRadiusAxisProps](type-aliases/PolarRadiusAxisProps.md)
* [RadarProps](type-aliases/RadarProps.md)
* [RadialBarProps](type-aliases/RadialBarProps.md)
* [CrossProps](type-aliases/CrossProps.md)
* [CurveProps](type-aliases/CurveProps.md)
* [DotProps](type-aliases/DotProps.md)
* [PolygonProps](type-aliases/PolygonProps.md)
* [RectangleProps](type-aliases/RectangleProps.md)
* [SectorProps](type-aliases/SectorProps.md)
* [SymbolsProps](type-aliases/SymbolsProps.md)
* [TrapezoidProps](type-aliases/TrapezoidProps.md)
* [LegendType](type-aliases/LegendType.md)
* [ChartConfig](type-aliases/ChartConfig.md)

## Variables

* [Global](variables/Global.md)
* [ChartTooltip](variables/ChartTooltip.md)
* [ChartLegend](variables/ChartLegend.md)

## Functions

* [CartesianGrid](functions/CartesianGrid.md)
* [AreaChart](functions/AreaChart.md)
* [BarChart](functions/BarChart.md)
* [ComposedChart](functions/ComposedChart.md)
* [FunnelChart](functions/FunnelChart.md)
* [LineChart](functions/LineChart.md)
* [PieChart](functions/PieChart.md)
* [RadarChart](functions/RadarChart.md)
* [RadialBarChart](functions/RadialBarChart.md)
* [ScatterChart](functions/ScatterChart.md)
* [SunburstChart](functions/SunburstChart.md)
* [Cell](functions/Cell.md)
* [Customized](functions/Customized.md)
* [DefaultTooltipContent](functions/DefaultTooltipContent.md)
* [Label](functions/Label.md)
* [LabelList](functions/LabelList.md)
* [ResponsiveContainer](functions/ResponsiveContainer.md)
* [Text](functions/Text.md)
* [Layer](functions/Layer.md)
* [Surface](functions/Surface.md)
* [PolarGrid](functions/PolarGrid.md)
* [Cross](functions/Cross.md)
* [Curve](functions/Curve.md)
* [Dot](functions/Dot.md)
* [Polygon](functions/Polygon.md)
* [Rectangle](functions/Rectangle.md)
* [Sector](functions/Sector.md)
* [Symbols](functions/Symbols.md)
* [Trapezoid](functions/Trapezoid.md)
* [ChartContainer](functions/ChartContainer.md)
* [ChartStyle](functions/ChartStyle.md)
* [ChartTooltipContent](functions/ChartTooltipContent.md)
* [ChartLegendContent](functions/ChartLegendContent.md)

---

---
url: /api/room-config.md
---
# @sqlrooms/room-config

A central configuration and type definitions package that maintains base room configuration schemas and Zod schema definitions. It provides TypeScript types and interfaces along with essential constants and utilities used throughout the framework.

## Features

* 📝 **Room Configuration**: Define and manage room configuration schemas
* 🔍 **Type Safety**: Strong TypeScript typing for configuration objects
* ✅ **Validation**: Zod schemas for runtime validation of configuration

## Installation

```bash
npm install @sqlrooms/room-config
# or
yarn add @sqlrooms/room-config
```

## Basic Usage

### Working with Base Room Configuration

```tsx
import {BaseRoomConfig} from '@sqlrooms/room-config';

// Create a new room configuration
const roomConfig: BaseRoomConfig = {
  name: 'My SQL Room',
  description: 'A data analysis room using SQLRooms',
  version: '1.0.0',
  settings: {
    theme: 'dark',
    // Other settings...
  },
};

// Access configuration properties
console.log(roomConfig.name); // 'My SQL Room'
```

### Persisting Room Configuration

Room configuration is designed to be saved and restored between sessions. Here's how to use it with Zustand's persist middleware:

```tsx
import {persist} from 'zustand/middleware';
import {createRoomStore, createRoomShellSlice} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';

// Create a store with persistence for configuration
const {useRoomStore} = createRoomStore(
  persist(
    (set, get, store) => ({
      ...createRoomShellSlice({
        // Config is stored at the root level of state for persisting the app state
        config: {
          title: 'My Room',
          // Other configuration properties
        },
        // Room object contains panels and runtime-only state
        room: {
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
    {
      name: 'room-config-storage',
      // Only persist the configuration part of the state
      partialize: (state) => ({
        config: state.config,
      }),
    },
  ),
);

// Access the config in components
function ConfigComponent() {
  // Config is accessed directly from state, not from state.room.config
  const config = useRoomStore((state) => state.config);

  return <div>{config.title}</div>;
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isSpatialLoadFileOptions](functions/isSpatialLoadFileOptions.md)

---

---
url: /api/room-shell.md
---
# @sqlrooms/room-shell

A powerful framework for building and managing data rooms in SQLRooms. This package provides components and utilities for creating, configuring, and managing data rooms with an intuitive user interface.

## Features

* 🏗️ **Room Structure**: Tools for defining and managing room structure
* 📊 **Data Sources**: Components for connecting to and managing data sources
* 🧩 **Panel System**: Flexible panel-based UI for room components
* 🔄 **State Management**: Robust state management using Zustand
* 📁 **File Handling**: Utilities for processing and managing room files
* 🧰 **Extensible Architecture**: Easily extend with custom components and panels

## Installation

```bash
npm install @sqlrooms/room-shell
# or
yarn add @sqlrooms/room-shell
```

## Basic Usage

### Creating a Room Builder

```tsx
import {RoomShell} from '@sqlrooms/room-shell';

function MyApp() {
  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar />
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
    </RoomShell>
  );
}
```

### Working with Room State

The room-shell package uses Zustand for state management. You can create a custom store with room-specific state and actions.

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
  BaseRoomConfig,
} from '@sqlrooms/room-shell';
import {z} from 'zod';

// Define your custom config schema (optional)
const MyRoomConfig = BaseRoomConfig.extend({
  myCustomSetting: z.string().default('default value'),
});
type MyRoomConfig = z.infer<typeof MyRoomConfig>;

// Define your custom app state
type MyRoomState = RoomState<MyRoomConfig> & {
  myFeatureData: any[];
  addItem: (item: any) => void;
  removeItem: (id: string) => void;
};

// Create a room store with custom state
export const {roomStore, useRoomStore} = createRoomStore<
  MyRoomConfig,
  MyRoomState
>((set, get, store) => ({
  // Base room slice with initial configuration
  ...createRoomShellSlice<MyRoomConfig>({
    config: {
      title: 'My Room',
      layout: {
        /* layout configuration */
      },
      dataSources: [],
      myCustomSetting: 'custom value',
    },
    room: {
      panels: {
        /* panel definitions */
      },
    },
  })(set, get, store),

  // Custom state and actions
  myFeatureData: [],
  addItem: (item) =>
    set((state) => ({
      myFeatureData: [...state.myFeatureData, item],
    })),
  removeItem: (id) =>
    set((state) => ({
      myFeatureData: state.myFeatureData.filter((item) => item.id !== id),
    })),
}));

// Use the store in a component with selector for better performance
function MyComponent() {
  // Use selectors for better performance
  const myFeatureData = useRoomStore((state) => state.myFeatureData);
  const addItem = useRoomStore((state) => state.addItem);

  return (
    <div>
      <h2>My Items ({myFeatureData.length})</h2>
      <button onClick={() => addItem({id: Date.now(), name: 'New Item'})}>
        Add Item
      </button>
      {/* Render items */}
    </div>
  );
}
```

### Persisting Room Configuration

The room configuration is designed to be persisted between sessions. You can use Zustand's persist middleware to save the configuration to localStorage or any other storage:

```tsx
import {persist} from 'zustand/middleware';
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
  BaseRoomConfig,
} from '@sqlrooms/room-shell';
import {z} from 'zod';

// Define your custom config schema
const MyRoomConfig = BaseRoomConfig.extend({
  myCustomSetting: z.string().default('default value'),
});
type MyRoomConfig = z.infer<typeof MyRoomConfig>;

// Define your custom app state
type MyRoomState = RoomState<MyRoomConfig> & {
  myFeatureData: any[];
  addItem: (item: any) => void;
};

// Create a store with persistence
export const {roomStore, useRoomStore} = createRoomStore<
  MyRoomConfig,
  MyRoomState
>(
  persist(
    (set, get, store) => ({
      // Base room slice
      ...createRoomShellSlice<MyRoomConfig>({
        config: {
          title: 'My Room',
          layout: {
            /* layout configuration */
          },
          dataSources: [],
          myCustomSetting: 'custom value',
        },
        room: {
          panels: {
            /* panel definitions */
          },
        },
      })(set, get, store),

      // Custom state and actions
      myFeatureData: [],
      addItem: (item) =>
        set((state) => ({
          myFeatureData: [...state.myFeatureData, item],
        })),
    }),
    {
      name: 'my-room-storage',
      partialize: (state) => ({
        // Persist only the config part of the state
        config: state.config,
      }),
    },
  ),
);
```

### Integrating Multiple Feature Slices

For larger applications, you can organize your state into feature slices:

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
} from '@sqlrooms/room-shell';
import {createMyFeatureSlice, MyFeatureState} from './myFeatureSlice';
import {
  createAnotherFeatureSlice,
  AnotherFeatureState,
} from './anotherFeatureSlice';

// Combined app state type
type RoomState = RoomState<MyRoomConfig> & MyFeatureState & AnotherFeatureState;

// Create a store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<
  MyRoomConfig,
  RoomState
>((set, get, store) => ({
  // Base room slice
  ...createRoomShellSlice<MyRoomConfig>({
    config: {
      /* initial config */
    },
    room: {
      panels: {
        /* panel definitions */
      },
    },
  })(set, get, store),

  // Feature slices
  ...createMyFeatureSlice()(set, get, store),
  ...createAnotherFeatureSlice({
    // Feature-specific options
    customOption: 'value',
  })(set, get, store),
}));
```

### Managing Data Sources

```tsx
import {
  FileDataSourcesPanel,
  TablesListPanel,
  DataSourceType,
} from '@sqlrooms/room-shell';

function DataSourcesSection() {
  // Use selectors for better performance
  const addDataSource = useRoomStore((state) => state.room.addDataSource);
  const addRoomFile = useRoomStore((state) => state.room.addRoomFile);

  const handleFileDrop = async (files) => {
    for (const file of files) {
      await addRoomFile(file);
    }
  };

  const handleAddCsvUrl = (url) => {
    addDataSource({
      type: DataSourceType.url,
      url,
      tableName: 'data_from_url',
    });
  };

  const handleAddSqlQuery = (query) => {
    addDataSource({
      type: DataSourceType.sqlQuery,
      query,
      tableName: 'query_results',
    });
  };

  return (
    <div className="grid grid-cols-2 gap-4">
      <FileDataSourcesPanel onFileDrop={handleFileDrop} />
      <TablesListPanel />
      <button onClick={() => handleAddCsvUrl('https://example.com/data.csv')}>
        Add CSV from URL
      </button>
    </div>
  );
}
```

### Creating Custom Panels

```tsx
import {RoomPanel, RoomPanelHeader} from '@sqlrooms/room-shell';

function CustomPanel({title, children}) {
  return (
    <RoomPanel>
      <RoomPanelHeader title={title} />
      <div className="p-4">{children}</div>
    </RoomPanel>
  );
}
```

## RoomStore API Reference

The RoomStore is the core of the room-shell package. It provides a comprehensive set of properties and methods for managing room state.

### State Properties

#### `config`

The room configuration, which can be persisted between sessions.

```tsx
const config = useRoomStore((state) => state.config);
console.log(config.title); // Access room title
```

#### `schema`

The database schema name used for the room.

```tsx
const schema = useRoomStore((state) => state.room.schema);
```

#### `tasksProgress`

A record of task progress information, useful for displaying loading indicators.

```tsx
const tasksProgress = useRoomStore((state) => state.room.tasksProgress);
// Example: { "init-db": { message: "Initializing database...", progress: 0.5 } }
```

#### `roomId`

The unique identifier for the room, undefined for new rooms.

```tsx
const roomId = useRoomStore((state) => state.room.roomId);
```

#### `panels`

A record of panel information, including title, icon, component, and placement.

```tsx
const panels = useRoomStore((state) => state.room.panels);
// Example: { "data-sources": { title: "Data Sources", icon: DatabaseIcon, ... } }
```

#### `isReadOnly`

Whether the room is in read-only mode.

```tsx
const isReadOnly = useRoomStore((state) => state.room.isReadOnly);
```

#### `tables`

An array of data tables available in the room.

```tsx
const tables = useRoomStore((state) => state.room.tables);
// Access table schemas and metadata
```

#### `roomFiles`

An array of room file information.

```tsx
const roomFiles = useRoomStore((state) => state.room.roomFiles);
```

#### `roomFilesProgress`

A record of file processing progress information.

```tsx
const roomFilesProgress = useRoomStore((state) => state.room.roomFilesProgress);
```

#### `lastSavedConfig`

The last saved room configuration, used to check for unsaved changes.

```tsx
const lastSavedConfig = useRoomStore((state) => state.room.lastSavedConfig);
```

#### `initialized`

Whether the room has been initialized.

```tsx
const initialized = useRoomStore((state) => state.room.initialized);
```

#### `isDataAvailable`

Whether the room data has been loaded.

```tsx
const isDataAvailable = useRoomStore((state) => state.room.isDataAvailable);
```

#### `dataSourceStates`

A record of data source states by table name.

```tsx
const dataSourceStates = useRoomStore((state) => state.room.dataSourceStates);
```

#### `tableRowCounts`

A record of row counts by table name.

```tsx
const tableRowCounts = useRoomStore((state) => state.room.tableRowCounts);
```

### Methods

#### `initialize()`

Initialize the room state.

```tsx
const initialize = useRoomStore((state) => state.room.initialize);
await initialize();
```

#### `setTaskProgress(id, taskProgress)`

Set the progress of a task.

```tsx
const setTaskProgress = useRoomStore((state) => state.room.setTaskProgress);
setTaskProgress('my-task', {message: 'Processing...', progress: 0.5});
```

#### `getLoadingProgress()`

Get the current loading progress.

```tsx
const getLoadingProgress = useRoomStore(
  (state) => state.room.getLoadingProgress,
);
const progress = getLoadingProgress();
```

#### `setRoomConfig(config)`

Set the room configuration.

```tsx
const setRoomConfig = useRoomStore((state) => state.room.setRoomConfig);
const config = useRoomStore((state) => state.config);
setRoomConfig({...config, title: 'New Title'});
```

#### `setLastSavedConfig(config)`

Set the last saved room configuration.

```tsx
const setLastSavedConfig = useRoomStore(
  (state) => state.room.setLastSavedConfig,
);
const config = useRoomStore((state) => state.config);
setLastSavedConfig(config);
```

#### `hasUnsavedChanges()`

Check if the room has unsaved changes.

```tsx
const hasUnsavedChanges = useRoomStore((state) => state.room.hasUnsavedChanges);
if (hasUnsavedChanges()) {
  // Prompt user to save changes
}
```

#### `setLayout(layout)`

Set the room layout configuration.

```tsx
const setLayout = useRoomStore((state) => state.room.setLayout);
setLayout(newLayout);
```

#### `togglePanel(panel, show)`

Toggle the visibility of a panel.

```tsx
const togglePanel = useRoomStore((state) => state.room.togglePanel);
togglePanel('data-sources', true); // Show the data sources panel
```

#### `togglePanelPin(panel)`

Toggle the pin state of a panel.

```tsx
const togglePanelPin = useRoomStore((state) => state.room.togglePanelPin);
togglePanelPin('data-sources');
```

#### `addOrUpdateSqlQueryDataSource(tableName, query, oldTableName)`

Add or update a SQL query data source.

```tsx
const addOrUpdateSqlQueryDataSource = useRoomStore(
  (state) => state.room.addOrUpdateSqlQueryDataSource,
);
await addOrUpdateSqlQueryDataSource(
  'filtered_data',
  'SELECT * FROM data WHERE value > 10',
);
```

#### `removeSqlQueryDataSource(tableName)`

Remove a SQL query data source.

```tsx
const removeSqlQueryDataSource = useRoomStore(
  (state) => state.room.removeSqlQueryDataSource,
);
await removeSqlQueryDataSource('filtered_data');
```

#### `addRoomFile(info, desiredTableName)`

Add a room file.

```tsx
const addRoomFile = useRoomStore((state) => state.room.addRoomFile);
const dataTable = await addRoomFile(file, 'my_data');
```

#### `removeRoomFile(pathname)`

Remove a room file.

```tsx
const removeRoomFile = useRoomStore((state) => state.room.removeRoomFile);
removeRoomFile('/path/to/file.csv');
```

#### `maybeDownloadDataSources()`

Download data sources if needed.

```tsx
const maybeDownloadDataSources = useRoomStore(
  (state) => state.room.maybeDownloadDataSources,
);
await maybeDownloadDataSources();
```

#### `setRoomFiles(info)`

Set the room files.

```tsx
const setRoomFiles = useRoomStore((state) => state.room.setRoomFiles);
setRoomFiles(fileInfoArray);
```

#### `setRoomFileProgress(pathname, fileState)`

Set the progress of a room file.

```tsx
const setRoomFileProgress = useRoomStore(
  (state) => state.room.setRoomFileProgress,
);
setRoomFileProgress('/path/to/file.csv', {status: 'processing'});
```

#### `addTable(tableName, data)`

Add a table to the room.

```tsx
const addTable = useRoomStore((state) => state.db.addTable);
await addTable('my_table', records);
```

#### `addDataSource(dataSource, status)`

Add a data source to the room.

```tsx
const addDataSource = useRoomStore((state) => state.room.addDataSource);
await addDataSource({
  type: 'url',
  url: 'https://example.com/data.csv',
  tableName: 'external_data',
});
```

#### `getTable(tableName)`

Get a table by name.

```tsx
const getTable = useRoomStore((state) => state.room.getTable);
const table = getTable('my_table');
```

#### `setTables(dataTable)`

Set the room tables.

```tsx
const setTables = useRoomStore((state) => state.room.setTables);
await setTables(tableArray);
```

#### `setTableRowCount(tableName, rowCount)`

Set the row count for a table.

```tsx
const setTableRowCount = useRoomStore((state) => state.room.setTableRowCount);
setTableRowCount('my_table', 1000);
```

#### `setRoomTitle(title)`

Set the room title.

```tsx
const setRoomTitle = useRoomStore((state) => state.room.setRoomTitle);
setRoomTitle('My Awesome Room');
```

#### `setDescription(description)`

Set the room description.

```tsx
const setDescription = useRoomStore((state) => state.room.setDescription);
setDescription('This is a description of my room');
```

#### `areDatasetsReady()`

Check if all datasets are ready.

```tsx
const areDatasetsReady = useRoomStore((state) => state.room.areDatasetsReady);
if (areDatasetsReady()) {
  // Proceed with data operations
}
```

#### `findTableByName(tableName)`

Find a table by name.

```tsx
const findTableByName = useRoomStore((state) => state.room.findTableByName);
const table = findTableByName('my_table');
```

#### `updateReadyDataSources()`

Update the status of all data sources based on the current tables.

```tsx
const updateReadyDataSources = useRoomStore(
  (state) => state.room.updateReadyDataSources,
);
await updateReadyDataSources();
```

#### `onDataUpdated()`

Called when data has been updated.

```tsx
const onDataUpdated = useRoomStore((state) => state.room.onDataUpdated);
await onDataUpdated();
```

#### `areViewsReadyToRender()`

Check if views are ready to render.

```tsx
const areViewsReadyToRender = useRoomStore(
  (state) => state.room.areViewsReadyToRender,
);
if (areViewsReadyToRender()) {
  // Render views
}
```

#### `refreshTableSchemas()`

Refresh table schemas from the database.

```tsx
const refreshTableSchemas = useRoomStore(
  (state) => state.room.refreshTableSchemas,
);
const updatedTables = await refreshTableSchemas();
```

## Advanced Features

* **Custom State Slices**: Extend the room state with custom slices
* **Task Management**: Built-in task progress tracking
* **Panel Configuration**: Configure and arrange panels dynamically
* **Data Source Integration**: Connect to various data sources
* **File Processing**: Process and transform data files

For more information, visit the SQLRooms documentation.

```
```

## Enumerations

* [DataSourceStatus](enumerations/DataSourceStatus.md)

## Interfaces

* [StoreApi](interfaces/StoreApi.md)
* [RoomSlice](interfaces/RoomSlice.md)

## Type Aliases

* [StateCreator](type-aliases/StateCreator.md)
* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [RoomPanelInfo](type-aliases/RoomPanelInfo.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)
* [RoomShellSliceState](type-aliases/RoomShellSliceState.md)
* [RoomFileState](type-aliases/RoomFileState.md)
* [RoomFileInfo](type-aliases/RoomFileInfo.md)
* [DataSourceState](type-aliases/DataSourceState.md)
* [RoomStateProviderProps](type-aliases/RoomStateProviderProps.md)
* [RoomStore](type-aliases/RoomStore.md)
* [RoomStateProps](type-aliases/RoomStateProps.md)
* [TaskProgress](type-aliases/TaskProgress.md)
* [RoomStateActions](type-aliases/RoomStateActions.md)
* [RoomState](type-aliases/RoomState.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isSpatialLoadFileOptions](functions/isSpatialLoadFileOptions.md)
* [RoomShell](functions/RoomShell.md)
* [SidebarButton](functions/SidebarButton.md)
* [RoomShellSidebarButton](functions/RoomShellSidebarButton.md)
* [RoomShellSidebarButtons](functions/RoomShellSidebarButtons.md)
* [createRoomShellSlice](functions/createRoomShellSlice.md)
* [useBaseRoomShellStore](functions/useBaseRoomShellStore.md)
* [createSlice](functions/createSlice.md)
* [FileDataSourceCard](functions/FileDataSourceCard.md)
* [FileDataSourcesPanel](functions/FileDataSourcesPanel.md)
* [TableCard](functions/TableCard.md)
* [TablesListPanel](functions/TablesListPanel.md)
* [PanelHeaderButton](functions/PanelHeaderButton.md)
* [RoomPanel](functions/RoomPanel.md)
* [RoomPanelHeader](functions/RoomPanelHeader.md)
* [RoomStateContext](functions/RoomStateContext.md)
* [RoomStateProvider](functions/RoomStateProvider.md)
* [useBaseRoomStore](functions/useBaseRoomStore.md)
* [createRoomSlice](functions/createRoomSlice.md)
* [createBaseSlice](functions/createBaseSlice.md)
* [createRoomStore](functions/createRoomStore.md)
* [isRoomSliceWithInitialize](functions/isRoomSliceWithInitialize.md)
* [createRoomStoreCreator](functions/createRoomStoreCreator.md)

---

---
url: /api/room-store.md
---
# @sqlrooms/room-store

This package provides the core state management for SQLRooms using [Zustand](https://github.com/pmndrs/zustand). It is designed to be extensible, allowing you to build custom room experiences by creating and composing state "slices".

## Installation

```bash
npm install @sqlrooms/room-store @sqlrooms/room-config zod zustand
```

## Core Concepts

### RoomStore

The `RoomStore` is a Zustand store that holds the entire state of a room. It is created by calling `createRoomStore` with a function that composes one or more slice creators.

### RoomState

The `RoomState` is the object that defines the shape of the store. It has two main properties:

* `config`: This holds the configuration of the room that is persisted. This is defined by a `zod` schema, often extending the `BaseRoomConfig` from `@sqlrooms/room-config`.
* `room`: This holds the client-side state of the room, such as task progress, and provides actions for interacting with the room.

### Slices

A slice is a piece of the room's state and its associated actions. You can create your own slices to add custom functionality to your room. The framework provides `createRoomShellSlice` to create the base slice with core room functionality. You combine this with your own slices inside the `createRoomStore` composer function.

## Basic Usage

Here's an example of how to create a room store with a custom feature slice.

```typescript
import {
  createRoomStore,
  createRoomShellSlice,
  RoomState,
} from '@sqlrooms/room-store';
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {z} from 'zod';
import {StateCreator} from 'zustand';

// 1. Define your persisted room configuration schema using Zod.
// This extends the base config with a custom property.
export const MyRoomConfig = BaseRoomConfig.extend({
  defaultChartType: z.enum(['bar', 'line', 'scatter']).default('bar'),
});
export type MyRoomConfig = z.infer<typeof MyRoomConfig>;

// 2. Define the state and actions for your custom feature slice.
export interface MyFeatureSlice {
  activeChartId: string | null;
  setActiveChartId: (id: string | null) => void;
}

// 3. Create your custom slice.
export const createMyFeatureSlice: StateCreator<MyFeatureSlice> = (set) => ({
  activeChartId: null,
  setActiveChartId: (id) => set({activeChartId: id}),
});

// 4. Define the full state of your room, combining the base RoomState
// with your custom slice's state.
export type MyRoomState = RoomState<MyRoomConfig> & MyFeatureSlice;

// 5. Create the room store by composing the base slice and your custom slice.
export const {roomStore, useRoomStore} = createRoomStore<
  MyRoomConfig,
  MyRoomState
>((set, get, store) => ({
  ...createRoomShellSlice<MyRoomConfig>({
    config: {
      // You can provide initial values for your config here
      title: 'My First Room',
      defaultChartType: 'line',
      // other properties from BaseRoomConfig will have defaults
    },
    room: {},
  })(set, get, store),

  // Add your custom slice to the store
  ...createMyFeatureSlice(set, get, store),
}));

export {roomStore, useRoomStore};
```

## Providing the Store

To make the store available to your React components, you need to use the `RoomStateProvider` component at the root of your application.

```tsx
import {RoomStateProvider} from '@sqlrooms/room-store';
import {roomStore} from './my-room-store';

function App() {
  return (
    <RoomStateProvider value={roomStore}>
      {/* Your room components go here */}
    </RoomStateProvider>
  );
}
```

## Accessing the Store in Components

You can use the `useRoomStore` hook returned by `createRoomStore` to access the room's state and actions from any component.

```tsx
import {useRoomStore} from './my-room-store';

function RoomTitle() {
  const title = useRoomStore((state) => state.config.title);
  const activeChartId = useRoomStore((state) => state.activeChartId);
  const setActiveChartId = useRoomStore((state) => state.setActiveChartId);

  return (
    <div>
      <h1>{title}</h1>
      <p>Active Chart: {activeChartId || 'None'}</p>
      <button onClick={() => setActiveChartId('chart-123')}>
        Activate Chart
      </button>
    </div>
  );
}
```

## Interfaces

* [StoreApi](interfaces/StoreApi.md)
* [RoomSlice](interfaces/RoomSlice.md)

## Type Aliases

* [StateCreator](type-aliases/StateCreator.md)
* [LayoutTypes](type-aliases/LayoutTypes.md)
* [MosaicLayoutDirection](type-aliases/MosaicLayoutDirection.md)
* [MosaicLayoutParent](type-aliases/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](type-aliases/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](type-aliases/MosaicLayoutNode.md)
* [MosaicLayoutConfig](type-aliases/MosaicLayoutConfig.md)
* [LayoutConfig](type-aliases/LayoutConfig.md)
* [BaseRoomConfig](type-aliases/BaseRoomConfig.md)
* [DataSourceTypes](type-aliases/DataSourceTypes.md)
* [BaseDataSource](type-aliases/BaseDataSource.md)
* [FileDataSource](type-aliases/FileDataSource.md)
* [UrlDataSource](type-aliases/UrlDataSource.md)
* [SqlQueryDataSource](type-aliases/SqlQueryDataSource.md)
* [DataSource](type-aliases/DataSource.md)
* [LoadFile](type-aliases/LoadFile.md)
* [StandardLoadOptions](type-aliases/StandardLoadOptions.md)
* [SpatialLoadOptions](type-aliases/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](type-aliases/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](type-aliases/StandardLoadFileOptions.md)
* [LoadFileOptions](type-aliases/LoadFileOptions.md)
* [RoomStateProviderProps](type-aliases/RoomStateProviderProps.md)
* [RoomStore](type-aliases/RoomStore.md)
* [RoomStateProps](type-aliases/RoomStateProps.md)
* [TaskProgress](type-aliases/TaskProgress.md)
* [RoomStateActions](type-aliases/RoomStateActions.md)
* [RoomState](type-aliases/RoomState.md)

## Variables

* [MAIN\_VIEW](variables/MAIN_VIEW.md)
* [LayoutTypes](variables/LayoutTypes.md)
* [~~DEFAULT\_MOSAIC\_LAYOUT~~](variables/DEFAULT_MOSAIC_LAYOUT.md)
* [MosaicLayoutDirection](variables/MosaicLayoutDirection.md)
* [MosaicLayoutParent](variables/MosaicLayoutParent.md)
* [MosaicLayoutNodeKey](variables/MosaicLayoutNodeKey.md)
* [MosaicLayoutNode](variables/MosaicLayoutNode.md)
* [MosaicLayoutConfig](variables/MosaicLayoutConfig.md)
* [LayoutConfig](variables/LayoutConfig.md)
* [DEFAULT\_ROOM\_TITLE](variables/DEFAULT_ROOM_TITLE.md)
* [BaseRoomConfig](variables/BaseRoomConfig.md)
* [DataSourceTypes](variables/DataSourceTypes.md)
* [BaseDataSource](variables/BaseDataSource.md)
* [FileDataSource](variables/FileDataSource.md)
* [UrlDataSource](variables/UrlDataSource.md)
* [SqlQueryDataSource](variables/SqlQueryDataSource.md)
* [DataSource](variables/DataSource.md)
* [LoadFile](variables/LoadFile.md)
* [StandardLoadOptions](variables/StandardLoadOptions.md)
* [SpatialLoadOptions](variables/SpatialLoadOptions.md)
* [SpatialLoadFileOptions](variables/SpatialLoadFileOptions.md)
* [StandardLoadFileOptions](variables/StandardLoadFileOptions.md)
* [LoadFileOptions](variables/LoadFileOptions.md)

## Functions

* [createDefaultMosaicLayout](functions/createDefaultMosaicLayout.md)
* [isMosaicLayoutParent](functions/isMosaicLayoutParent.md)
* [createDefaultBaseRoomConfig](functions/createDefaultBaseRoomConfig.md)
* [isSpatialLoadFileOptions](functions/isSpatialLoadFileOptions.md)
* [RoomStateContext](functions/RoomStateContext.md)
* [RoomStateProvider](functions/RoomStateProvider.md)
* [useBaseRoomStore](functions/useBaseRoomStore.md)
* [createRoomSlice](functions/createRoomSlice.md)
* [createBaseSlice](functions/createBaseSlice.md)
* [createRoomStore](functions/createRoomStore.md)
* [isRoomSliceWithInitialize](functions/isRoomSliceWithInitialize.md)
* [createRoomStoreCreator](functions/createRoomStoreCreator.md)

---

---
url: /api/s3-browser.md
---
# @sqlrooms/s3-browser

This package is part of the SQLRooms framework.

# S3 Browser

A React component library for browsing and interacting with S3-compatible storage services.

![S3 File Browser Interface](https://github.com/user-attachments/assets/dd79fbb9-c487-4050-96ef-81cff39930d3)

## Features

* Directory navigation with breadcrumbs
* File and directory listing
* Multiple file selection
* File metadata display (size, type, last modified)
* S3 utility functions for listing and deleting files

## Installation

```bash
npm install @sqlrooms/s3-browser
# or
yarn add @sqlrooms/s3-browser
```

## Usage

### S3FileBrowser Component

The `S3FileBrowser` component provides a familiar file explorer interface for navigating and selecting files from an S3-like storage.

```tsx
import {S3FileBrowser} from '@sqlrooms/s3-browser';
import {useState} from 'react';

function MyS3Browser() {
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const [selectedDirectory, setSelectedDirectory] = useState('');

  return (
    <S3FileBrowser
      files={[
        {key: 'documents', isDirectory: true},
        {
          key: 'example.txt',
          isDirectory: false,
          size: 1024,
          contentType: 'text/plain',
          lastModified: new Date(),
        },
      ]}
      selectedFiles={selectedFiles}
      selectedDirectory={selectedDirectory}
      onCanConfirmChange={(canConfirm) =>
        console.log('Can confirm:', canConfirm)
      }
      onChangeSelectedDirectory={setSelectedDirectory}
      onChangeSelectedFiles={setSelectedFiles}
    />
  );
}
```

### S3 Utility Functions

The package also provides utility functions for working with S3:

```tsx
import {S3Client} from '@aws-sdk/client-s3';
import {
  listFilesAndDirectoriesWithPrefix,
  deleteS3Files,
} from '@sqlrooms/s3-browser';

// Initialize S3 client
const s3Client = new S3Client({region: 'us-east-1'});

// List files and directories
async function listFiles() {
  const files = await listFilesAndDirectoriesWithPrefix(
    s3Client,
    'my-bucket',
    'path/to/directory',
  );
  console.log(files);
}

// Delete files with a prefix
async function deleteFiles() {
  await deleteS3Files(s3Client, 'my-bucket', 'path/to/delete');
}
```

## API Reference

### S3FileBrowser

```tsx
interface S3FileBrowserProps {
  /**
   * Array of files and directories to display
   */
  files?: S3FileOrDirectory[];

  /**
   * Array of currently selected file keys
   */
  selectedFiles: string[];

  /**
   * Current directory path (empty string for root)
   */
  selectedDirectory: string;

  /**
   * Callback fired when selection state changes
   */
  onCanConfirmChange: (canConfirm: boolean) => void;

  /**
   * Callback fired when directory navigation occurs
   */
  onChangeSelectedDirectory: (directory: string) => void;

  /**
   * Callback fired when file selection changes
   */
  onChangeSelectedFiles: (files: string[]) => void;
}
```

### S3FileOrDirectory

```tsx
type S3FileOrDirectory =
  | {
      key: string;
      isDirectory: true;
    }
  | {
      key: string;
      isDirectory: false;
      lastModified?: Date;
      size?: number;
      contentType?: string;
    };
```

### Utility Functions

```tsx
/**
 * Lists files and directories with a given prefix
 */
function listFilesAndDirectoriesWithPrefix(
  S3: S3Client,
  bucket: string,
  prefix?: string,
): Promise<S3FileOrDirectory[]>;

/**
 * Delete all files with the given prefix
 */
function deleteS3Files(
  S3: S3Client,
  bucket: string,
  prefix: string,
): Promise<void>;
```

## Dependencies

* @aws-sdk/client-s3
* React
* @sqlrooms/ui (for UI components)
* @sqlrooms/utils (for formatting utilities)
* zod (for type validation)

## Type Aliases

* [S3FileOrDirectory](type-aliases/S3FileOrDirectory.md)

## Variables

* [S3FileOrDirectory](variables/S3FileOrDirectory.md)

## Functions

* [S3FileBrowser](functions/S3FileBrowser.md)
* [listFilesAndDirectoriesWithPrefix](functions/listFilesAndDirectoriesWithPrefix.md)
* [deleteS3Files](functions/deleteS3Files.md)

---

---
url: /api/schema-tree.md
---
# @sqlrooms/schema-tree

This package is part of the SQLRooms framework.

# DuckDB schema tree

A React component library for rendering DuckDB schema trees in a hierarchical view. It provides components to display database schemas, tables, and columns in an interactive tree structure with features like:

* Expandable/collapsible tree nodes
* Column type badges
* Context menus for actions (e.g. copying column names)
* Customizable node rendering
* Hover states and visual feedback

The main components are:

* `TableSchemaTree`: The root tree component that renders the full schema hierarchy
* `ColumnTreeNode`: Specialized node for displaying column information
* `TreeNodeActionsMenu`: Reusable menu component for node actions

This package is used by SQLRooms to provide schema browsing capabilities in the database explorer interface.

## Functions

* [defaultRenderTableSchemaNode](functions/defaultRenderTableSchemaNode.md)
* [TableSchemaTree](functions/TableSchemaTree.md)
* [BaseTreeNode](functions/BaseTreeNode.md)
* [ColumnTreeNode](functions/ColumnTreeNode.md)
* [DatabaseTreeNode](functions/DatabaseTreeNode.md)
* [SchemaTreeNode](functions/SchemaTreeNode.md)
* [defaultRenderTableNodeMenuItems](functions/defaultRenderTableNodeMenuItems.md)
* [TableTreeNode](functions/TableTreeNode.md)
* [TreeNodeActionsMenu](functions/TreeNodeActionsMenu.md)
* [TreeNodeActionsMenuItem](functions/TreeNodeActionsMenuItem.md)

---

---
url: /api/sql-editor.md
---
# @sqlrooms/sql-editor

This package is part of the SQLRooms framework.

# SQL Editor

A powerful SQL editor component for SQLRooms applications. This package provides React components and hooks for creating interactive SQL query interfaces with Monaco editor integration, table management, and results visualization.

## Features

* 🔍 **Advanced SQL Editing**: Monaco-based SQL editor with syntax highlighting and auto-completion
* 📊 **Data Visualization**: View query results in interactive data tables
* 📑 **Multiple Tabs**: Support for multiple query tabs with save/rename/delete functionality
* 🔄 **State Management**: Zustand-based state management for SQL editor state
* 📦 **Table Management**: Browser for tables in the database with schema information
* 📤 **Data Export**: Export query results to CSV files
* 📝 **Documentation**: Optional documentation panel for SQL reference

## Installation

```bash
npm install @sqlrooms/sql-editor
```

## Basic Usage

### SqlEditor and SqlEditorModal Components

These components must be used within a `RoomShell` which provides the room store context as they rely on the SQLRooms store:

```tsx
import {RoomShell} from '@sqlrooms/room-shell';
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {TerminalIcon} from 'lucide-react';
import {roomStore} from './store';

function MyApp() {
  const sqlEditorDisclosure = useDisclosure();

  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar>
        <RoomShell.SidebarButton
          title="SQL Editor"
          onClick={sqlEditorDisclosure.onToggle}
          isSelected={false}
          icon={TerminalIcon}
        />
      </RoomShell.Sidebar>
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
      <SqlEditorModal
        isOpen={sqlEditorDisclosure.isOpen}
        onClose={sqlEditorDisclosure.onClose}
      />
    </RoomShell>
  );
}
```

### Store Setup for SQL Editor

The SQL Editor requires a properly configured store with the SQL Editor slice:

```tsx
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {
  createDefaultSqlEditorConfig,
  createSqlEditorSlice,
  SqlEditorSliceConfig,
  SqlEditorSliceState,
} from '@sqlrooms/sql-editor';
import {z} from 'zod';

// Define combined config schema
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// Define combined state type
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;

// Create combined store
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice<RoomConfig>({
      config: {
        title: 'SQL Workspace',
        // ... other room config
        ...createDefaultSqlEditorConfig(),
      },
    })(set, get, store),

    // Sql editor slice
    ...createSqlEditorSlice()(set, get, store),
  }),
);
```

### Standalone SqlMonacoEditor Component

Unlike the full SQL Editor components, the `SqlMonacoEditor` can be used as a standalone component without requiring the store:

```tsx
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
import {useState} from 'react';

function SimpleSqlEditor() {
  const [query, setQuery] = useState('SELECT * FROM products');

  const handleExecute = () => {
    // Execute the query using your own logic
    console.log('Executing query:', query);
  };

  return (
    <>
      <SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
      <button onClick={handleExecute}>Execute</button>
    </>
  );
}
```

### With Custom Documentation Panel

Adding a custom documentation panel to the SQL Editor:

```tsx
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

function AdvancedSqlEditor() {
  const {isOpen, onOpen, onClose} = useDisclosure();

  // Custom documentation component
  const Documentation = () => (
    <div className="p-4">
      <h2 className="mb-4 text-xl font-bold">SQL Reference</h2>
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold">SELECT</h3>
          <p>Retrieves data from a table</p>
          <pre className="mt-2 rounded bg-gray-100 p-2">
            SELECT column1, column2 FROM table_name;
          </pre>
        </div>
        {/* More documentation items */}
      </div>
    </div>
  );

  return (
    <SqlEditorModal
      isOpen={isOpen}
      onClose={onClose}
      documentationPanel={<Documentation />}
    />
  );
}
```

## State Management

The SQL editor provides a Zustand slice for managing state. Here's how to set it up:

### Using in a Combined SQLRooms Store

This approach is recommended when integrating multiple SQLRooms components:

```tsx
import {
  createSqlEditorSlice,
  createDefaultSqlEditorConfig,
  SqlEditorSliceState,
  SqlEditorSliceConfig,
} from '@sqlrooms/sql-editor';
import {
  createRoomShellSlice,
  createRoomStore,
  RoomState,
  RoomShell,
} from '@sqlrooms/room-shell';
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {z} from 'zod';

// 1. Define combined config schema
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// 2. Define combined state type
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;

// 3. Create combined store
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice<RoomConfig>({
      config: {
        title: 'SQL Workspace',
        // ... other room config
        ...createDefaultSqlEditorConfig(),
      },
    })(set, get, store),

    // Sql editor slice
    ...createSqlEditorSlice()(set, get, store),
  }),
);

// 4. Use the store in components
function MyComponent() {
  // Access SQL editor state and actions
  const runQuery = useRoomStore((state) => state.sqlEditor.runQuery);
  const createQueryTab = useRoomStore(
    (state) => state.sqlEditor.createQueryTab,
  );

  // Use actions
  const handleExecute = () => {
    runQuery('SELECT * FROM users LIMIT 10');
  };

  return (
    <RoomShell roomStore={roomStore}>
      <div>
        <button onClick={handleExecute}>Run Query</button>
        <SqlEditorModal isOpen={true} onClose={() => {}} />
      </div>
    </RoomShell>
  );
}
```

### Available State Actions

* `sqlEditor.runQuery(query: string)`: Execute a SQL query
* `sqlEditor.createQueryTab(initialQuery?: string)`: Create a new query tab
* `sqlEditor.deleteQueryTab(queryId: string)`: Delete a query tab
* `sqlEditor.renameQueryTab(queryId: string, newName: string)`: Rename a query tab
* `sqlEditor.updateQueryText(queryId: string, queryText: string)`: Update query text
* `sqlEditor.setSelectedQueryId(queryId: string)`: Set the selected query tab
* `sqlEditor.getCurrentQuery(defaultQuery?: string)`: Get current query text

## Available Components

### SqlEditor

The main component providing a full-featured SQL editor interface. Must be used within a RoomShell.

```tsx
import {SqlEditor} from '@sqlrooms/sql-editor';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

<RoomShell roomStore={roomStore}>
  <SqlEditor
    isOpen={boolean}
    onClose={() => void}
    schema="main"
    documentationPanel={ReactNode}
  />
</RoomShell>
```

### SqlMonacoEditor

A standalone SQL-specific Monaco editor component. Can be used independently without RoomShell.

```tsx
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
import {useState} from 'react';

function SimpleSqlEditor() {
  const [query, setQuery] = useState('SELECT * FROM products');

  const handleExecute = () => {
    // Execute the query using your own logic
    console.log('Executing query:', query);
  };

  return (
    <>
      <SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
      <button onClick={handleExecute}>Execute</button>
    </>
  );
}
```

### SqlEditorModal

A modal wrapper around the SQL editor. Must be used within a RoomShell.

```tsx
import {SqlEditorModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

function EditorWithModal() {
  const {isOpen, onOpen, onClose} = useDisclosure();

  return (
    <RoomShell roomStore={roomStore}>
      <button onClick={onOpen}>Open SQL Editor</button>
      <SqlEditorModal isOpen={isOpen} onClose={onClose} />
    </RoomShell>
  );
}
```

### CreateTableModal

A modal for creating new tables from SQL queries. Must be used within a RoomShell.

```tsx
import {CreateTableModal} from '@sqlrooms/sql-editor';
import {useDisclosure} from '@sqlrooms/ui';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';
import {useRoomStore} from './store';

function TableCreator() {
  const {isOpen, onOpen, onClose} = useDisclosure();
  const addOrUpdateSqlQueryDataSource = useRoomStore(
    (state) => state.room.addOrUpdateSqlQueryDataSource,
  );

  return (
    <RoomShell roomStore={roomStore}>
      <button onClick={onOpen}>Create Table from Results</button>
      <CreateTableModal
        isOpen={isOpen}
        onClose={onClose}
        onAddOrUpdateSqlQuery={addOrUpdateSqlQueryDataSource}
        query="SELECT * FROM users"
      />
    </RoomShell>
  );
}
```

### SqlQueryDataSourcesPanel

A panel showing available data sources for SQL queries. Must be used within a RoomShell.

```tsx
import {SqlQueryDataSourcesPanel} from '@sqlrooms/sql-editor';
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

<RoomShell roomStore={roomStore}>
  <SqlQueryDataSourcesPanel
    onSelectTable={(tableName) => {
      console.log(`Selected table: ${tableName}`);
    }}
  />
</RoomShell>;
```

## Props

### SqlEditor Props

| Prop               | Type      | Default   | Description                           |
| ------------------ | --------- | --------- | ------------------------------------- |
| isOpen             | boolean   | -         | Whether the editor is open            |
| onClose            | function  | -         | Callback when the editor is closed    |
| schema             | string    | 'main'    | Default schema to use for queries     |
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |

### SqlMonacoEditor Props

| Prop             | Type        | Default | Description                             |
| ---------------- | ----------- | ------- | --------------------------------------- |
| value            | string      | ''      | The SQL query text                      |
| onChange         | function    | -       | Callback when the query text changes    |
| height           | string      | '300px' | Height of the editor                    |
| readOnly         | boolean     | false   | Whether the editor is read-only         |
| theme            | string      | 'dark'  | Editor theme ('dark' or 'light')        |
| tableSchemas     | DataTable\[] | \[]      | Table schemas for autocompletion        |
| customKeywords   | string\[]    | \[]      | Custom SQL keywords for autocompletion  |
| customFunctions  | string\[]    | \[]      | Custom SQL functions for autocompletion |
| getLatestSchemas | function    | -       | Callback to get latest table schemas    |
| className        | string      | -       | Additional CSS class names              |
| options          | object      | -       | Monaco editor options                   |
| onMount          | function    | -       | Callback when editor is mounted         |

### SqlEditorModal Props

| Prop               | Type      | Default   | Description                           |
| ------------------ | --------- | --------- | ------------------------------------- |
| isOpen             | boolean   | -         | Whether the modal is open             |
| onClose            | function  | -         | Callback when the modal is closed     |
| schema             | string    | 'main'    | Default schema to use for queries     |
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |

### CreateTableModal Props

| Prop                  | Type     | Default | Description                       |
| --------------------- | -------- | ------- | --------------------------------- |
| isOpen                | boolean  | -       | Whether the modal is open         |
| onClose               | function | -       | Callback when the modal is closed |
| onAddOrUpdateSqlQuery | function | -       | Callback when a table is created  |
| query                 | string   | -       | SQL query that generated the data |

## Configuration

The SQL editor can be configured through the Zustand store.

```tsx
const config = createDefaultSqlEditorConfig();
// Customize if needed
config.sqlEditor.queries = [
  {id: 'default', name: 'Untitled', query: 'SELECT * FROM users LIMIT 10;'},
];
config.sqlEditor.selectedQueryId = 'default';

// Use in store creation
const {roomStore} = createRoomStore({
  ...createRoomShellSlice({
    config: {
      ...config,
      // other config options
    },
  }),
  ...createSqlEditorSlice(),
});
```

For more information, visit the SQLRooms documentation.

## Interfaces

* [SqlMonacoEditorProps](interfaces/SqlMonacoEditorProps.md)
* [QueryEditorPanelProps](interfaces/QueryEditorPanelProps.md)
* [QueryResultPanelProps](interfaces/QueryResultPanelProps.md)
* [TableStructurePanelProps](interfaces/TableStructurePanelProps.md)

## Type Aliases

* [SqlEditorSliceConfig](type-aliases/SqlEditorSliceConfig.md)
* [Props](type-aliases/Props.md)
* [QueryResult](type-aliases/QueryResult.md)
* [SqlEditorSliceState](type-aliases/SqlEditorSliceState.md)
* [CreateTableModalProps](type-aliases/CreateTableModalProps.md)
* [SqlEditorHeaderProps](type-aliases/SqlEditorHeaderProps.md)

## Variables

* [SqlEditorSliceConfig](variables/SqlEditorSliceConfig.md)

## Functions

* [createDefaultSqlEditorConfig](functions/createDefaultSqlEditorConfig.md)
* [SqlEditor](functions/SqlEditor.md)
* [SqlEditorModal](functions/SqlEditorModal.md)
* [createSqlEditorSlice](functions/createSqlEditorSlice.md)
* [SqlMonacoEditor](functions/SqlMonacoEditor.md)
* [CreateTableModal](functions/CreateTableModal.md)
* [QueryEditorPanel](functions/QueryEditorPanel.md)
* [QueryEditorPanelActions](functions/QueryEditorPanelActions.md)
* [QueryEditorPanelEditor](functions/QueryEditorPanelEditor.md)
* [QueryEditorPanelTabsList](functions/QueryEditorPanelTabsList.md)
* [QueryResultPanel](functions/QueryResultPanel.md)
* [SqlEditorHeader](functions/SqlEditorHeader.md)
* [SqlQueryDataSourcesPanel](functions/SqlQueryDataSourcesPanel.md)
* [SqlReferenceButton](functions/SqlReferenceButton.md)
* [SqlReferenceButtonContent](functions/SqlReferenceButtonContent.md)
* [TableStructurePanel](functions/TableStructurePanel.md)

---

---
url: /api/sql-editor-config.md
---
# @sqlrooms/sql-editor-config

A central configuration and type definitions package that maintains base SQL editor configuration schemas and Zod schema definitions for SQLRooms. It provides TypeScript types and interfaces along with essential constants and utilities used for managing SQL editor state.

## Features

* 📝 **SQL Editor Configuration**: Define and manage room SQL editor configuration schemas.
* 🔍 **Type Safety**: Strong TypeScript typing for SQL editor configuration objects.
* ✅ **Validation**: Zod schemas for runtime validation of SQL editor configurations.

## Installation

```bash
npm install @sqlrooms/sql-editor-config
# or
yarn add @sqlrooms/sql-editor-config
```

## Basic Usage

### Working with SQL Editor Configuration

```tsx
import {
  SqlEditorSliceConfig,
  createDefaultSqlEditorConfig,
} from '@sqlrooms/sql-editor-config';

// Create a new SQL editor configuration
const sqlEditorConfig: SqlEditorSliceConfig = createDefaultSqlEditorConfig();

// This can be part of a bigger room configuration
interface RoomConfig {
  // ... other properties
  sqlEditor: SqlEditorSliceConfig['sqlEditor'];
}
```

## Advanced Features

* **Schema Extensions**: Extend base schemas for custom room types
* **Configuration Validation**: Validate configurations at runtime
* **Serialization**: Convert configurations to/from JSON for storage

For more information, visit the SQLRooms documentation.

```
```

## Type Aliases

* [SqlEditorSliceConfig](type-aliases/SqlEditorSliceConfig.md)

## Variables

* [SqlEditorSliceConfig](variables/SqlEditorSliceConfig.md)

## Functions

* [createDefaultSqlEditorConfig](functions/createDefaultSqlEditorConfig.md)

---

---
url: /api/ui.md
---
# @sqlrooms/ui

A comprehensive UI component library for SQLRooms applications, built on top of React and Tailwind CSS. This package provides a collection of reusable, accessible, and customizable components designed to create consistent and beautiful user interfaces.

This library is based on [shadcn/ui](https://ui.shadcn.com/), a collection of beautifully designed, accessible components that can be copied and pasted into your apps.

## Features

* 🎨 **Modern Design**: Clean, modern components following design best practices
* ♿ **Accessibility**: Components built with accessibility in mind
* 🌗 **Theming**: Support for light and dark modes
* 📱 **Responsive**: Mobile-friendly components that adapt to different screen sizes
* 🧩 **Composable**: Components designed to work together seamlessly
* 🔄 **React Hooks**: Useful hooks for common UI patterns

## Installation

```bash
npm install @sqlrooms/ui
# or
yarn add @sqlrooms/ui
```

## Basic Usage

### Using Components

```tsx
import {Button, Card, Input} from '@sqlrooms/ui';

function LoginForm() {
  return (
    <Card className="mx-auto max-w-md p-6">
      <h2 className="mb-4 text-2xl font-bold">Login</h2>
      <form>
        <div className="space-y-4">
          <div>
            <Input type="email" placeholder="Email" required />
          </div>
          <div>
            <Input type="password" placeholder="Password" required />
          </div>
          <Button type="submit" className="w-full">
            Sign In
          </Button>
        </div>
      </form>
    </Card>
  );
}
```

### Using Hooks

```tsx
import {useToast, useDisclosure} from '@sqlrooms/ui';

function MyComponent() {
  const {toast} = useToast();
  const {isOpen, onOpen, onClose} = useDisclosure();

  const handleAction = () => {
    // Perform some action
    toast({
      title: 'Success!',
      description: 'Your action was completed successfully.',
      variant: 'success',
    });
    onClose();
  };

  return (
    <div>
      <Button onClick={onOpen}>Open Dialog</Button>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirm Action</DialogTitle>
            <DialogDescription>
              Are you sure you want to perform this action?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button onClick={handleAction}>Confirm</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

## Available Components

* **Layout**: Card, Resizable, Tabs
* **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
* **Feedback**: Alert, Progress, Spinner, Toast
* **Navigation**: Accordion, Breadcrumb, Dropdown Menu
* **Overlay**: Dialog, Popover, Tooltip
* **Data Display**: Badge, Table
* **Utility**: Error Boundary, Theme Switch

## Advanced Features

* **Component Composition**: Build complex UIs by composing simple components
* **Form Handling**: Integrated with React Hook Form for easy form management
* **Custom Styling**: Extend components with custom styles using Tailwind CSS
* **Animation**: Smooth transitions and animations for interactive elements

For more information, visit the SQLRooms documentation.

## Classes

* [ErrorBoundary](classes/ErrorBoundary.md)

## Interfaces

* [BadgeProps](interfaces/BadgeProps.md)
* [ButtonProps](interfaces/ButtonProps.md)
* [CopyButtonProps](interfaces/CopyButtonProps.md)
* [Dimensions](interfaces/Dimensions.md)
* [UseAspectRatioDimensionsProps](interfaces/UseAspectRatioDimensionsProps.md)
* [UseDisclosureReturnValue](interfaces/UseDisclosureReturnValue.md)

## Type Aliases

* [CalendarProps](type-aliases/CalendarProps.md)
* [ToastProps](type-aliases/ToastProps.md)
* [ToastActionElement](type-aliases/ToastActionElement.md)
* [TreeNodeData](type-aliases/TreeNodeData.md)

## Functions

* [CollapsibleTrigger](functions/CollapsibleTrigger.md)
* [CollapsibleContent](functions/CollapsibleContent.md)
* [Collapsible](functions/Collapsible.md)
* [Slot](functions/Slot.md)
* [Accordion](functions/Accordion.md)
* [AccordionItem](functions/AccordionItem.md)
* [AccordionTrigger](functions/AccordionTrigger.md)
* [AccordionContent](functions/AccordionContent.md)
* [Alert](functions/Alert.md)
* [AlertTitle](functions/AlertTitle.md)
* [AlertDescription](functions/AlertDescription.md)
* [AspectRatio](functions/AspectRatio.md)
* [badgeVariants](functions/badgeVariants.md)
* [Badge](functions/Badge.md)
* [Breadcrumb](functions/Breadcrumb.md)
* [BreadcrumbList](functions/BreadcrumbList.md)
* [BreadcrumbItem](functions/BreadcrumbItem.md)
* [BreadcrumbLink](functions/BreadcrumbLink.md)
* [BreadcrumbPage](functions/BreadcrumbPage.md)
* [BreadcrumbSeparator](functions/BreadcrumbSeparator.md)
* [BreadcrumbEllipsis](functions/BreadcrumbEllipsis.md)
* [buttonVariants](functions/buttonVariants.md)
* [Button](functions/Button.md)
* [Calendar](functions/Calendar.md)
* [Card](functions/Card.md)
* [CardHeader](functions/CardHeader.md)
* [CardTitle](functions/CardTitle.md)
* [CardDescription](functions/CardDescription.md)
* [CardContent](functions/CardContent.md)
* [CardFooter](functions/CardFooter.md)
* [Checkbox](functions/Checkbox.md)
* [ComboboxDemo](functions/ComboboxDemo.md)
* [Command](functions/Command.md)
* [CommandDialog](functions/CommandDialog.md)
* [CommandInput](functions/CommandInput.md)
* [CommandList](functions/CommandList.md)
* [CommandEmpty](functions/CommandEmpty.md)
* [CommandGroup](functions/CommandGroup.md)
* [CommandSeparator](functions/CommandSeparator.md)
* [CommandItem](functions/CommandItem.md)
* [CommandShortcut](functions/CommandShortcut.md)
* [ContextMenu](functions/ContextMenu.md)
* [ContextMenuTrigger](functions/ContextMenuTrigger.md)
* [ContextMenuGroup](functions/ContextMenuGroup.md)
* [ContextMenuPortal](functions/ContextMenuPortal.md)
* [ContextMenuSub](functions/ContextMenuSub.md)
* [ContextMenuRadioGroup](functions/ContextMenuRadioGroup.md)
* [ContextMenuSubTrigger](functions/ContextMenuSubTrigger.md)
* [ContextMenuSubContent](functions/ContextMenuSubContent.md)
* [ContextMenuContent](functions/ContextMenuContent.md)
* [ContextMenuItem](functions/ContextMenuItem.md)
* [ContextMenuCheckboxItem](functions/ContextMenuCheckboxItem.md)
* [ContextMenuRadioItem](functions/ContextMenuRadioItem.md)
* [ContextMenuLabel](functions/ContextMenuLabel.md)
* [ContextMenuSeparator](functions/ContextMenuSeparator.md)
* [ContextMenuShortcut](functions/ContextMenuShortcut.md)
* [CopyButton](functions/CopyButton.md)
* [Dialog](functions/Dialog.md)
* [DialogTrigger](functions/DialogTrigger.md)
* [DialogPortal](functions/DialogPortal.md)
* [DialogClose](functions/DialogClose.md)
* [DialogOverlay](functions/DialogOverlay.md)
* [DialogContent](functions/DialogContent.md)
* [DialogHeader](functions/DialogHeader.md)
* [DialogFooter](functions/DialogFooter.md)
* [DialogTitle](functions/DialogTitle.md)
* [DialogDescription](functions/DialogDescription.md)
* [Drawer](functions/Drawer.md)
* [DrawerTrigger](functions/DrawerTrigger.md)
* [DrawerPortal](functions/DrawerPortal.md)
* [DrawerClose](functions/DrawerClose.md)
* [DrawerHandle](functions/DrawerHandle.md)
* [DrawerOverlay](functions/DrawerOverlay.md)
* [DrawerContent](functions/DrawerContent.md)
* [DrawerHeader](functions/DrawerHeader.md)
* [DrawerFooter](functions/DrawerFooter.md)
* [DrawerTitle](functions/DrawerTitle.md)
* [DrawerDescription](functions/DrawerDescription.md)
* [DropdownMenu](functions/DropdownMenu.md)
* [DropdownMenuTrigger](functions/DropdownMenuTrigger.md)
* [DropdownMenuGroup](functions/DropdownMenuGroup.md)
* [DropdownMenuPortal](functions/DropdownMenuPortal.md)
* [DropdownMenuSub](functions/DropdownMenuSub.md)
* [DropdownMenuRadioGroup](functions/DropdownMenuRadioGroup.md)
* [DropdownMenuSubTrigger](functions/DropdownMenuSubTrigger.md)
* [DropdownMenuSubContent](functions/DropdownMenuSubContent.md)
* [DropdownMenuContent](functions/DropdownMenuContent.md)
* [DropdownMenuItem](functions/DropdownMenuItem.md)
* [DropdownMenuCheckboxItem](functions/DropdownMenuCheckboxItem.md)
* [DropdownMenuRadioItem](functions/DropdownMenuRadioItem.md)
* [DropdownMenuLabel](functions/DropdownMenuLabel.md)
* [DropdownMenuSeparator](functions/DropdownMenuSeparator.md)
* [DropdownMenuShortcut](functions/DropdownMenuShortcut.md)
* [EditableText](functions/EditableText.md)
* [ErrorPane](functions/ErrorPane.md)
* [Form](functions/Form.md)
* [FormField](functions/FormField.md)
* [useFormField](functions/useFormField.md)
* [FormItem](functions/FormItem.md)
* [FormLabel](functions/FormLabel.md)
* [FormControl](functions/FormControl.md)
* [FormDescription](functions/FormDescription.md)
* [FormMessage](functions/FormMessage.md)
* [Input](functions/Input.md)
* [Label](functions/Label.md)
* [MenubarMenu](functions/MenubarMenu.md)
* [MenubarGroup](functions/MenubarGroup.md)
* [MenubarPortal](functions/MenubarPortal.md)
* [MenubarRadioGroup](functions/MenubarRadioGroup.md)
* [MenubarSub](functions/MenubarSub.md)
* [Menubar](functions/Menubar.md)
* [MenubarTrigger](functions/MenubarTrigger.md)
* [MenubarSubTrigger](functions/MenubarSubTrigger.md)
* [MenubarSubContent](functions/MenubarSubContent.md)
* [MenubarContent](functions/MenubarContent.md)
* [MenubarItem](functions/MenubarItem.md)
* [MenubarCheckboxItem](functions/MenubarCheckboxItem.md)
* [MenubarRadioItem](functions/MenubarRadioItem.md)
* [MenubarLabel](functions/MenubarLabel.md)
* [MenubarSeparator](functions/MenubarSeparator.md)
* [MenubarShortcut](functions/MenubarShortcut.md)
* [Pagination](functions/Pagination.md)
* [PaginationContent](functions/PaginationContent.md)
* [PaginationItem](functions/PaginationItem.md)
* [PaginationLink](functions/PaginationLink.md)
* [PaginationPrevious](functions/PaginationPrevious.md)
* [PaginationNext](functions/PaginationNext.md)
* [PaginationEllipsis](functions/PaginationEllipsis.md)
* [Popover](functions/Popover.md)
* [PopoverTrigger](functions/PopoverTrigger.md)
* [PopoverAnchor](functions/PopoverAnchor.md)
* [PopoverContent](functions/PopoverContent.md)
* [ProgressModal](functions/ProgressModal.md)
* [Progress](functions/Progress.md)
* [RadioGroup](functions/RadioGroup.md)
* [RadioGroupItem](functions/RadioGroupItem.md)
* [ResizablePanelGroup](functions/ResizablePanelGroup.md)
* [ResizablePanel](functions/ResizablePanel.md)
* [ResizableHandle](functions/ResizableHandle.md)
* [ScrollArea](functions/ScrollArea.md)
* [ScrollBar](functions/ScrollBar.md)
* [Select](functions/Select.md)
* [SelectGroup](functions/SelectGroup.md)
* [SelectValue](functions/SelectValue.md)
* [SelectTrigger](functions/SelectTrigger.md)
* [SelectScrollUpButton](functions/SelectScrollUpButton.md)
* [SelectScrollDownButton](functions/SelectScrollDownButton.md)
* [SelectContent](functions/SelectContent.md)
* [SelectLabel](functions/SelectLabel.md)
* [SelectItem](functions/SelectItem.md)
* [SelectSeparator](functions/SelectSeparator.md)
* [Separator](functions/Separator.md)
* [Sheet](functions/Sheet.md)
* [SheetTrigger](functions/SheetTrigger.md)
* [SheetClose](functions/SheetClose.md)
* [SheetPortal](functions/SheetPortal.md)
* [SheetOverlay](functions/SheetOverlay.md)
* [SheetContent](functions/SheetContent.md)
* [SheetHeader](functions/SheetHeader.md)
* [SheetFooter](functions/SheetFooter.md)
* [SheetTitle](functions/SheetTitle.md)
* [SheetDescription](functions/SheetDescription.md)
* [SkeletonPane](functions/SkeletonPane.md)
* [Skeleton](functions/Skeleton.md)
* [Slider](functions/Slider.md)
* [SpinnerPane](functions/SpinnerPane.md)
* [Spinner](functions/Spinner.md)
* [Switch](functions/Switch.md)
* [Table](functions/Table.md)
* [TableHeader](functions/TableHeader.md)
* [TableBody](functions/TableBody.md)
* [TableFooter](functions/TableFooter.md)
* [TableRow](functions/TableRow.md)
* [TableHead](functions/TableHead.md)
* [TableCell](functions/TableCell.md)
* [TableCaption](functions/TableCaption.md)
* [Tabs](functions/Tabs.md)
* [TabsList](functions/TabsList.md)
* [TabsTrigger](functions/TabsTrigger.md)
* [TabsContent](functions/TabsContent.md)
* [Textarea](functions/Textarea.md)
* [ThemeSwitch](functions/ThemeSwitch.md)
* [ToastProvider](functions/ToastProvider.md)
* [ToastViewport](functions/ToastViewport.md)
* [Toast](functions/Toast.md)
* [ToastAction](functions/ToastAction.md)
* [ToastClose](functions/ToastClose.md)
* [ToastTitle](functions/ToastTitle.md)
* [ToastDescription](functions/ToastDescription.md)
* [Toaster](functions/Toaster.md)
* [ToggleGroup](functions/ToggleGroup.md)
* [ToggleGroupItem](functions/ToggleGroupItem.md)
* [toggleVariants](functions/toggleVariants.md)
* [Toggle](functions/Toggle.md)
* [TooltipProvider](functions/TooltipProvider.md)
* [Tooltip](functions/Tooltip.md)
* [TooltipTrigger](functions/TooltipTrigger.md)
* [TooltipContent](functions/TooltipContent.md)
* [Tree](functions/Tree.md)
* [reducer](functions/reducer.md)
* [useToast](functions/useToast.md)
* [useAspectRatioDimensions](functions/useAspectRatioDimensions.md)
* [useDisclosure](functions/useDisclosure.md)
* [useRelativeCoordinates](functions/useRelativeCoordinates.md)
* [cn](functions/cn.md)
* [sqlroomsTailwindPreset](functions/sqlroomsTailwindPreset.md)
* [ThemeProvider](functions/ThemeProvider.md)
* [useTheme](functions/useTheme.md)

## References

### toast

Re-exports [toast](functions/useToast.md#toast)

---

---
url: /api/utils.md
---
# @sqlrooms/utils

A collection of utility functions and helpers for SQLRooms applications. This package provides common utilities for string manipulation, file handling, color management, formatting, and more.

## Features

* 🔠 **String Utilities**: Functions for string manipulation and formatting
* 📁 **File Path Handling**: Tools for working with file paths and extensions
* 🎨 **Color Utilities**: Color conversion and manipulation functions
* 📊 **Formatting**: Data formatting for display purposes
* 🔄 **XHR Helpers**: Utilities for working with XMLHttpRequests
* 🧰 **General Helpers**: Common helper functions for everyday tasks

## Installation

```bash
npm install @sqlrooms/utils
# or
yarn add @sqlrooms/utils
```

## Basic Usage

### String Utilities

```tsx
import {truncate, capitalize, slugify} from '@sqlrooms/utils';

// Truncate long text
const shortText = truncate(
  'This is a very long text that needs to be shortened',
  20,
);
console.log(shortText); // 'This is a very long...'

// Capitalize text
const capitalized = capitalize('hello world');
console.log(capitalized); // 'Hello world'

// Create a URL-friendly slug
const slug = slugify('Hello World! This is a test');
console.log(slug); // 'hello-world-this-is-a-test'
```

### File Path Utilities

```tsx
import {getFileExtension, joinPaths, normalizePath} from '@sqlrooms/utils';

// Get file extension
const ext = getFileExtension('document.pdf');
console.log(ext); // 'pdf'

// Join path segments
const fullPath = joinPaths('/base/path', 'subfolder', 'file.txt');
console.log(fullPath); // '/base/path/subfolder/file.txt'

// Normalize a path
const normalized = normalizePath('/path//to/../folder/./file.txt');
console.log(normalized); // '/path/folder/file.txt'
```

### JSON Utilities

```tsx
import {safeJsonParse} from '@sqlrooms/utils';

// Safely parse JSON without throwing exceptions
const result = safeJsonParse('{"name": "John", "age": 30}');
console.log(result); // { name: 'John', age: 30 }

// Handle invalid JSON gracefully
const invalid = safeJsonParse('{"name": "John", age: 30}');
console.log(invalid); // undefined
```

### Formatting Utilities

```tsx
import {formatBytes, formatNumber, formatDate} from '@sqlrooms/utils';

// Format file size
console.log(formatBytes(1024)); // '1 KB'
console.log(formatBytes(1048576)); // '1 MB'

// Format numbers
console.log(formatNumber(1234567.89)); // '1,234,567.89'

// Format dates
console.log(formatDate(new Date(), 'yyyy-MM-dd')); // '2023-04-15'
```

## Advanced Features

* **Type Safety**: All utilities are fully typed with TypeScript
* **Browser Compatibility**: Works in all modern browsers
* **Tree-Shakable**: Import only what you need to minimize bundle size
* **No Dependencies**: Zero external runtime dependencies

For more information, visit the SQLRooms documentation.

## Type Aliases

* [ProgressInfo](type-aliases/ProgressInfo.md)

## Variables

* [NUMBER\_FORMAT](variables/NUMBER_FORMAT.md)

## Functions

* [isMacOS](functions/isMacOS.md)
* [opacifyHex](functions/opacifyHex.md)
* [splitFilePath](functions/splitFilePath.md)
* [convertToValidColumnOrTableName](functions/convertToValidColumnOrTableName.md)
* [convertToUniqueColumnOrTableName](functions/convertToUniqueColumnOrTableName.md)
* [generateUniqueName](functions/generateUniqueName.md)
* [generateUniquePath](functions/generateUniquePath.md)
* [convertToUniqueS3ObjectName](functions/convertToUniqueS3ObjectName.md)
* [convertToUniqueS3FolderPath](functions/convertToUniqueS3FolderPath.md)
* [formatCount](functions/formatCount.md)
* [formatCount4](functions/formatCount4.md)
* [formatCountShort](functions/formatCountShort.md)
* [shorten](functions/shorten.md)
* [formatNumber](functions/formatNumber.md)
* [formatDateTime](functions/formatDateTime.md)
* [formatDate](functions/formatDate.md)
* [formatTimeOfDay](functions/formatTimeOfDay.md)
* [formatTimeRelative](functions/formatTimeRelative.md)
* [formatTimestampForFilename](functions/formatTimestampForFilename.md)
* [getErrorMessageForDisplay](functions/getErrorMessageForDisplay.md)
* [safeJsonParse](functions/safeJsonParse.md)
* [memoizeOnce](functions/memoizeOnce.md)
* [genRandomStr](functions/genRandomStr.md)
* [formatBytes](functions/formatBytes.md)
* [camelCaseToTitle](functions/camelCaseToTitle.md)
* [capitalize](functions/capitalize.md)
* [truncate](functions/truncate.md)
* [postData](functions/postData.md)
* [downloadFile](functions/downloadFile.md)
* [uploadFile](functions/uploadFile.md)

---

---
url: /api/vega.md
---
# @sqlrooms/vega

A package that provides Vega-Lite visualization components for the SQLRooms framework, allowing you to create interactive data visualizations directly from SQL queries.

## About Vega-Lite

[Vega-Lite](https://vega.github.io/vega-lite/) is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation.

Vega-Lite specifications describe visualizations as encoding mappings from data to properties of graphical marks (e.g., points or bars). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. This approach allows for concise specifications while giving users control to customize various parts of a visualization.

This package integrates Vega-Lite with SQLRooms, allowing you to easily create data visualizations directly from SQL queries.

## Components

### VegaLiteChart

A React component that renders a Vega-Lite chart with SQL data and responsive sizing.

#### Features

* **SQL-Powered**: Directly use SQL queries to fetch data for your visualizations
* **Responsive Design**: Multiple sizing options to fit any layout
* **Aspect Ratio Control**: Maintain visual consistency with customizable aspect ratios
* **Integration with DuckDB**: Seamlessly works with the SQLRooms DuckDB integration

#### Installation

```bash
npm install @sqlrooms/vega
# or
yarn add @sqlrooms/vega
```

#### Usage

```tsx
import {VegaLiteChart} from '@sqlrooms/vega';

// Basic usage
function MyChart() {
  return (
    <VegaLiteChart
      sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
      spec={{
        mark: 'bar',
        encoding: {
          x: {field: 'category', type: 'nominal'},
          y: {field: 'count', type: 'quantitative'},
        },
      }}
    />
  );
}
```

#### Props

| Prop          | Type                          | Default     | Description                                                           |
| ------------- | ----------------------------- | ----------- | --------------------------------------------------------------------- |
| `sqlQuery`    | `string`                      | (required)  | The SQL query to fetch data for the chart                             |
| `spec`        | `string \| VisualizationSpec` | (required)  | The Vega-Lite specification for the chart                             |
| `width`       | `number \| 'auto'`            | `'auto'`    | The chart width in pixels, or 'auto' to use container width           |
| `height`      | `number \| 'auto'`            | `'auto'`    | The chart height in pixels, or 'auto' to calculate from aspect ratio  |
| `aspectRatio` | `number`                      | `3/2`       | The desired width-to-height ratio when dimensions are auto-calculated |
| `className`   | `string`                      | `undefined` | Additional CSS classes to apply to the container                      |

#### Sizing Options

The chart can be sized in multiple ways:

* **Fixed dimensions**: Provide both width and height as numbers
* **Fixed width, proportional height**: Provide width as number, height as 'auto'
* **Fixed height, proportional width**: Provide height as number, width as 'auto'
* **Fully responsive**: Leave both as 'auto' (default), chart will fill container while maintaining aspect ratio

#### Examples

**Fixed size chart:**

```tsx
<VegaLiteChart
  width={600}
  height={400}
  sqlQuery="SELECT category, count(*) as count FROM sales GROUP BY category"
  spec={{
    mark: 'bar',
    encoding: {
      x: {field: 'category', type: 'nominal'},
      y: {field: 'count', type: 'quantitative'},
    },
  }}
/>
```

**Responsive chart with 16:9 aspect ratio:**

```tsx
<VegaLiteChart
  className="max-w-[600px]"
  aspectRatio={16 / 9}
  sqlQuery="SELECT date, value FROM metrics"
  spec={{
    mark: 'line',
    encoding: {
      x: {field: 'date', type: 'temporal'},
      y: {field: 'value', type: 'quantitative'},
    },
  }}
/>
```

### VegaChartTool

A tool for creating Vega-Lite charts in AI-assisted workflows, designed to work with the [SQLRooms AI assistant framework](/api/ai/).

#### Features

* **AI Integration**: Allows AI assistants to create data visualizations
* **SQL-Powered**: Uses SQL queries to fetch data for visualizations
* **Declarative Specs**: Uses Vega-Lite's declarative JSON syntax for chart creation
* **Responsive Design**: Charts automatically adapt to container size

#### Usage

```tsx
import {createVegaChartTool} from '@sqlrooms/vega';
import {createAiSlice} from '@sqlrooms/ai';
import {createRoomStore} from '@sqlrooms/room-shell';

// Create a room store with the VegaChartTool configured
export const {roomStore, useRoomStore} = createRoomStore((set, get, store) => ({
  // Other slices and state...

  // AI slice with custom tools
  ...createAiSlice({
    getApiKey: (modelProvider: string) => {
      return get()?.apiKeys[modelProvider] || '';
    },
    // Configure custom tools at store creation time
    customTools: {
      // Add the VegaChart tool
      chart: createVegaChartTool({
        // Optional custom description
        description:
          'Create data visualizations using Vega-Lite and SQL queries',
      }),

      // Other custom tools...
    },
  })(set, get, store),

  // Other state and methods...
}));
```

#### Tool Parameters

The VegaChartTool accepts the following parameters:

| Parameter      | Type     | Description                                                 |
| -------------- | -------- | ----------------------------------------------------------- |
| `sqlQuery`     | `string` | The SQL query to fetch data for the chart                   |
| `vegaLiteSpec` | `string` | The Vega-Lite specification as a JSON string                |
| `reasoning`    | `string` | Optional explanation of the chart's purpose or significance |

#### Example AI Assistant Usage

When the AI assistant uses the VegaChartTool, it will generate a response like this:

```json
{
  "sqlQuery": "SELECT product_category, SUM(sales) as total_sales FROM sales GROUP BY product_category ORDER BY total_sales DESC LIMIT 10",
  "vegaLiteSpec": "{\"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"product_category\", \"type\": \"nominal\", \"sort\": \"-y\"}, \"y\": {\"field\": \"total_sales\", \"type\": \"quantitative\", \"title\": \"Total Sales\"}, \"color\": {\"field\": \"product_category\", \"type\": \"nominal\", \"legend\": null}}}",
  "reasoning": "This chart visualizes the top 10 product categories by total sales to identify the best-performing categories."
}
```

In a conversation with the AI assistant, it might look like this:

```
User: Can you show me a chart of our top 10 product categories by sales?

AI: I'll create a visualization of your top 10 product categories by sales.

[Chart: Bar chart showing product categories on the x-axis and total sales on the y-axis]

This chart displays your top 10 product categories ranked by total sales. As you can see,
Electronics leads with the highest sales, followed by Furniture and Clothing. This visualization
helps identify which product categories are driving the most revenue for your business.
```

The tool will:

1. Execute the SQL query to fetch the data
2. Apply the Vega-Lite specification to create the visualization
3. Render the chart in the UI with responsive sizing

## Dependencies

This package depends on:

* `@sqlrooms/duckdb` - For SQL query execution
* `@sqlrooms/ui` - For UI utilities
* `@sqlrooms/utils` - For utility functions
* `@sqlrooms/ai` - For AI assistant integration
* `react-vega` - For rendering Vega-Lite visualizations

## Type Aliases

* [VisualizationSpec](type-aliases/VisualizationSpec.md)
* [VegaChartToolParameters](type-aliases/VegaChartToolParameters.md)

## Variables

* [VegaChartToolParameters](variables/VegaChartToolParameters.md)
* [DEFAULT\_VEGA\_CHART\_DESCRIPTION](variables/DEFAULT_VEGA_CHART_DESCRIPTION.md)

## Functions

* [createVegaChartTool](functions/createVegaChartTool.md)
* [VegaChartToolResult](functions/VegaChartToolResult.md)
* [VegaLiteChart](functions/VegaLiteChart.md)

## References

### VegaChartToolParametersType

Renames and re-exports [VegaChartToolParameters](variables/VegaChartToolParameters.md)

---

---
url: /api/recharts/namespaces/CartesianGrid.md
---
[@sqlrooms/recharts](../../index.md) / CartesianGrid

# CartesianGrid

## Variables

* [displayName](variables/displayName.md)

---

---
url: /case-studies.md
---

# Case Studies

## Foursquare Spatial Desktop

[Foursquare Spatial Desktop](https://foursquare.com/products/spatial-desktop) is a powerful geospatial computing tool that transforms your desktop into a comprehensive spatial analysis environment. Built on SQLRooms, it delivers native DuckDB query performance and real-time visualization rendering—all powered natively on your machine without requiring server infrastructure.

[\<img src=/media/case-studies/fsq-spatial-desktop-earthquakes.webp width=450>](https://foursquare.com/products/spatial-desktop/)

Key features include:

* **Native DuckDB Performance**: Run complex spatial queries on multi-GB datasets with native DuckDB integration without cloud compute dependence
* **Real-time Rendering**: Harness Kepler.gl's visualization excellence to render millions of points with interactive filtering and smooth animations
* **Modern Spatial Formats**: Native support for GeoParquet, PMTiles, and other formats GIS professionals need
* **Flexible Data Management**: Save projects locally or to personal cloud storage without internet connectivity requirements
* **Offline Capability**: Full analytical power available without cloud dependencies

## Flowmap City

[Flowmap City](https://www.flowmap.city/) is a powerful web-based platform for visualizing and analyzing mobility data and origin-destination flows. The application helps urban planners, transportation analysts, and researchers understand movement patterns in cities and regions.

[\<img src=/media/case-studies/flowmap-city.webp width=400>](https://www.flowmap.city/)

The platform enables users to upload their own mobility datasets and create interactive visualizations that can be shared with stakeholders or embedded in other applications.

Key features include:

* **Flow Visualization**: Analyze origin-destination patterns with interactive flow maps
* **Mobility Analysis**: Study commuting patterns, transportation demand, and traffic flows
* **Temporal Patterns**: Explore how movement patterns change over time and seasons
* **Multi-modal Analysis**: Compare different transportation modes and their usage
* **Infrastructure Planning**: Make data-driven decisions for transportation infrastructure
* **Interactive Filtering**: Filter and analyze specific routes, regions, or time periods

## Cosmograph

[Cosmograph](https://cosmograph.app/) is a powerful web-based application for visualizing and analyzing large graph datasets and machine learning embeddings. The application runs entirely in the browser, leveraging your GPU for all computations while keeping your data private and secure. The upcoming version of Cosmograph is being built using SQLRooms to enhance its data processing capabilities and analytical features.

[\<img src=/media/case-studies/cosmograph.webp width=400>](https://run.cosmograph.app/)

Key features include:

* **Network Graph Visualization**: Analyze complex relationships and patterns in graph data
* **ML Embeddings Analysis**: Visualize and explore machine learning embeddings in 2D space
* **Temporal Analysis**: Study how relationships and patterns evolve over time
* **Community Detection**: Identify clusters and anomalies within your data
* **Interactive Analysis**: Use filters and histograms to explore data distributions
* **GPU-Accelerated**: Performs all calculations locally using your GPU for optimal performance

---

---
url: /api/recharts/classes/Area.md
---
[@sqlrooms/recharts](../index.md) / Area

# Class: Area

## Extends

* `PureComponent`<[`AreaProps`](../type-aliases/AreaProps.md), `State`>

## Constructors

### new Area()

> **new Area**(`props`): [`Area`](Area.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`AreaProps`](../type-aliases/AreaProps.md) |

#### Returns

[`Area`](Area.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Area()

> **new Area**(`props`, `context`): [`Area`](Area.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`AreaProps`](../type-aliases/AreaProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Area`](Area.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.connectNulls` | `public` | `boolean` | - | - | - |
| `defaultProps.points` | `public` | `AreaPointItem`\[] | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getBaseValue` | `static` | (`props`: [`AreaProps`](../type-aliases/AreaProps.md), `item`: [`Area`](Area.md), `xAxis`: `undefined` | `Omit`<[`XAxisProps`](../type-aliases/XAxisProps.md), `"scale"`> & `object`, `yAxis`: `undefined` | `Omit`<[`YAxisProps`](../type-aliases/YAxisProps.md), `"scale"`> & `object`) => `number` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | - | - | - |
|  `renderDotItem` | `static` | (`option`: `AreaDot`, `props`: `any`) => `Element` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Area.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Area.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`AreaProps`](../type-aliases/AreaProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`AreaProps`](../type-aliases/AreaProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderDots()

> **renderDots**(`needClip`, `clipDot`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipDot` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderHorizontalRect()

> **renderHorizontalRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderVerticalRect()

> **renderVerticalRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderClipRect()

> **renderClipRect**(`alpha`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `alpha` | `number` |

#### Returns

`Element`

***

### renderAreaStatically()

> **renderAreaStatically**(`points`, `baseLine`, `needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `AreaPointItem`\[] |
| `baseLine` | `undefined` | `number` | `Coordinate`\[] |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderAreaWithAnimation()

> **renderAreaWithAnimation**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderArea()

> **renderArea**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Bar.md
---
[@sqlrooms/recharts](../index.md) / Bar

# Class: Bar

## Extends

* `PureComponent`<[`BarProps`](../type-aliases/BarProps.md), `State`>

## Constructors

### new Bar()

> **new Bar**(`props`): [`Bar`](Bar.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`BarProps`](../type-aliases/BarProps.md) |

#### Returns

[`Bar`](Bar.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Bar()

> **new Bar**(`props`, `context`): [`Bar`](Bar.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`BarProps`](../type-aliases/BarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Bar`](Bar.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.minPointSize` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.data` | `public` | `BarRectangleItem`\[] | - | - | - |
| `defaultProps.layout` | `public` | `string` | - | - | - |
| `defaultProps.activeBar` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | Compose the data of each group | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Bar.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Bar.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BarProps`](../type-aliases/BarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`BarProps`](../type-aliases/BarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderRectanglesStatically()

> **renderRectanglesStatically**(`data`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `data` | `BarRectangleItem`\[] |

#### Returns

`Element`\[]

***

### renderRectanglesWithAnimation()

> **renderRectanglesWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderRectangles()

> **renderRectangles**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderBackground()

> **renderBackground**(): `Element`\[]

#### Returns

`Element`\[]

***

### renderErrorBar()

> **renderErrorBar**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Brush.md
---
[@sqlrooms/recharts](../index.md) / Brush

# Class: Brush

## Extends

* `PureComponent`<[`BrushProps`](../type-aliases/BrushProps.md), `State`>

## Constructors

### new Brush()

> **new Brush**(`props`): [`Brush`](Brush.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`BrushProps`](../type-aliases/BrushProps.md) |

#### Returns

[`Brush`](Brush.md)

#### Overrides

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`State`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.travellerWidth` | `public` | `number` | - | - |
| `defaultProps.gap` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.top` | `public` | `number` | - | - |
| `defaultProps.padding.right` | `public` | `number` | - | - |
| `defaultProps.padding.bottom` | `public` | `number` | - | - |
| `defaultProps.padding.left` | `public` | `number` | - | - |
| `defaultProps.leaveTimeOut` | `public` | `number` | - | - |
| `defaultProps.alwaysShowText` | `public` | `boolean` | - | - |
|  `leaveTimer?` | `public` | `number` | - | - |
|  `travellerDragStartHandlers?` | `public` | `Record`<`BrushTravellerId`, (`event`) => `void`> | - | - |
|  `handleDrag` | `public` | (`e`: `MouseEvent` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `Touch`) => `void` | - | - |
|  `handleTouchMove` | `public` | (`e`: `TouchEvent`<`SVGGElement`>) => `void` | - | - |
|  `handleDragEnd` | `public` | () => `void` | - | - |
|  `handleLeaveWrapper` | `public` | () => `void` | - | - |
|  `handleEnterSlideOrTraveller` | `public` | () => `void` | - | - |
|  `handleLeaveSlideOrTraveller` | `public` | () => `void` | - | - |
|  `handleSlideDragStart` | `public` | (`e`: `TouchEvent`<`SVGRectElement`> | `MouseEvent`<`SVGRectElement`, `MouseEvent`>) => `void` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Brush.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Brush.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`BrushProps`](../type-aliases/BrushProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### renderDefaultTraveller()

> `static` **renderDefaultTraveller**(`props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `any` |

#### Returns

`Element`

***

### renderTraveller()

> `static` **renderTraveller**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `BrushTravellerType` |
| `props` | `any` |

#### Returns

`Element`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`BrushProps`](../type-aliases/BrushProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### componentWillUnmount()

> **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Overrides

`PureComponent.componentWillUnmount`

***

### getIndexInRange()

> `static` **getIndexInRange**(`valueRange`, `x`): `number`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `valueRange` | `number`\[] |
| `x` | `number` |

#### Returns

`number`

***

### getIndex()

> **getIndex**(`__namedParameters`): `object`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `startX`: `number`; `endX`: `number`; } |
| `__namedParameters.startX` | `number` |
| `__namedParameters.endX` | `number` |

#### Returns

`object`

| Name | Type |
| ------ | ------ |
|  `startIndex` | `number` |
|  `endIndex` | `number` |

***

### getTextOfTick()

> **getTextOfTick**(`index`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`any`

***

### attachDragEndListener()

> **attachDragEndListener**(): `void`

#### Returns

`void`

***

### detachDragEndListener()

> **detachDragEndListener**(): `void`

#### Returns

`void`

***

### handleSlideDrag()

> **handleSlideDrag**(`e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `Touch` |

#### Returns

`void`

***

### handleTravellerDragStart()

> **handleTravellerDragStart**(`id`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `id` | `BrushTravellerId` |
| `e` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `TouchEvent`<`SVGGElement`> |

#### Returns

`void`

***

### handleTravellerMove()

> **handleTravellerMove**(`e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `e` | `MouseEvent` | `MouseEvent`<`SVGGElement`, `MouseEvent`> | `Touch` |

#### Returns

`void`

***

### handleTravellerMoveKeyboard()

> **handleTravellerMoveKeyboard**(`direction`, `id`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `direction` | `-1` | `1` |
| `id` | `BrushTravellerId` |

#### Returns

`void`

***

### renderBackground()

> **renderBackground**(): `Element`

#### Returns

`Element`

***

### renderPanorama()

> **renderPanorama**(): `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>

#### Returns

`ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>

***

### renderTravellerLayer()

> **renderTravellerLayer**(`travellerX`, `id`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `travellerX` | `number` |
| `id` | `BrushTravellerId` |

#### Returns

`Element`

***

### renderSlide()

> **renderSlide**(`startX`, `endX`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `startX` | `number` |
| `endX` | `number` |

#### Returns

`Element`

***

### renderText()

> **renderText**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/CartesianAxis.md
---
[@sqlrooms/recharts](../index.md) / CartesianAxis

# Class: CartesianAxis

## Extends

* `Component`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md), `IState`>

## Constructors

### new CartesianAxis()

> **new CartesianAxis**(`props`): [`CartesianAxis`](CartesianAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md) |

#### Returns

[`CartesianAxis`](CartesianAxis.md)

#### Overrides

`Component<Props, IState>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `Component.context` |
|  `props` | `readonly` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> | - | `Component.props` |
|  `state` | `public` | `Readonly`<`IState`> | - | `Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.x` | `public` | `number` | - | - |
| `defaultProps.y` | `public` | `number` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.viewBox` | `public` | `object` | - | - |
| `defaultProps.viewBox.x` | `public` | `number` | - | - |
| `defaultProps.viewBox.y` | `public` | `number` | - | - |
| `defaultProps.viewBox.width` | `public` | `number` | - | - |
| `defaultProps.viewBox.height` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.ticks` | `public` | `CartesianTickItem`\[] | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.tickLine` | `public` | `boolean` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.minTickGap` | `public` | `number` | - | - |
| `defaultProps.tickSize` | `public` | `number` | - | - |
| `defaultProps.tickMargin` | `public` | `number` | - | - |
| `defaultProps.interval` | `public` | `string` | - | - |
|  `layerReference` | `private` | `any` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `IState` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `IState` | (`prevState`, `props`) => `null` | `IState` | `Pick`<`IState`, `K`> | `Pick`<`IState`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.forceUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](CartesianAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `prevState` | `Readonly`<`IState`> |

#### Returns

`any`

#### Inherited from

`Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](CartesianAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `prevState` | `Readonly`<`IState`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `nextState` | `Readonly`<`IState`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md)> |
| `nextState` | `Readonly`<`IState`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillUpdate`

***

### shouldComponentUpdate()

> **shouldComponentUpdate**(`__namedParameters`, `nextState`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`CartesianAxisProps`](../type-aliases/CartesianAxisProps.md) |
| `nextState` | `IState` |

#### Returns

`boolean`

#### Overrides

`Component.shouldComponentUpdate`

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`Component.componentDidMount`

***

### getTickLineCoord()

> **getTickLineCoord**(`data`): `object`

Calculate the coordinates of endpoints in ticks

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `CartesianTickItem` | The data of a simple tick |

#### Returns

`object`

(x1, y1): The coordinate of endpoint close to tick text
(x2, y2): The coordinate of endpoint close to axis

| Name | Type |
| ------ | ------ |
|  `line` | { `x1`: `number`; `y1`: `number`; `x2`: `number`; `y2`: `number`; } |
|  `tick` | { `x`: `number`; `y`: `number`; } |

***

### getTickTextAnchor()

> **getTickTextAnchor**(): `string`

#### Returns

`string`

***

### getTickVerticalAnchor()

> **getTickVerticalAnchor**(): `string`

#### Returns

`string`

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `undefined` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> |
| `props` | `any` |
| `value` | `ReactNode` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(`ticks`, `fontSize`, `letterSpacing`): `Element`

render the ticks

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `ticks` | `CartesianTickItem`\[] | The ticks to actually render (overrides what was passed in props) |
| `fontSize` | `string` | Fontsize to consider for tick spacing |
| `letterSpacing` | `string` | Letterspacing to consider for tick spacing |

#### Returns

`Element`

renderedTicks

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`Component.render`

---

---
url: /api/recharts/classes/DefaultLegendContent.md
---
[@sqlrooms/recharts](../index.md) / DefaultLegendContent

# Class: DefaultLegendContent

## Extends

* `PureComponent`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)>

## Constructors

### new DefaultLegendContent()

> **new DefaultLegendContent**(`props`): [`DefaultLegendContent`](DefaultLegendContent.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md) |

#### Returns

[`DefaultLegendContent`](DefaultLegendContent.md)

#### Inherited from

`PureComponent<Props>.constructor`

### new DefaultLegendContent()

> **new DefaultLegendContent**(`props`, `context`): [`DefaultLegendContent`](DefaultLegendContent.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`DefaultLegendContent`](DefaultLegendContent.md)

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<{}> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.iconSize` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
| `defaultProps.align` | `public` | `string` | - | - |
| `defaultProps.verticalAlign` | `public` | `string` | - | - |
| `defaultProps.inactiveColor` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](DefaultLegendContent.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](DefaultLegendContent.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`DefaultLegendContentProps`](../type-aliases/DefaultLegendContentProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### renderIcon()

> **renderIcon**(`data`): `Element`

Render the path of icon

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Payload` | Data of each legend item |

#### Returns

`Element`

Path element

***

### renderItems()

> **renderItems**(): `Element`\[]

Draw items of legend

#### Returns

`Element`\[]

Items

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/ErrorBar.md
---
[@sqlrooms/recharts](../index.md) / ErrorBar

# Class: ErrorBar

## Extends

* `Component`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)>

## Constructors

### new ErrorBar()

> **new ErrorBar**(`props`): [`ErrorBar`](ErrorBar.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ErrorBarProps`](../type-aliases/ErrorBarProps.md) |

#### Returns

[`ErrorBar`](ErrorBar.md)

#### Inherited from

`React.Component<Props>.constructor`

### new ErrorBar()

> **new ErrorBar**(`props`, `context`): [`ErrorBar`](ErrorBar.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ErrorBarProps`](../type-aliases/ErrorBarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ErrorBar`](ErrorBar.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.offset` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
|  `displayName` | `static` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ErrorBar.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ErrorBar.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/ui/classes/ErrorBoundary.md
---
[@sqlrooms/ui](../index.md) / ErrorBoundary

# Class: ErrorBoundary

## Extends

* `Component`<`Props`, `State`>

## Constructors

### new ErrorBoundary()

> **new ErrorBoundary**(`props`): [`ErrorBoundary`](ErrorBoundary.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Props` |

#### Returns

[`ErrorBoundary`](ErrorBoundary.md)

#### Inherited from

`Component<Props, State>.constructor`

### new ErrorBoundary()

> **new ErrorBoundary**(`props`, `context`): [`ErrorBoundary`](ErrorBoundary.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `Props` |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ErrorBoundary`](ErrorBoundary.md)

#### Inherited from

`Component<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `Component.context` |
|  `props` | `readonly` | `Readonly`<`Props`> | - | - | `Component.props` |
|  `state` | `public` | `State` | - | `Component.state` | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`Component.componentWillUnmount`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ErrorBoundary.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`Props`> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ErrorBoundary.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`Props`> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`Component.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromError()

> `static` **getDerivedStateFromError**(`error`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |

#### Returns

`State`

***

### componentDidCatch()

> **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Overrides

`Component.componentDidCatch`

***

### handleRetry()

> `private` **handleRetry**(): `void`

#### Returns

`void`

***

### render()

> **render**(): `undefined` | `null` | `string` | `number` | `bigint` | `boolean` | `Iterable`<`ReactNode`, `any`, `any`> | `Promise`<`AwaitedReactNode`> | `Element`

#### Returns

`undefined` | `null` | `string` | `number` | `bigint` | `boolean` | `Iterable`<`ReactNode`, `any`, `any`> | `Promise`<`AwaitedReactNode`> | `Element`

#### Overrides

`Component.render`

---

---
url: /api/recharts/classes/Funnel.md
---
[@sqlrooms/recharts](../index.md) / Funnel

# Class: Funnel

## Extends

* `PureComponent`<[`FunnelProps`](../type-aliases/FunnelProps.md), `State`>

## Constructors

### new Funnel()

> **new Funnel**(`props`): [`Funnel`](Funnel.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`FunnelProps`](../type-aliases/FunnelProps.md) |

#### Returns

[`Funnel`](Funnel.md)

#### Inherited from

`PureComponent<FunnelProps, State>.constructor`

### new Funnel()

> **new Funnel**(`props`, `context`): [`Funnel`](Funnel.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`FunnelProps`](../type-aliases/FunnelProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Funnel`](Funnel.md)

#### Inherited from

`PureComponent<FunnelProps, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.labelLine` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.lastShapeType` | `public` | `string` | - | - | - |
|  `getRealFunnelData` | `static` | (`item`: [`Funnel`](Funnel.md)) => `any`\[] | - | - | - |
|  `getRealWidthHeight` | `static` | (`item`: [`Funnel`](Funnel.md), `offset`: `ChartOffset`) => `object` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Funnel.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Funnel.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`FunnelProps`](../type-aliases/FunnelProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`FunnelProps`](../type-aliases/FunnelProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### isActiveIndex()

> **isActiveIndex**(`i`): `boolean`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `i` | `number` |

#### Returns

`boolean`

***

### renderTrapezoidsStatically()

> **renderTrapezoidsStatically**(`trapezoids`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `trapezoids` | `FunnelTrapezoidItem`\[] |

#### Returns

`Element`\[]

***

### renderTrapezoidsWithAnimation()

> **renderTrapezoidsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderTrapezoids()

> **renderTrapezoids**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Legend.md
---
[@sqlrooms/recharts](../index.md) / Legend

# Class: Legend

## Extends

* `PureComponent`<[`LegendProps`](../type-aliases/LegendProps.md), `State`>

## Constructors

### new Legend()

> **new Legend**(`props`): [`Legend`](Legend.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`LegendProps`](../type-aliases/LegendProps.md) |

#### Returns

[`Legend`](Legend.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Legend()

> **new Legend**(`props`, `context`): [`Legend`](Legend.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`LegendProps`](../type-aliases/LegendProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Legend`](Legend.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<`State`> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.iconSize` | `public` | `number` | - | - |
| `defaultProps.layout` | `public` | `string` | - | - |
| `defaultProps.align` | `public` | `string` | - | - |
| `defaultProps.verticalAlign` | `public` | `string` | - | - |
|  `wrapperNode` | `private` | `any` | - | - |
|  `lastBoundingBox` | `public` | `object` | - | - |
| `lastBoundingBox.width` | `public` | `number` | - | - |
| `lastBoundingBox.height` | `public` | `number` | - | - |
|  `updateBBox` | `private` | `any` | - | - |
|  `getBBoxSnapshot` | `private` | `any` | - | - |
|  `getDefaultPosition` | `private` | `any` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Legend.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LegendProps`](../type-aliases/LegendProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getWithHeight()

> `static` **getWithHeight**(`item`, `chartWidth`): `null` | { `height`: `number`; } | { `width`: `number`; }

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | { `props`: { `layout`: `LayoutType`; `height`: `number`; `width`: `number`; }; } |
| `item.props` | { `layout`: `LayoutType`; `height`: `number`; `width`: `number`; } |
| `item.props.layout`? | `LayoutType` |
| `item.props.height`? | `number` |
| `item.props.width`? | `number` |
| `chartWidth` | `number` |

#### Returns

`null` | { `height`: `number`; } | { `width`: `number`; }

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### componentDidUpdate()

> **componentDidUpdate**(): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Legend.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidUpdate`

***

### getBBox()

> **getBBox**(): `DOMRect`

#### Returns

`DOMRect`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Line.md
---
[@sqlrooms/recharts](../index.md) / Line

# Class: Line

## Extends

* `PureComponent`<[`LineProps`](../type-aliases/LineProps.md), `State`>

## Constructors

### new Line()

> **new Line**(`props`): [`Line`](Line.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`LineProps`](../type-aliases/LineProps.md) |

#### Returns

[`Line`](Line.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Line()

> **new Line**(`props`, `context`): [`Line`](Line.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`LineProps`](../type-aliases/LineProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Line`](Line.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.connectNulls` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.points` | `public` | `LinePointItem`\[] | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animateNewValues` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.label` | `public` | `boolean` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | Compose the data of each group | - | - |
|  `mainCurve?` | `public` | `SVGPathElement` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `generateSimpleStrokeDasharray` | `public` | (`totalLength`: `number`, `length`: `number`) => `string` | - | - | - |
|  `getStrokeDasharray` | `public` | (`length`: `number`, `totalLength`: `number`, `lines`: `number`\[]) => `string` | - | - | - |
|  `id` | `public` | `string` | - | - | - |
|  `pathRef` | `public` | (`node`: `SVGPathElement`) => `void` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Line.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`LineProps`](../type-aliases/LineProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### componentDidUpdate()

> **componentDidUpdate**(): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Line.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`LineProps`](../type-aliases/LineProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getTotalLength()

> **getTotalLength**(): `number`

#### Returns

`number`

***

### repeat()

> `static` **repeat**(`lines`, `count`): `number`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `lines` | `number`\[] |
| `count` | `number` |

#### Returns

`number`\[]

***

### renderErrorBar()

> **renderErrorBar**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderDotItem()

> `static` **renderDotItem**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `LineDot` |
| `props` | `any` |

#### Returns

`Element`

***

### renderDots()

> **renderDots**(`needClip`, `clipDot`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipDot` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderCurveStatically()

> **renderCurveStatically**(`points`, `needClip`, `clipPathId`, `props`?): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `LinePointItem`\[] |
| `needClip` | `boolean` |
| `clipPathId` | `string` |
| `props`? | { `strokeDasharray`: `string`; } |
| `props.strokeDasharray`? | `string` |

#### Returns

`Element`

***

### renderCurveWithAnimation()

> **renderCurveWithAnimation**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### renderCurve()

> **renderCurve**(`needClip`, `clipPathId`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `needClip` | `boolean` |
| `clipPathId` | `string` |

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Pie.md
---
[@sqlrooms/recharts](../index.md) / Pie

# Class: Pie

## Extends

* `PureComponent`<[`PieProps`](../type-aliases/PieProps.md), `State`>

## Constructors

### new Pie()

> **new Pie**(`props`): [`Pie`](Pie.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PieProps`](../type-aliases/PieProps.md) |

#### Returns

[`Pie`](Pie.md)

#### Overrides

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> | - | - | `PureComponent.props` |
|  `pieRef` | `public` | `SVGGElement` | - | - | - |
|  `sectorRefs` | `public` | `SVGGElement`\[] | - | - | - |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - | - |
| `defaultProps.fill` | `public` | `string` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.cx` | `public` | `string` | - | - | - |
| `defaultProps.cy` | `public` | `string` | - | - | - |
| `defaultProps.startAngle` | `public` | `number` | - | - | - |
| `defaultProps.endAngle` | `public` | `number` | - | - | - |
| `defaultProps.innerRadius` | `public` | `number` | - | - | - |
| `defaultProps.outerRadius` | `public` | `string` | - | - | - |
| `defaultProps.paddingAngle` | `public` | `number` | - | - | - |
| `defaultProps.labelLine` | `public` | `boolean` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.minAngle` | `public` | `number` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.blendStroke` | `public` | `boolean` | - | - | - |
| `defaultProps.rootTabIndex` | `public` | `number` | - | - | - |
|  `parseDeltaAngle` | `static` | (`startAngle`: `number`, `endAngle`: `number`) => `number` | - | - | - |
|  `getRealPieData` | `static` | (`itemProps`: [`PieProps`](../type-aliases/PieProps.md)) => `any`\[] | - | - | - |
|  `parseCoordinateOfPie` | `static` | (`itemProps`: [`PieProps`](../type-aliases/PieProps.md), `offset`: `ChartOffset`) => `object` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `Omit`<[`PieProps`](../type-aliases/PieProps.md), `"dataKey"`> | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `id` | `public` | `string` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Pie.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Pie.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PieProps`](../type-aliases/PieProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`PieProps`](../type-aliases/PieProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getTextAnchor()

> `static` **getTextAnchor**(`x`, `cx`): `"end"` | `"middle"` | `"start"`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `cx` | `number` |

#### Returns

`"end"` | `"middle"` | `"start"`

***

### isActiveIndex()

> **isActiveIndex**(`i`): `boolean`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `i` | `number` |

#### Returns

`boolean`

***

### hasActiveIndex()

> **hasActiveIndex**(): `number` | `boolean`

#### Returns

`number` | `boolean`

***

### renderLabelLineItem()

> `static` **renderLabelLineItem**(`option`, `props`, `key`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `PieLabelLine` |
| `props` | `any` |
| `key` | `string` |

#### Returns

`Element`

***

### renderLabelItem()

> `static` **renderLabelItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | [`PieLabel`](../type-aliases/PieLabel.md) |
| `props` | `any` |
| `value` | `any` |

#### Returns

`Element`

***

### renderLabels()

> **renderLabels**(`sectors`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | `PieSectorDataItem`\[] |

#### Returns

`Element`

***

### renderSectorsStatically()

> **renderSectorsStatically**(`sectors`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | `PieSectorDataItem`\[] |

#### Returns

`Element`\[]

***

### renderSectorsWithAnimation()

> **renderSectorsWithAnimation**(): `Element`

#### Returns

`Element`

***

### attachKeyboardHandlers()

> **attachKeyboardHandlers**(`pieRef`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `pieRef` | `SVGGElement` |

#### Returns

`void`

***

### renderSectors()

> **renderSectors**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### componentDidMount()

> **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Overrides

`PureComponent.componentDidMount`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/PolarAngleAxis.md
---
[@sqlrooms/recharts](../index.md) / PolarAngleAxis

# Class: PolarAngleAxis

## Extends

* `PureComponent`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)>

## Constructors

### new PolarAngleAxis()

> **new PolarAngleAxis**(`props`): [`PolarAngleAxis`](PolarAngleAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md) |

#### Returns

[`PolarAngleAxis`](PolarAngleAxis.md)

#### Inherited from

`PureComponent<Props>.constructor`

### new PolarAngleAxis()

> **new PolarAngleAxis**(`props`, `context`): [`PolarAngleAxis`](PolarAngleAxis.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`PolarAngleAxis`](PolarAngleAxis.md)

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<{}> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `axisType` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.cx` | `public` | `number` | - | - |
| `defaultProps.cy` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tickLine` | `public` | `boolean` | - | - |
| `defaultProps.tickSize` | `public` | `number` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](PolarAngleAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](PolarAngleAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarAngleAxisProps`](../type-aliases/PolarAngleAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getTickLineCoord()

> **getTickLineCoord**(`data`): `object`

Calculate the coordinate of line endpoint

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `TickItem` | The Data if ticks |

#### Returns

`object`

(x0, y0): The start point of text,
(x1, y1): The end point close to text,
(x2, y2): The end point close to axis

| Name | Type |
| ------ | ------ |
|  `x1` | `number` |
|  `y1` | `number` |
|  `x2` | `number` |
|  `y2` | `number` |

***

### getTickTextAnchor()

> **getTickTextAnchor**(`data`): `string`

Get the text-anchor of each tick

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `TickItem` | Data of ticks |

#### Returns

`string`

text-anchor

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `undefined` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> |
| `props` | `any` |
| `value` | `string` | `number` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/PolarRadiusAxis.md
---
[@sqlrooms/recharts](../index.md) / PolarRadiusAxis

# Class: PolarRadiusAxis

## Extends

* `PureComponent`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)>

## Constructors

### new PolarRadiusAxis()

> **new PolarRadiusAxis**(`props`): [`PolarRadiusAxis`](PolarRadiusAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md) |

#### Returns

[`PolarRadiusAxis`](PolarRadiusAxis.md)

#### Inherited from

`PureComponent<Props>.constructor`

### new PolarRadiusAxis()

> **new PolarRadiusAxis**(`props`, `context`): [`PolarRadiusAxis`](PolarRadiusAxis.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`PolarRadiusAxis`](PolarRadiusAxis.md)

#### Inherited from

`PureComponent<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<{}> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `axisType` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - |
| `defaultProps.cx` | `public` | `number` | - | - |
| `defaultProps.cy` | `public` | `number` | - | - |
| `defaultProps.angle` | `public` | `number` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.axisLine` | `public` | `boolean` | - | - |
| `defaultProps.tick` | `public` | `boolean` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](PolarRadiusAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](PolarRadiusAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`PolarRadiusAxisProps`](../type-aliases/PolarRadiusAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getTickValueCoord()

> **getTickValueCoord**(`coordinate`): `Coordinate`

Calculate the coordinate of tick

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `coordinate` | `TickItem` | The radius of tick |

#### Returns

`Coordinate`

(x, y)

***

### getTickTextAnchor()

> **getTickTextAnchor**(): `string`

#### Returns

`string`

***

### getViewBox()

> **getViewBox**(): `object`

#### Returns

`object`

| Name | Type |
| ------ | ------ |
|  `cx` | `number` |
|  `cy` | `number` |
|  `startAngle` | `number` |
|  `endAngle` | `number` |
|  `innerRadius` | `number` |
|  `outerRadius` | `number` |

***

### renderAxisLine()

> **renderAxisLine**(): `Element`

#### Returns

`Element`

***

### renderTickItem()

> `static` **renderTickItem**(`option`, `props`, `value`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `undefined` | `boolean` | `SVGProps`<`SVGTextElement`> | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`> |
| `props` | `any` |
| `value` | `string` | `number` |

#### Returns

`Element`

***

### renderTicks()

> **renderTicks**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Radar.md
---
[@sqlrooms/recharts](../index.md) / Radar

# Class: Radar

## Extends

* `PureComponent`<[`RadarProps`](../type-aliases/RadarProps.md), `State`>

## Constructors

### new Radar()

> **new Radar**(`props`): [`Radar`](Radar.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`RadarProps`](../type-aliases/RadarProps.md) |

#### Returns

[`Radar`](Radar.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Radar()

> **new Radar**(`props`, `context`): [`Radar`](Radar.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`RadarProps`](../type-aliases/RadarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Radar`](Radar.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.activeDot` | `public` | `boolean` | - | - | - |
| `defaultProps.dot` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |
|  `handleMouseEnter` | `public` | (`e`: `MouseEvent`<`SVGPolygonElement`>) => `void` | - | - | - |
|  `handleMouseLeave` | `public` | (`e`: `MouseEvent`<`SVGPolygonElement`>) => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Radar.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Radar.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadarProps`](../type-aliases/RadarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`RadarProps`](../type-aliases/RadarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderDotItem()

> `static` **renderDotItem**(`option`, `props`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `RadarDot` |
| `props` | `any` |

#### Returns

`Element`

***

### renderDots()

> **renderDots**(`points`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `RadarPoint`\[] |

#### Returns

`Element`

***

### renderPolygonStatically()

> **renderPolygonStatically**(`points`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `RadarPoint`\[] |

#### Returns

`Element`

***

### renderPolygonWithAnimation()

> **renderPolygonWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderPolygon()

> **renderPolygon**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/RadialBar.md
---
[@sqlrooms/recharts](../index.md) / RadialBar

# Class: RadialBar

## Extends

* `PureComponent`<[`RadialBarProps`](../type-aliases/RadialBarProps.md), `State`>

## Constructors

### new RadialBar()

> **new RadialBar**(`props`): [`RadialBar`](RadialBar.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |

#### Returns

[`RadialBar`](RadialBar.md)

#### Inherited from

`PureComponent<RadialBarProps, State>.constructor`

### new RadialBar()

> **new RadialBar**(`props`, `context`): [`RadialBar`](RadialBar.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`RadialBar`](RadialBar.md)

#### Inherited from

`PureComponent<RadialBarProps, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.angleAxisId` | `public` | `number` | - | - | - |
| `defaultProps.radiusAxisId` | `public` | `number` | - | - | - |
| `defaultProps.minPointSize` | `public` | `number` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.data` | `public` | `RadialBarDataItem`\[] | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
| `defaultProps.forceCornerRadius` | `public` | `boolean` | - | - | - |
| `defaultProps.cornerIsExternal` | `public` | `boolean` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | - | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](RadialBar.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](RadialBar.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`RadialBarProps`](../type-aliases/RadialBarProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`RadialBarProps`](../type-aliases/RadialBarProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### getDeltaAngle()

> **getDeltaAngle**(): `number`

#### Returns

`number`

***

### renderSectorsStatically()

> **renderSectorsStatically**(`sectors`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors` | [`SectorProps`](../type-aliases/SectorProps.md)\[] |

#### Returns

`Element`\[]

***

### renderSectorsWithAnimation()

> **renderSectorsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderSectors()

> **renderSectors**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderBackground()

> **renderBackground**(`sectors`?): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `sectors`? | `RadialBarDataItem`\[] |

#### Returns

`Element`\[]

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/ReferenceArea.md
---
[@sqlrooms/recharts](../index.md) / ReferenceArea

# Class: ReferenceArea

## Extends

* `Component`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)>

## Constructors

### new ReferenceArea()

> **new ReferenceArea**(`props`): [`ReferenceArea`](ReferenceArea.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md) |

#### Returns

[`ReferenceArea`](ReferenceArea.md)

#### Inherited from

`React.Component<Props>.constructor`

### new ReferenceArea()

> **new ReferenceArea**(`props`, `context`): [`ReferenceArea`](ReferenceArea.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ReferenceArea`](ReferenceArea.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.r` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
|  `renderRect` | `static` | (`option`: `undefined` | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`>, `props`: `any`) => `Element` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ReferenceArea.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ReferenceArea.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceAreaProps`](../type-aliases/ReferenceAreaProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ReferenceDot.md
---
[@sqlrooms/recharts](../index.md) / ReferenceDot

# Class: ReferenceDot

## Extends

* `Component`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)>

## Constructors

### new ReferenceDot()

> **new ReferenceDot**(`props`): [`ReferenceDot`](ReferenceDot.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md) |

#### Returns

[`ReferenceDot`](ReferenceDot.md)

#### Inherited from

`React.Component<Props>.constructor`

### new ReferenceDot()

> **new ReferenceDot**(`props`, `context`): [`ReferenceDot`](ReferenceDot.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ReferenceDot`](ReferenceDot.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.r` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
|  `renderDot` | `static` | (`option`: `undefined` | `ReactElement`<`SVGElement`, `string` | `JSXElementConstructor`<`any`>> | (`props`) => `ReactElement`<`SVGElement`>, `props`: `any`) => `Element` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ReferenceDot.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ReferenceDot.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceDotProps`](../type-aliases/ReferenceDotProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ReferenceLine.md
---
[@sqlrooms/recharts](../index.md) / ReferenceLine

# Class: ReferenceLine

## Extends

* `Component`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)>

## Constructors

### new ReferenceLine()

> **new ReferenceLine**(`props`): [`ReferenceLine`](ReferenceLine.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md) |

#### Returns

[`ReferenceLine`](ReferenceLine.md)

#### Inherited from

`React.Component<Props>.constructor`

### new ReferenceLine()

> **new ReferenceLine**(`props`, `context`): [`ReferenceLine`](ReferenceLine.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ReferenceLine`](ReferenceLine.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.isFront` | `public` | `boolean` | - | - |
| `defaultProps.ifOverflow` | `public` | `string` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.fill` | `public` | `string` | - | - |
| `defaultProps.stroke` | `public` | `string` | - | - |
| `defaultProps.fillOpacity` | `public` | `number` | - | - |
| `defaultProps.strokeWidth` | `public` | `number` | - | - |
| `defaultProps.position` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ReferenceLine.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ReferenceLine.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ReferenceLineProps`](../type-aliases/ReferenceLineProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/Sankey.md
---
[@sqlrooms/recharts](../index.md) / Sankey

# Class: Sankey

## Extends

* `PureComponent`<`Props`, `State`>

## Constructors

### new Sankey()

> **new Sankey**(`props`): [`Sankey`](Sankey.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Props` |

#### Returns

[`Sankey`](Sankey.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Sankey()

> **new Sankey**(`props`, `context`): [`Sankey`](Sankey.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `Props` |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Sankey`](Sankey.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<`Props`> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.nameKey` | `public` | `string` | - | - | - |
| `defaultProps.dataKey` | `public` | `string` | - | - | - |
| `defaultProps.nodePadding` | `public` | `number` | - | - | - |
| `defaultProps.nodeWidth` | `public` | `number` | - | - | - |
| `defaultProps.linkCurvature` | `public` | `number` | - | - | - |
| `defaultProps.iterations` | `public` | `number` | - | - | - |
| `defaultProps.margin` | `public` | `object` | - | - | - |
| `defaultProps.margin.top` | `public` | `number` | - | - | - |
| `defaultProps.margin.right` | `public` | `number` | - | - | - |
| `defaultProps.margin.bottom` | `public` | `number` | - | - | - |
| `defaultProps.margin.left` | `public` | `number` | - | - | - |
| `defaultProps.sort` | `public` | `boolean` | - | - | - |
|  `state` | `public` | `object` | - | `PureComponent.state` | - |
| `state.activeElement` | `public` | `any` | - | - | - |
| `state.activeElementType` | `public` | `any` | - | - | - |
| `state.isTooltipActive` | `public` | `boolean` | - | - | - |
| `state.nodes` | `public` | `SankeyNode`\[] | - | - | - |
| `state.links` | `public` | `SankeyLink`\[] | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Sankey.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`Props`> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Sankey.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<`Props`> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<`Props`> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Props` |
| `prevState` | `State` |

#### Returns

`State`

***

### handleMouseEnter()

> **handleMouseEnter**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### handleMouseLeave()

> **handleMouseLeave**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### handleClick()

> **handleClick**(`el`, `type`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `el` | `ReactElement` |
| `type` | `string` |
| `e` | `any` |

#### Returns

`void`

***

### renderLinkItem()

> `static` **renderLinkItem**(`option`, `props`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `any` |
| `props` | `any` |

#### Returns

`any`

***

### renderLinks()

> **renderLinks**(`links`, `nodes`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `links` | `SankeyLink`\[] |
| `nodes` | `SankeyNode`\[] |

#### Returns

`Element`

***

### renderNodeItem()

> `static` **renderNodeItem**(`option`, `props`): `any`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `option` | `any` |
| `props` | `Props` |

#### Returns

`any`

***

### renderNodes()

> **renderNodes**(`nodes`): `Element`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nodes` | `SankeyNode`\[] |

#### Returns

`Element`

***

### renderTooltip()

> **renderTooltip**(): `ReactElement`

#### Returns

`ReactElement`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Scatter.md
---
[@sqlrooms/recharts](../index.md) / Scatter

# Class: Scatter

## Extends

* `PureComponent`<[`ScatterProps`](../type-aliases/ScatterProps.md), `State`>

## Constructors

### new Scatter()

> **new Scatter**(`props`): [`Scatter`](Scatter.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ScatterProps`](../type-aliases/ScatterProps.md) |

#### Returns

[`Scatter`](Scatter.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Scatter()

> **new Scatter**(`props`, `context`): [`Scatter`](Scatter.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ScatterProps`](../type-aliases/ScatterProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Scatter`](Scatter.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - | - |
| `defaultProps.zAxisId` | `public` | `number` | - | - | - |
| `defaultProps.legendType` | `public` | `string` | - | - | - |
| `defaultProps.lineType` | `public` | `string` | - | - | - |
| `defaultProps.lineJointType` | `public` | `string` | - | - | - |
| `defaultProps.data` | `public` | `any`\[] | - | - | - |
| `defaultProps.shape` | `public` | `string` | - | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `getComposedData` | `static` | (`__namedParameters`: `object`) => `object` | Compose the data of each group | - | - |
|  `state` | `public` | `State` | - | `PureComponent.state` | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |
|  `id` | `public` | `string` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Scatter.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Scatter.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ScatterProps`](../type-aliases/ScatterProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`ScatterProps`](../type-aliases/ScatterProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### renderSymbolsStatically()

> **renderSymbolsStatically**(`points`): `Element`\[]

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `points` | `ScatterPointItem`\[] |

#### Returns

`Element`\[]

***

### renderSymbolsWithAnimation()

> **renderSymbolsWithAnimation**(): `Element`

#### Returns

`Element`

***

### renderSymbols()

> **renderSymbols**(): `Element` | `Element`\[]

#### Returns

`Element` | `Element`\[]

***

### renderErrorBar()

> **renderErrorBar**(): `ReactElement`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md), `string` | `JSXElementConstructor`<`any`>>\[]

#### Returns

`ReactElement`<[`ErrorBarProps`](../type-aliases/ErrorBarProps.md), `string` | `JSXElementConstructor`<`any`>>\[]

***

### renderLine()

> **renderLine**(): `Element`

#### Returns

`Element`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Tooltip.md
---
[@sqlrooms/recharts](../index.md) / Tooltip

# Class: Tooltip\<TValue, TName>

## Extends

* `PureComponent`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>>

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Constructors

### new Tooltip()

> **new Tooltip**<`TValue`, `TName`>(`props`): [`Tooltip`](Tooltip.md)<`TValue`, `TName`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TooltipProps`](../type-aliases/TooltipProps.md) |

#### Returns

[`Tooltip`](Tooltip.md)<`TValue`, `TName`>

#### Inherited from

`PureComponent<TooltipProps<TValue, TName>>.constructor`

### new Tooltip()

> **new Tooltip**<`TValue`, `TName`>(`props`, `context`): [`Tooltip`](Tooltip.md)<`TValue`, `TName`>

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`TooltipProps`](../type-aliases/TooltipProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Tooltip`](Tooltip.md)<`TValue`, `TName`>

#### Inherited from

`PureComponent<TooltipProps<TValue, TName>>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> | - | `PureComponent.props` |
|  `state` | `public` | `Readonly`<{}> | - | `PureComponent.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.accessibilityLayer` | `public` | `boolean` | - | - |
| `defaultProps.allowEscapeViewBox` | `public` | `object` | - | - |
| `defaultProps.allowEscapeViewBox.x` | `public` | `boolean` | - | - |
| `defaultProps.allowEscapeViewBox.y` | `public` | `boolean` | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - |
| `defaultProps.contentStyle` | `public` | `object` | - | - |
| `defaultProps.coordinate` | `public` | `object` | - | - |
| `defaultProps.coordinate.x` | `public` | `number` | - | - |
| `defaultProps.coordinate.y` | `public` | `number` | - | - |
| `defaultProps.cursor` | `public` | `boolean` | - | - |
| `defaultProps.cursorStyle` | `public` | `object` | - | - |
| `defaultProps.filterNull` | `public` | `boolean` | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - |
| `defaultProps.itemStyle` | `public` | `object` | - | - |
| `defaultProps.labelStyle` | `public` | `object` | - | - |
| `defaultProps.offset` | `public` | `number` | - | - |
| `defaultProps.reverseDirection` | `public` | `object` | - | - |
| `defaultProps.reverseDirection.x` | `public` | `boolean` | - | - |
| `defaultProps.reverseDirection.y` | `public` | `boolean` | - | - |
| `defaultProps.separator` | `public` | `string` | - | - |
| `defaultProps.trigger` | `public` | `string` | - | - |
| `defaultProps.useTranslate3d` | `public` | `boolean` | - | - |
| `defaultProps.viewBox` | `public` | `object` | - | - |
| `defaultProps.viewBox.x` | `public` | `number` | - | - |
| `defaultProps.viewBox.y` | `public` | `number` | - | - |
| `defaultProps.viewBox.height` | `public` | `number` | - | - |
| `defaultProps.viewBox.width` | `public` | `number` | - | - |
| `defaultProps.wrapperStyle` | `public` | `object` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Tooltip.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Tooltip.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TooltipProps`](../type-aliases/TooltipProps.md)<`TValue`, `TName`>> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/Treemap.md
---
[@sqlrooms/recharts](../index.md) / Treemap

# Class: Treemap

## Extends

* `PureComponent`<[`TreemapProps`](../interfaces/TreemapProps.md), `State`>

## Constructors

### new Treemap()

> **new Treemap**(`props`): [`Treemap`](Treemap.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TreemapProps`](../interfaces/TreemapProps.md) |

#### Returns

[`Treemap`](Treemap.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

### new Treemap()

> **new Treemap**(`props`, `context`): [`Treemap`](Treemap.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`TreemapProps`](../interfaces/TreemapProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`Treemap`](Treemap.md)

#### Inherited from

`PureComponent<Props, State>.constructor`

## Properties

| Property | Modifier | Type | Description | Overrides | Inherited from |
| ------ | ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | - | `PureComponent.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | - | `PureComponent.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | - | `PureComponent.context` |
|  `props` | `readonly` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> | - | - | `PureComponent.props` |
|  `displayName` | `static` | `string` | - | - | - |
|  `defaultProps` | `static` | `object` | - | - | - |
| `defaultProps.aspectRatio` | `public` | `number` | - | - | - |
| `defaultProps.dataKey` | `public` | `string` | - | - | - |
| `defaultProps.type` | `public` | `string` | - | - | - |
| `defaultProps.isAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.isUpdateAnimationActive` | `public` | `boolean` | - | - | - |
| `defaultProps.animationBegin` | `public` | `number` | - | - | - |
| `defaultProps.animationDuration` | `public` | `number` | - | - | - |
| `defaultProps.animationEasing` | `public` | `string` | - | - | - |
|  `state` | `public` | `object` | - | `PureComponent.state` | - |
| `state.isTooltipActive` | `public` | `boolean` | - | - | - |
| `state.isAnimationFinished` | `public` | `boolean` | - | - | - |
| `state.activeNode?` | `public` | `TreemapNode` | - | - | - |
| `state.formatRoot?` | `public` | `TreemapNode` | - | - | - |
| `state.currentRoot?` | `public` | `TreemapNode` | - | - | - |
| `state.nestIndex?` | `public` | `TreemapNode`\[] | - | - | - |
| `state.prevData?` | `public` | `any`\[] | - | - | - |
| `state.prevType?` | `public` | `"flat"` | `"nest"` | - | - | - |
| `state.prevWidth?` | `public` | `number` | - | - | - |
| `state.prevHeight?` | `public` | `number` | - | - | - |
| `state.prevDataKey?` | `public` | `DataKey`<`any`> | - | - | - |
| `state.prevAspectRatio?` | `public` | `number` | - | - | - |
|  `handleAnimationEnd` | `public` | () => `void` | - | - | - |
|  `handleAnimationStart` | `public` | () => `void` | - | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* keyof `State` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | `State` | (`prevState`, `props`) => `null` | `State` | `Pick`<`State`, `K`> | `Pick`<`State`, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`PureComponent.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`PureComponent.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`PureComponent.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](Treemap.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `prevState` | `Readonly`<`State`> |

#### Returns

`any`

#### Inherited from

`PureComponent.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](Treemap.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `prevState` | `Readonly`<`State`> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`PureComponent.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`TreemapProps`](../interfaces/TreemapProps.md)> |
| `nextState` | `Readonly`<`State`> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`PureComponent.UNSAFE_componentWillUpdate`

***

### getDerivedStateFromProps()

> `static` **getDerivedStateFromProps**(`nextProps`, `prevState`): `State`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | [`TreemapProps`](../interfaces/TreemapProps.md) |
| `prevState` | `State` |

#### Returns

`State`

***

### handleMouseEnter()

> **handleMouseEnter**(`node`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### handleMouseLeave()

> **handleMouseLeave**(`node`, `e`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### handleClick()

> **handleClick**(`node`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |

#### Returns

`void`

***

### handleNestIndex()

> **handleNestIndex**(`node`, `i`): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `i` | `number` |

#### Returns

`void`

***

### renderItem()

> **renderItem**(`content`, `nodeProps`, `isLeaf`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `content` | `any` |
| `nodeProps` | `TreemapNode` |
| `isLeaf` | `boolean` |

#### Returns

`ReactElement`

***

### renderContentItem()

> `static` **renderContentItem**(`content`, `nodeProps`, `type`, `colorPanel`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `content` | `any` |
| `nodeProps` | `TreemapNode` |
| `type` | `string` |
| `colorPanel` | `string`\[] |

#### Returns

`ReactElement`

***

### renderNode()

> **renderNode**(`root`, `node`): `ReactElement`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `TreemapNode` |
| `node` | `TreemapNode` |

#### Returns

`ReactElement`

***

### renderAllNodes()

> **renderAllNodes**(): `ReactElement`

#### Returns

`ReactElement`

***

### renderTooltip()

> **renderTooltip**(): `ReactElement`

#### Returns

`ReactElement`

***

### renderNestIndex()

> **renderNestIndex**(): `ReactElement`

#### Returns

`ReactElement`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`PureComponent.render`

---

---
url: /api/recharts/classes/XAxis.md
---
[@sqlrooms/recharts](../index.md) / XAxis

# Class: XAxis

## Extends

* `Component`<[`XAxisProps`](../type-aliases/XAxisProps.md)>

## Constructors

### new XAxis()

> **new XAxis**(`props`): [`XAxis`](XAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`XAxisProps`](../type-aliases/XAxisProps.md) |

#### Returns

[`XAxis`](XAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

### new XAxis()

> **new XAxis**(`props`, `context`): [`XAxis`](XAxis.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`XAxisProps`](../type-aliases/XAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`XAxis`](XAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.allowDecimals` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.xAxisId` | `public` | `number` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.left` | `public` | `number` | - | - |
| `defaultProps.padding.right` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.reversed` | `public` | `boolean` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](XAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](XAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`XAxisProps`](../type-aliases/XAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/YAxis.md
---
[@sqlrooms/recharts](../index.md) / YAxis

# Class: YAxis

## Extends

* `Component`<[`YAxisProps`](../type-aliases/YAxisProps.md)>

## Constructors

### new YAxis()

> **new YAxis**(`props`): [`YAxis`](YAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`YAxisProps`](../type-aliases/YAxisProps.md) |

#### Returns

[`YAxis`](YAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

### new YAxis()

> **new YAxis**(`props`, `context`): [`YAxis`](YAxis.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`YAxisProps`](../type-aliases/YAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`YAxis`](YAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.allowDuplicatedCategory` | `public` | `boolean` | - | - |
| `defaultProps.allowDecimals` | `public` | `boolean` | - | - |
| `defaultProps.hide` | `public` | `boolean` | - | - |
| `defaultProps.orientation` | `public` | `string` | - | - |
| `defaultProps.width` | `public` | `number` | - | - |
| `defaultProps.height` | `public` | `number` | - | - |
| `defaultProps.mirror` | `public` | `boolean` | - | - |
| `defaultProps.yAxisId` | `public` | `number` | - | - |
| `defaultProps.tickCount` | `public` | `number` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |
| `defaultProps.padding` | `public` | `object` | - | - |
| `defaultProps.padding.top` | `public` | `number` | - | - |
| `defaultProps.padding.bottom` | `public` | `number` | - | - |
| `defaultProps.allowDataOverflow` | `public` | `boolean` | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.reversed` | `public` | `boolean` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](YAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](YAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`YAxisProps`](../type-aliases/YAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `Element`

#### Returns

`Element`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/classes/ZAxis.md
---
[@sqlrooms/recharts](../index.md) / ZAxis

# Class: ZAxis

## Extends

* `Component`<[`ZAxisProps`](../interfaces/ZAxisProps.md)>

## Constructors

### new ZAxis()

> **new ZAxis**(`props`): [`ZAxis`](ZAxis.md)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ZAxisProps`](../interfaces/ZAxisProps.md) |

#### Returns

[`ZAxis`](ZAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

### new ZAxis()

> **new ZAxis**(`props`, `context`): [`ZAxis`](ZAxis.md)

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`ZAxisProps`](../interfaces/ZAxisProps.md) |  |
| `context` | `any` | value of the parent [Context](https://react.dev/reference/react/Component#context) specified in `contextType`. |

#### Returns

[`ZAxis`](ZAxis.md)

#### Inherited from

`React.Component<Props>.constructor`

## Properties

| Property | Modifier | Type | Description | Inherited from |
| ------ | ------ | ------ | ------ | ------ |
|  `contextType?` | `static` | `Context`<`any`> | If set, `this.context` will be set at runtime to the current value of the given Context. **Example** `type MyContext = number const Ctx = React.createContext<MyContext>(0) class Foo extends React.Component { static contextType = Ctx context!: React.ContextType<typeof Ctx> render () { return <>My context's value: {this.context}</>; } }` **See** <https://react.dev/reference/react/Component#static-contexttype> | `React.Component.contextType` |
|  ~~`propTypes?`~~ | `static` | `any` | Ignored by React. **Deprecated** Only kept in types for backwards compatibility. Will be removed in a future major release. | `React.Component.propTypes` |
|  `context` | `public` | `unknown` | If using React Context, re-declare this in your class to be the `React.ContextType` of your `static contextType`. Should be used with type annotation or static contextType. **Example** `static contextType = MyContext // For TS pre-3.7: context!: React.ContextType<typeof MyContext> // For TS 3.7 and above: declare context: React.ContextType<typeof MyContext>` **See** [React Docs](https://react.dev/reference/react/Component#context) | `React.Component.context` |
|  `props` | `readonly` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> | - | `React.Component.props` |
|  `state` | `public` | `Readonly`<{}> | - | `React.Component.state` |
|  `displayName` | `static` | `string` | - | - |
|  `defaultProps` | `static` | `object` | - | - |
| `defaultProps.zAxisId` | `public` | `number` | - | - |
| `defaultProps.range` | `public` | `number`\[] | - | - |
| `defaultProps.scale` | `public` | `string` | - | - |
| `defaultProps.type` | `public` | `string` | - | - |

## Methods

### setState()

> **setState**<`K`>(`state`, `callback`?): `void`

#### Type Parameters

| Type Parameter |
| ------ |
| `K` *extends* `never` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `null` | {} | (`prevState`, `props`) => `null` | {} | `Pick`<{}, `K`> | `Pick`<{}, `K`> |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.setState`

***

### forceUpdate()

> **forceUpdate**(`callback`?): `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `callback`? | () => `void` |

#### Returns

`void`

#### Inherited from

`React.Component.forceUpdate`

***

### componentDidMount()?

> `optional` **componentDidMount**(): `void`

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

#### Returns

`void`

#### Inherited from

`React.Component.componentDidMount`

***

### shouldComponentUpdate()?

> `optional` **shouldComponentUpdate**(`nextProps`, `nextState`, `nextContext`): `boolean`

Called to determine whether the change in props and state should trigger a re-render.

`Component` always returns true.
`PureComponent` implements a shallow comparison on props and state and returns true if any
props or states have changed.

If false is returned, Component.render, `componentWillUpdate`
and `componentDidUpdate` will not be called.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`boolean`

#### Inherited from

`React.Component.shouldComponentUpdate`

***

### componentWillUnmount()?

> `optional` **componentWillUnmount**(): `void`

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.

#### Returns

`void`

#### Inherited from

`React.Component.componentWillUnmount`

***

### componentDidCatch()?

> `optional` **componentDidCatch**(`error`, `errorInfo`): `void`

Catches exceptions generated in descendant components. Unhandled exceptions will cause
the entire component tree to unmount.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `error` | `Error` |
| `errorInfo` | `ErrorInfo` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidCatch`

***

### getSnapshotBeforeUpdate()?

> `optional` **getSnapshotBeforeUpdate**(`prevProps`, `prevState`): `any`

Runs before React applies the result of Component.render render to the document, and
returns an object to be given to [componentDidUpdate](ZAxis.md#componentdidupdate). Useful for saving
things such as scroll position before Component.render render causes changes to it.

Note: the presence of this method prevents any of the deprecated
lifecycle events from running.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `prevState` | `Readonly`<{}> |

#### Returns

`any`

#### Inherited from

`React.Component.getSnapshotBeforeUpdate`

***

### componentDidUpdate()?

> `optional` **componentDidUpdate**(`prevProps`, `prevState`, `snapshot`?): `void`

Called immediately after updating occurs. Not called for the initial render.

The snapshot is only present if [getSnapshotBeforeUpdate](ZAxis.md#getsnapshotbeforeupdate) is present and returns non-null.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `prevProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `prevState` | `Readonly`<{}> |
| `snapshot`? | `any` |

#### Returns

`void`

#### Inherited from

`React.Component.componentDidUpdate`

***

### ~~componentWillMount()?~~

> `optional` **componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillMount`

***

### ~~UNSAFE\_componentWillMount()?~~

> `optional` **UNSAFE\_componentWillMount**(): `void`

Called immediately before mounting occurs, and before Component.render.
Avoid introducing any side-effects or subscriptions in this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Returns

`void`

#### Deprecated

16.3, use ComponentLifecycle.componentDidMount componentDidMount or the constructor instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillMount`

***

### ~~componentWillReceiveProps()?~~

> `optional` **componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillReceiveProps`

***

### ~~UNSAFE\_componentWillReceiveProps()?~~

> `optional` **UNSAFE\_componentWillReceiveProps**(`nextProps`, `nextContext`): `void`

Called when the component may be receiving new props.
React may call this even if props have not changed, so be sure to compare new and existing
props if you only want to handle changes.

Calling Component.setState generally does not trigger this method.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use static StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillReceiveProps`

***

### ~~componentWillUpdate()?~~

> `optional` **componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.componentWillUpdate`

***

### ~~UNSAFE\_componentWillUpdate()?~~

> `optional` **UNSAFE\_componentWillUpdate**(`nextProps`, `nextState`, `nextContext`): `void`

Called immediately before rendering when new props or state is received. Not called for the initial render.

Note: You cannot call Component.setState here.

This method will not stop working in React 17.

Note: the presence of NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate
or StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps prevents
this from being invoked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `nextProps` | `Readonly`<[`ZAxisProps`](../interfaces/ZAxisProps.md)> |
| `nextState` | `Readonly`<{}> |
| `nextContext` | `any` |

#### Returns

`void`

#### Deprecated

16.3, use getSnapshotBeforeUpdate instead

#### See

* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update>
* <https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path>

#### Inherited from

`React.Component.UNSAFE_componentWillUpdate`

***

### render()

> **render**(): `ReactNode`

#### Returns

`ReactNode`

#### Overrides

`React.Component.render`

---

---
url: /api/recharts/namespaces/Customized.md
---
[@sqlrooms/recharts](../../index.md) / Customized

# Customized

## Variables

* [displayName](variables/displayName.md)

---

---
url: /llms.md
---
# Docs for LLMs

This page provides access to machine-readable documentation files for Large Language Models and AI assistants supporting the [llms.txt convention](https://llmstxt.org/).

## [/llms.txt](/llms.txt)

A concise version of the SQLRooms documentation that includes links to additional resources.

```
https://sqlrooms.org/llms.txt
```

## [/llms-full.txt](/llms-full.txt)

A comprehensive version containing the complete SQLRooms documentation and API reference concatenated into a single file.

```
https://sqlrooms.org/llms-full.txt
```

## Package-level documentation

### [`@sqlrooms/ai`](https://sqlrooms.org/api/ai.md)

```
https://sqlrooms.org/api/ai.md
```

### [`@sqlrooms/duckdb`](https://sqlrooms.org/api/duckdb.md)

```
https://sqlrooms.org/api/duckdb.md
```

### [`@sqlrooms/room-shell`](https://sqlrooms.org/api/room-shell.md)

```
https://sqlrooms.org/api/room-shell.md
```

### [`@sqlrooms/ui`](https://sqlrooms.org/api/ui.md)

```
https://sqlrooms.org/api/ui.md
```

### [`@sqlrooms/sql-editor`](https://sqlrooms.org/api/sql-editor.md)

```
https://sqlrooms.org/api/sql-editor.md
```

### [`@sqlrooms/schema-tree`](https://sqlrooms.org/api/schema-tree.md)

```
https://sqlrooms.org/api/schema-tree.md
```

and so on for all the other packages…

---

---
url: /api/room-shell/enumerations/DataSourceStatus.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceStatus

# Enumeration: DataSourceStatus

## Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `PENDING` | `"PENDING"` |
|  `FETCHING` | `"FETCHING"` |
|  `READY` | `"READY"` |
|  `ERROR` | `"ERROR"` |

---

---
url: /api/duckdb/enumerations/DuckDBAccessMode.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBAccessMode

# Enumeration: DuckDBAccessMode

## Enumeration Members

| Enumeration Member | Value |
| ------ | ------ |
|  `UNDEFINED` | `0` |
|  `AUTOMATIC` | `1` |
|  `READ_ONLY` | `2` |
|  `READ_WRITE` | `3` |

---

---
url: /examples.md
---

# Example Applications

All example applications are available in our [Examples Repository](https://github.com/sqlrooms/examples). Here's a list of examples:

## [SQL Query Editor](https://query.sqlrooms.org/)

[Try live](https://query.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/query)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/query?embed=1)

A comprehensive SQL query editor demonstrating SQLRooms' DuckDB integration. Features include:

* Interactive SQL editor with syntax highlighting
* File dropzone for adding data tables to DuckDB
* Schema tree for browsing database tables and columns
* Tabbed interface for working with multiple queries
* Query execution with results data table
* Support for query cancellation
* There is a [version of the example with offline functionality](https://github.com/sqlrooms/examples/tree/main/query-pwa) which supports Progressive Web App (PWA) features, persistent database storage with OPFS, and state persistence via local storage

To create a new project from the query example run this:

```bash
npx degit sqlrooms/examples/query my-new-app/
```

## [AI-Powered Analytics](https://sqlrooms-ai.netlify.app/)

[Try live](https://sqlrooms-ai.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/ai)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/ai?embed=1\&file=components/app-shell.tsx)

An advanced example showing how to build an AI-powered analytics application with SQLRooms. Features include:

* Natural language data exploration
* AI-driven data analysis
* Integration with [Vercel AI SDK](https://sdk.vercel.ai/docs/introduction)
* Custom visualization components
* Room state persistence

To create a new project from the AI example run this:

```bash
npx degit sqlrooms/examples/ai my-new-app/
```

## [Deck.gl + Commenting & Annotation](https://sqlrooms-deckgl-discuss.netlify.app/)

[Try live](https://sqlrooms-deckgl-discuss.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/deckgl-discuss)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/deckgl-discuss?embed=1\&file=src/app.tsx)

An example showcasing integration with [deck.gl](https://deck.gl/) for geospatial data visualization combined with the [@sqlrooms/discuss](/api/discuss) module for collaborative features. Features include:

* High-performance WebGL-based geospatial visualizations
* Real-time commenting and annotation system
* Contextual discussions tied to specific data points

To create a new project from the deckgl-discuss example run this:

```bash
npx degit sqlrooms/examples/deckgl-discuss my-new-app/
```

## [Next.js + Recharts Example](https://sqlrooms-nextjs.netlify.app/)

[Try live](https://sqlrooms-nextjs.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/nextjs)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/nextjs?embed=1)

A minimalistic [Next.js](https://nextjs.org/) app example featuring:

* [Recharts module](/api/recharts) for data visualization
* [Tailwind 4](https://tailwindcss.com/blog/tailwindcss-v4) for styling (experimental)

To create a new project from the Next.js example run this:

```bash
npx degit sqlrooms/examples/nextjs my-new-app/
```

## [Cosmos – Graph Visualization](http://sqlrooms-cosmos.netlify.app/)

[Try live](http://sqlrooms-cosmos.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/cosmos)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos?embed=1\&file=src/app.tsx)

An example demonstrating integration with the [Cosmos](https://github.com/cosmograph-org/cosmos) GPU-accelerated graph visualization library. Features include:

* WebGL-based force-directed layout computation
* High-performance rendering of large networks
* Real-time interaction and filtering capabilities
* Customizable visual attributes and physics parameters
* Event handling for node/edge interactions

To create a new project from the cosmos example run this:

```bash
npx degit sqlrooms/examples/cosmos my-new-app/
```

## [Cosmos – 2D Embedding Visualization](http://sqlrooms-cosmos-embedding.netlify.app/)

[Try live](http://sqlrooms-cosmos-embedding.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/cosmos-embedding)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/cosmos-embedding?embed=1\&file=src/app.tsx)

An example showcasing integration with Cosmos for visualizing high-dimensional data in 2D space. Features include:

* WebGL-powered rendering of 2D embeddings
* GPU-accelerated positioning and transitions
* Dynamic mapping of data attributes to visual properties
* Efficient handling of large-scale embedding datasets
* Interactive exploration with pan, zoom, and filtering

To create a new project from the cosmos-embedding example run this:

```bash
npx degit sqlrooms/examples/cosmos-embedding my-new-app/
```

## [Mosaic Example](https://sqlrooms-mosaic.netlify.app/)

[Try live](https://sqlrooms-mosaic.netlify.app/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/mosaic)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/mosaic?embed=1\&file=src/app.tsx)

An example demonstrating integration with [Mosaic](https://idl.uw.edu/mosaic/), a powerful interactive visualization framework utilizing DuckDB and high-performance cross-filtering.

Features include:

* Complete project setup using Vite and TypeScript
* Comprehensive data source management and configuration
* Seamless integration with Mosaic for interactive visualizations
* Real-time cross-filtering capabilities across multiple views
* Example dashboards with common visualization types

To create a new project from the mosaic example run this:

```bash
npx degit sqlrooms/examples/mosaic my-new-app/
```

## [MotherDuck Cloud Query Editor](https://motherduck.sqlrooms.org/)

[Try live](https://motherduck.sqlrooms.org/)
| [Github repo](https://github.com/sqlrooms/examples/tree/main/query-motherduck)
| [Open in StackBlitz](https://stackblitz.com/github/sqlrooms/examples/tree/main/query-motherduck?embed=1)

A browser-based SQL query editor that connects directly to MotherDuck's cloud-hosted DuckDB using the WASM connector. Features include:

* Example of using the `WasmMotherDuckDbConnector` from [`@sqlrooms/motherduck`](api/motherduck)
* Connect to MotherDuck from the browser using DuckDB WASM
* Run SQL queries against local and cloud datasets
* Attach and query [DuckLake data lake and catalog](https://motherduck.com/docs/integrations/file-formats/ducklake/)

To create a new project from the query-motherduck example run this:

```bash
npx degit sqlrooms/examples/query-motherduck my-new-app/
```

## Looking for More?

Make sure to check out our [Case Studies](/case-studies) page for real-world applications and success stories using SQLRooms.

---

---
url: /api/data-table/functions/DataTableVirtualized.md
---
[@sqlrooms/data-table](../index.md) / DataTableVirtualized

# Function: ~~DataTableVirtualized()~~

> **DataTableVirtualized**<`Data`>(`props`): `null` | `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DataTableVirtualizedProps`<`Data`> |

## Returns

`null` | `Element`

## Deprecated

Use `DataTablePaginated` instead.

---

---
url: /api/duckdb/functions/useDuckDbQuery.md
---
[@sqlrooms/duckdb](../index.md) / useDuckDbQuery

# Function: ~~useDuckDbQuery()~~

## Deprecated

Use useSql instead

## Call Signature

> **useDuckDbQuery**<`Row`>(`options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Row` | The TypeScript type for each row in the result |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `query`: `string`; `enabled`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled`? | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

Object containing the validated query result, loading state, and any error

| Name | Type |
| ------ | ------ |
|  `data` | `undefined` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`Row`> |
|  `error` | `null` | `Error` |
|  `isLoading` | `boolean` |

### Deprecated

Use useSql instead

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

## Call Signature

> **useDuckDbQuery**<`Schema`>(`zodSchema`, `options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Schema` *extends* `ZodType`<`any`, `ZodTypeDef`, `any`> | The Zod schema type that defines the shape and validation of each row |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `zodSchema` | `Schema` | A Zod schema that defines the expected shape and validation rules for each row |
| `options` | { `query`: `string`; `enabled`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled`? | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

Object containing the validated query result, loading state, and any error

| Name | Type |
| ------ | ------ |
|  `data` | `undefined` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`TypeOf`<`Schema`>> |
|  `error` | `null` | `Error` |
|  `isLoading` | `boolean` |

### Deprecated

Use useSql instead

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

---

---
url: /api/ui/functions/Accordion.md
---
[@sqlrooms/ui](../index.md) / Accordion

# Function: Accordion()

> **Accordion**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AccordionSingleProps` | `AccordionMultipleProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/AccordionContent.md
---
[@sqlrooms/ui](../index.md) / AccordionContent

# Function: AccordionContent()

> **AccordionContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`AccordionContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/AccordionItem.md
---
[@sqlrooms/ui](../index.md) / AccordionItem

# Function: AccordionItem()

> **AccordionItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`AccordionItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/AccordionTrigger.md
---
[@sqlrooms/ui](../index.md) / AccordionTrigger

# Function: AccordionTrigger()

> **AccordionTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`AccordionTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ai-settings/functions/AiModelParameters.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelParameters

# Function: AiModelParameters()

> **AiModelParameters**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | {} |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AiModelParameters.md
---
[@sqlrooms/ai](../index.md) / AiModelParameters

# Function: AiModelParameters()

> **AiModelParameters**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | {} |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai-settings/functions/AiModelsSettings.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelsSettings

# Function: AiModelsSettings()

> **AiModelsSettings**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AiModelsSettingsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AiModelsSettings.md
---
[@sqlrooms/ai](../index.md) / AiModelsSettings

# Function: AiModelsSettings()

> **AiModelsSettings**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AiModelsSettingsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai-settings/functions/AiModelUsage.md
---
[@sqlrooms/ai-settings](../index.md) / AiModelUsage

# Function: AiModelUsage()

> **AiModelUsage**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AiModelUsageProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AiModelUsage.md
---
[@sqlrooms/ai](../index.md) / AiModelUsage

# Function: AiModelUsage()

> **AiModelUsage**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AiModelUsageProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai-settings/functions/AiProvidersSettings.md
---
[@sqlrooms/ai-settings](../index.md) / AiProvidersSettings

# Function: AiProvidersSettings()

> **AiProvidersSettings**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | {} |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AiProvidersSettings.md
---
[@sqlrooms/ai](../index.md) / AiProvidersSettings

# Function: AiProvidersSettings()

> **AiProvidersSettings**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | {} |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai-settings/functions/AiSettingsPanel.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsPanel

# Function: AiSettingsPanel()

> **AiSettingsPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AiSettingsPanel.md
---
[@sqlrooms/ai](../index.md) / AiSettingsPanel

# Function: AiSettingsPanel()

> **AiSettingsPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Alert.md
---
[@sqlrooms/ui](../index.md) / Alert

# Function: Alert()

> **Alert**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `VariantProps`<(`props`?) => `string`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/AlertDescription.md
---
[@sqlrooms/ui](../index.md) / AlertDescription

# Function: AlertDescription()

> **AlertDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/AlertTitle.md
---
[@sqlrooms/ui](../index.md) / AlertTitle

# Function: AlertTitle()

> **AlertTitle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLHeadingElement`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/ai-core/functions/AnalysisResult.md
---
[@sqlrooms/ai-core](../index.md) / AnalysisResult

# Function: AnalysisResult()

> **AnalysisResult**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays the results of an AI analysis.
Shows the original prompt, intermediate tool calls, final analysis text,
and any tool results.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `AnalysisResultProps` | Component props |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

A React component displaying the analysis results

## Component

---

---
url: /api/ai/functions/AnalysisResult.md
---
[@sqlrooms/ai](../index.md) / AnalysisResult

# Function: AnalysisResult()

> **AnalysisResult**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays the results of an AI analysis.
Shows the original prompt, intermediate tool calls, final analysis text,
and any tool results.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `AnalysisResultProps` | Component props |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

A React component displaying the analysis results

## Component

---

---
url: /api/ai-core/functions/AnalysisResultsContainer.md
---
[@sqlrooms/ai-core](../index.md) / AnalysisResultsContainer

# Function: AnalysisResultsContainer()

> **AnalysisResultsContainer**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/AnalysisResultsContainer.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultsContainer

# Function: AnalysisResultsContainer()

> **AnalysisResultsContainer**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/functions/AreaChart.md
---
[@sqlrooms/recharts](../index.md) / AreaChart

# Function: AreaChart()

> **AreaChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/duckdb/functions/arrowTableToJson.md
---
[@sqlrooms/duckdb](../index.md) / arrowTableToJson

# Function: arrowTableToJson()

> **arrowTableToJson**(`table`): `Record`<`string`, `unknown`>\[]

Converts an Arrow table to a JSON-compatible array of objects

## Parameters

| Parameter | Type |
| ------ | ------ |
| `table` | `Table` |

## Returns

`Record`<`string`, `unknown`>\[]

## See

* https://duckdb.org/docs/api/wasm/query.html#arrow-table-to-json
* https://github.com/apache/arrow/issues/37856

---

---
url: /api/ui/functions/AspectRatio.md
---
[@sqlrooms/ui](../index.md) / AspectRatio

# Function: AspectRatio()

> **AspectRatio**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `AspectRatioProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Badge.md
---
[@sqlrooms/ui](../index.md) / Badge

# Function: Badge()

> **Badge**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`BadgeProps`](../interfaces/BadgeProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/badgeVariants.md
---
[@sqlrooms/ui](../index.md) / badgeVariants

# Function: badgeVariants()

> **badgeVariants**(`props`?): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | ConfigVariants<{ variant: { default: string; secondary: string; destructive: string; outline: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/recharts/functions/BarChart.md
---
[@sqlrooms/recharts](../index.md) / BarChart

# Function: BarChart()

> **BarChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/schema-tree/functions/BaseTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / BaseTreeNode

# Function: BaseTreeNode()

> **BaseTreeNode**<`T`>(`props`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren`<{ `className`: `string`; `nodeObject`: `T`; `asChild`: `boolean`; }> |

## Returns

`Element`

---

---
url: /api/ui/functions/Breadcrumb.md
---
[@sqlrooms/ui](../index.md) / Breadcrumb

# Function: Breadcrumb()

> **Breadcrumb**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLElement`>, `HTMLElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/BreadcrumbEllipsis.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbEllipsis

# Function: BreadcrumbEllipsis()

> **BreadcrumbEllipsis**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/BreadcrumbItem.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbItem

# Function: BreadcrumbItem()

> **BreadcrumbItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>, `HTMLLIElement`>, `"ref"`> & `RefAttributes`<`HTMLLIElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/BreadcrumbLink.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbLink

# Function: BreadcrumbLink()

> **BreadcrumbLink**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`AnchorHTMLAttributes`<`HTMLAnchorElement`>, `HTMLAnchorElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLAnchorElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/BreadcrumbList.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbList

# Function: BreadcrumbList()

> **BreadcrumbList**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`OlHTMLAttributes`<`HTMLOListElement`>, `HTMLOListElement`>, `"ref"`> & `RefAttributes`<`HTMLOListElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/BreadcrumbPage.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbPage

# Function: BreadcrumbPage()

> **BreadcrumbPage**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>, `HTMLSpanElement`>, `"ref"`> & `RefAttributes`<`HTMLSpanElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/BreadcrumbSeparator.md
---
[@sqlrooms/ui](../index.md) / BreadcrumbSeparator

# Function: BreadcrumbSeparator()

> **BreadcrumbSeparator**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/Button.md
---
[@sqlrooms/ui](../index.md) / Button

# Function: Button()

> **Button**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ButtonProps`](../interfaces/ButtonProps.md) & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/buttonVariants.md
---
[@sqlrooms/ui](../index.md) / buttonVariants

# Function: buttonVariants()

> **buttonVariants**(`props`?): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | ConfigVariants<{ variant: { default: string; destructive: string; outline: string; secondary: string; ghost: string; link: string; }; size: { default: string; sm: string; lg: string; icon: string; xs: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/ui/functions/Calendar.md
---
[@sqlrooms/ui](../index.md) / Calendar

# Function: Calendar()

> **Calendar**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DayPickerDefaultProps` | `DayPickerSingleProps` | `DayPickerMultipleProps` | `DayPickerRangeProps` |

## Returns

`Element`

---

---
url: /api/utils/functions/camelCaseToTitle.md
---
[@sqlrooms/utils](../index.md) / camelCaseToTitle

# Function: camelCaseToTitle()

> **camelCaseToTitle**(`camelCase`): `string`

Converts a camelCase string into a Title Case string.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `camelCase` | `string` | The camelCase string to convert |

## Returns

`string`

A Title Case string with spaces between words

## Example

```ts
camelCaseToTitle("myVariableName") // returns "My Variable Name"
camelCaseToTitle("URL") // returns "URL"
```

---

---
url: /api/canvas/functions/Canvas.md
---
[@sqlrooms/canvas](../index.md) / Canvas

# Function: Canvas()

> **Canvas**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | {} |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/utils/functions/capitalize.md
---
[@sqlrooms/utils](../index.md) / capitalize

# Function: capitalize()

> **capitalize**(`str`): `string`

Capitalizes the first letter of string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to capitalize |

## Returns

`string`

A new string with the first letter capitalized

## Example

```ts
capitalize("hello world") // returns "Hello world"
```

---

---
url: /api/ui/functions/Card.md
---
[@sqlrooms/ui](../index.md) / Card

# Function: Card()

> **Card**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CardContent.md
---
[@sqlrooms/ui](../index.md) / CardContent

# Function: CardContent()

> **CardContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CardDescription.md
---
[@sqlrooms/ui](../index.md) / CardDescription

# Function: CardDescription()

> **CardDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CardFooter.md
---
[@sqlrooms/ui](../index.md) / CardFooter

# Function: CardFooter()

> **CardFooter**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CardHeader.md
---
[@sqlrooms/ui](../index.md) / CardHeader

# Function: CardHeader()

> **CardHeader**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CardTitle.md
---
[@sqlrooms/ui](../index.md) / CardTitle

# Function: CardTitle()

> **CardTitle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/CartesianGrid.md
---
[@sqlrooms/recharts](../index.md) / CartesianGrid

# Function: CartesianGrid()

> **CartesianGrid**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CartesianGridProps`](../type-aliases/CartesianGridProps.md) |

## Returns

`Element`

---

---
url: /api/recharts/functions/Cell.md
---
[@sqlrooms/recharts](../index.md) / Cell

# Function: Cell()

> **Cell**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CellProps`](../type-aliases/CellProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/functions/ChartContainer.md
---
[@sqlrooms/recharts](../index.md) / ChartContainer

# Function: ChartContainer()

> **ChartContainer**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/ChartLegendContent.md
---
[@sqlrooms/recharts](../index.md) / ChartLegendContent

# Function: ChartLegendContent()

> **ChartLegendContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `Pick`<[`LegendProps`](../type-aliases/LegendProps.md), `"payload"` | `"verticalAlign"`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/ChartStyle.md
---
[@sqlrooms/recharts](../index.md) / ChartStyle

# Function: ChartStyle()

> **ChartStyle**(`__namedParameters`): `null` | `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `id`: `string`; `config`: [`ChartConfig`](../type-aliases/ChartConfig.md); } |
| `__namedParameters.id` | `string` |
| `__namedParameters.config` | [`ChartConfig`](../type-aliases/ChartConfig.md) |

## Returns

`null` | `Element`

---

---
url: /api/recharts/functions/ChartTooltipContent.md
---
[@sqlrooms/recharts](../index.md) / ChartTooltipContent

# Function: ChartTooltipContent()

> **ChartTooltipContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<[`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`ValueType`, `NameType`> & `object` & `ClassAttributes`<`HTMLDivElement`> & `HTMLAttributes`<`HTMLDivElement`> & `object`, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Checkbox.md
---
[@sqlrooms/ui](../index.md) / Checkbox

# Function: Checkbox()

> **Checkbox**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`CheckboxProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/cn.md
---
[@sqlrooms/ui](../index.md) / cn

# Function: cn()

> **cn**(...`inputs`): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| ...`inputs` | `ClassValue`\[] |

## Returns

`string`

---

---
url: /api/ui/functions/Collapsible.md
---
[@sqlrooms/ui](../index.md) / Collapsible

# Function: Collapsible()

> **Collapsible**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CollapsibleProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CollapsibleContent.md
---
[@sqlrooms/ui](../index.md) / CollapsibleContent

# Function: CollapsibleContent()

> **CollapsibleContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CollapsibleContentProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CollapsibleTrigger.md
---
[@sqlrooms/ui](../index.md) / CollapsibleTrigger

# Function: CollapsibleTrigger()

> **CollapsibleTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CollapsibleTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/schema-tree/functions/ColumnTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / ColumnTreeNode

# Function: ColumnTreeNode()

> **ColumnTreeNode**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `nodeObject`: `ColumnNodeObject`; `additionalMenuItems`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.nodeObject` | `ColumnNodeObject` |
| `props.additionalMenuItems`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/data-table/functions/ColumnTypeBadge.md
---
[@sqlrooms/data-table](../index.md) / ColumnTypeBadge

# Function: ColumnTypeBadge()

> **ColumnTypeBadge**(`props`): `ReactNode` | `Promise`<`ReactNode`>

∏
A badge that displays the type of a database table column.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `columnType`: `unknown`; `typeCategory`: `ColumnTypeCategory`; } |
| `props.className`? | `string` |
| `props.columnType` | `unknown` |
| `props.typeCategory`? | `ColumnTypeCategory` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ComboboxDemo.md
---
[@sqlrooms/ui](../index.md) / ComboboxDemo

# Function: ComboboxDemo()

> **ComboboxDemo**(): `Element`

## Returns

`Element`

---

---
url: /api/ui/functions/Command.md
---
[@sqlrooms/ui](../index.md) / Command

# Function: Command()

> **Command**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandDialog.md
---
[@sqlrooms/ui](../index.md) / CommandDialog

# Function: CommandDialog()

> **CommandDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/CommandEmpty.md
---
[@sqlrooms/ui](../index.md) / CommandEmpty

# Function: CommandEmpty()

> **CommandEmpty**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandGroup.md
---
[@sqlrooms/ui](../index.md) / CommandGroup

# Function: CommandGroup()

> **CommandGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Children` & `Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`>, `"heading"` | `"value"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandInput.md
---
[@sqlrooms/ui](../index.md) / CommandInput

# Function: CommandInput()

> **CommandInput**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`InputHTMLAttributes`<`HTMLInputElement`>, `HTMLInputElement`>, `"key"` | keyof InputHTMLAttributes\<HTMLInputElement>> & `object` & `object`, `"key"` | `"asChild"` | keyof InputHTMLAttributes\<HTMLInputElement>>, `"onChange"` | `"value"` | `"type"`> & `object` & `RefAttributes`<`HTMLInputElement`>, `"ref"`> & `RefAttributes`<`HTMLInputElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandItem.md
---
[@sqlrooms/ui](../index.md) / CommandItem

# Function: CommandItem()

> **CommandItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Children` & `Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`>, `"onSelect"` | `"disabled"` | `"value"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandList.md
---
[@sqlrooms/ui](../index.md) / CommandList

# Function: CommandList()

> **CommandList**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Children` & `Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandSeparator.md
---
[@sqlrooms/ui](../index.md) / CommandSeparator

# Function: CommandSeparator()

> **CommandSeparator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Pick`<`Pick`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"key"` | keyof HTMLAttributes\<HTMLDivElement>> & `object` & `object`, `"key"` | keyof HTMLAttributes\<HTMLDivElement> | `"asChild"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/CommandShortcut.md
---
[@sqlrooms/ui](../index.md) / CommandShortcut

# Function: CommandShortcut()

> **CommandShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/discuss/functions/CommentItem.md
---
[@sqlrooms/discuss](../index.md) / CommentItem

# Function: CommentItem()

> **CommentItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`CommentItemProps`, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/ComposedChart.md
---
[@sqlrooms/recharts](../index.md) / ComposedChart

# Function: ComposedChart()

> **ComposedChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/monaco-editor/functions/configureMonacoLoader.md
---
[@sqlrooms/monaco-editor](../index.md) / configureMonacoLoader

# Function: configureMonacoLoader()

> **configureMonacoLoader**(`options`): `void`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`MonacoLoaderOptions`](../interfaces/MonacoLoaderOptions.md) |

## Returns

`void`

---

---
url: /api/ui/functions/ContextMenu.md
---
[@sqlrooms/ui](../index.md) / ContextMenu

# Function: ContextMenu()

> **ContextMenu**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ContextMenuCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuCheckboxItem

# Function: ContextMenuCheckboxItem()

> **ContextMenuCheckboxItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuContent.md
---
[@sqlrooms/ui](../index.md) / ContextMenuContent

# Function: ContextMenuContent()

> **ContextMenuContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuGroup.md
---
[@sqlrooms/ui](../index.md) / ContextMenuGroup

# Function: ContextMenuGroup()

> **ContextMenuGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuItem

# Function: ContextMenuItem()

> **ContextMenuItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuLabel.md
---
[@sqlrooms/ui](../index.md) / ContextMenuLabel

# Function: ContextMenuLabel()

> **ContextMenuLabel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuPortal.md
---
[@sqlrooms/ui](../index.md) / ContextMenuPortal

# Function: ContextMenuPortal()

> **ContextMenuPortal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuPortalProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ContextMenuRadioGroup.md
---
[@sqlrooms/ui](../index.md) / ContextMenuRadioGroup

# Function: ContextMenuRadioGroup()

> **ContextMenuRadioGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuRadioGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuRadioItem.md
---
[@sqlrooms/ui](../index.md) / ContextMenuRadioItem

# Function: ContextMenuRadioItem()

> **ContextMenuRadioItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuSeparator.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSeparator

# Function: ContextMenuSeparator()

> **ContextMenuSeparator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuShortcut.md
---
[@sqlrooms/ui](../index.md) / ContextMenuShortcut

# Function: ContextMenuShortcut()

> **ContextMenuShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/ContextMenuSub.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSub

# Function: ContextMenuSub()

> **ContextMenuSub**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuSubProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ContextMenuSubContent.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSubContent

# Function: ContextMenuSubContent()

> **ContextMenuSubContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuSubTrigger.md
---
[@sqlrooms/ui](../index.md) / ContextMenuSubTrigger

# Function: ContextMenuSubTrigger()

> **ContextMenuSubTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ContextMenuSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ContextMenuTrigger.md
---
[@sqlrooms/ui](../index.md) / ContextMenuTrigger

# Function: ContextMenuTrigger()

> **ContextMenuTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ContextMenuTriggerProps` & `RefAttributes`<`HTMLSpanElement`> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/convertToUniqueColumnOrTableName.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueColumnOrTableName

# Function: convertToUniqueColumnOrTableName()

> **convertToUniqueColumnOrTableName**(`filename`, `existingTables`?): `string`

Converts a filename into a valid and unique column or table name for database use.

* Removes file extension
* Replaces invalid characters with underscores
* Ensures the name starts with a letter or underscore
* Truncates to max length of 63 characters
* Ensures uniqueness among existing names

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filename` | `string` | The original filename to convert |
| `existingTables`? | `string`\[] | Optional array of existing table names to ensure uniqueness |

## Returns

`string`

A valid and unique table/column name

## Example

```ts
convertToUniqueColumnOrTableName("my-file.csv") // returns "my_file"
convertToUniqueColumnOrTableName("123data.csv") // returns "_123data"
```

---

---
url: /api/utils/functions/convertToUniqueS3FolderPath.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueS3FolderPath

# Function: convertToUniqueS3FolderPath()

> **convertToUniqueS3FolderPath**(`str`, `existingObjects`?): `string`

Converts a string into a valid and unique S3 folder path.

* Ensures the path ends with a forward slash
* Replaces special characters with underscores
* Ensures uniqueness among existing paths

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to convert into an S3 folder path |
| `existingObjects`? | `string`\[] | Optional array of existing S3 paths to ensure uniqueness |

## Returns

`string`

A valid and unique S3 folder path ending with a forward slash

## Example

```ts
convertToUniqueS3FolderPath("my folder") // returns "my_folder/"
```

---

---
url: /api/utils/functions/convertToUniqueS3ObjectName.md
---
[@sqlrooms/utils](../index.md) / convertToUniqueS3ObjectName

# Function: convertToUniqueS3ObjectName()

> **convertToUniqueS3ObjectName**(`str`, `existingObjects`?): `string`

Converts a string into a valid and unique S3 object name.

* Replaces special characters with underscores
* Ensures name is within S3's length limits
* Ensures uniqueness among existing objects

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `str` | `string` | The string to convert into an S3 object name |
| `existingObjects`? | `string`\[] | Optional array of existing S3 object names to ensure uniqueness |

## Returns

`string`

A valid and unique S3 object name

## Example

```ts
convertToUniqueS3ObjectName("my file.txt") // returns "my_file.txt"
```

---

---
url: /api/utils/functions/convertToValidColumnOrTableName.md
---
[@sqlrooms/utils](../index.md) / convertToValidColumnOrTableName

# Function: convertToValidColumnOrTableName()

> **convertToValidColumnOrTableName**(`filename`): `string`

Converts a filename into a valid column or table name for database use.

* Removes file extension
* Replaces invalid characters with underscores
* Ensures the name starts with a letter or underscore
* Truncates to max length of 63 characters

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filename` | `string` | The original filename to convert |

## Returns

`string`

A valid table/column name

## Example

```ts
convertToValidColumnOrTableName("my-file.csv") // returns "my_file"
convertToValidColumnOrTableName("123data.csv") // returns "_123data"
```

---

---
url: /api/ui/functions/CopyButton.md
---
[@sqlrooms/ui](../index.md) / CopyButton

# Function: CopyButton()

> **CopyButton**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CopyButtonProps`](../interfaces/CopyButtonProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/cosmos/functions/CosmosGraph.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraph

# Function: CosmosGraph()

> **CosmosGraph**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A React component that renders an interactive graph visualization using Cosmos.

Features:

* Renders points and optional links in a WebGL canvas
* Supports point hovering with customizable tooltips
* Handles point focusing
* Provides graph state to child components through zustand store

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CosmosGraphProps`](../type-aliases/CosmosGraphProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
const MyGraph = () => {
  const config = {
    backgroundColor: '#ffffff',
    nodeSize: 5,
    simulation: {
      repulsion: 0.5,
      gravity: 0.1,
    },
  };

  return (
    <div style={{ width: '800px', height: '600px' }}>
      <CosmosGraph
        config={config}
        pointPositions={new Float32Array([0, 0, 1, 1])}
        pointColors={new Float32Array([1, 0, 0, 1, 0, 1, 0, 1])}
        pointSizes={new Float32Array([5, 5])}
        renderPointTooltip={(index) => `Point ${index}`}
      >
        <GraphControls />
      </CosmosGraph>
    </div>
  );
};
```

---

---
url: /api/cosmos/functions/CosmosGraphControls.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraphControls

# Function: CosmosGraphControls()

> **CosmosGraphControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A flexible control panel component for CosmosGraph that provides view controls.
Must be used within a CosmosGraph component as it relies on the graph state from the store.

The component shows the default fit view control and allows adding custom controls as children.
For simulation controls, use the CosmosSimulationControls component.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Examples

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls />
</CosmosGraph>
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls className="absolute bottom-4 right-4" />
</CosmosGraph>
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosGraphControls>
    <Button onClick={handleExport}>
      <Download className="h-4 w-4" />
    </Button>
  </CosmosGraphControls>
</CosmosGraph>
```

---

---
url: /api/cosmos/functions/CosmosSimulationControls.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSimulationControls

# Function: CosmosSimulationControls()

> **CosmosSimulationControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A component that provides fine-grained controls for adjusting graph simulation parameters.
Uses the zustand store to access and control the graph state.

Features:

* Slider controls for all simulation parameters
* Real-time parameter adjustment
* Tooltips with parameter descriptions
* Customizable positioning
* Default values optimized for common use cases

Available parameters:

* Gravity (0-0.5): Controls how strongly nodes are pulled toward the center
* Repulsion (0-2): Controls how strongly nodes push away from each other
* Link Strength (0-2): Controls the spring force between connected nodes
* Link Distance (1-20): Sets the natural length of links between nodes
* Friction (0-1): Controls how quickly node movement decays
* Decay (100-10000): Controls how quickly the simulation "cools down"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CosmosSimulationControlsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Examples

```tsx
import { CosmosGraph, CosmosSimulationControls } from '@sqlrooms/cosmos';

const MyGraph = () => {
  return (
      <CosmosGraph {...graphProps}>
        <CosmosSimulationControls />
      </CosmosGraph>
  );
};
```

```tsx
import { CosmosGraph, CosmosGraphControls, CosmosSimulationControls } from '@sqlrooms/cosmos';

const MyGraph = () => {
  return (
      <CosmosGraph {...graphProps}>
        <CosmosGraphControls className="absolute top-4 left-4" />
        <CosmosSimulationControls className="absolute top-4 right-4" />
      </CosmosGraph>
  );
};
```

```tsx
<CosmosGraph {...graphProps}>
  <CosmosSimulationControls
    className="absolute bottom-4 right-4 bg-opacity-75 backdrop-blur-sm"
  />
</CosmosGraph>
```

---

---
url: /api/ai-settings/functions/createAiSettingsSlice.md
---
[@sqlrooms/ai-settings](../index.md) / createAiSettingsSlice

# Function: createAiSettingsSlice()

> **createAiSettingsSlice**<`PC`>(`props`?): `StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `CreateAiSettingsSliceParams` |

## Returns

`StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

---

---
url: /api/ai/functions/createAiSettingsSlice.md
---
[@sqlrooms/ai](../index.md) / createAiSettingsSlice

# Function: createAiSettingsSlice()

> **createAiSettingsSlice**<`PC`>(`props`?): `StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `CreateAiSettingsSliceParams` |

## Returns

`StateCreator`<[`AiSettingsSliceState`](../type-aliases/AiSettingsSliceState.md)>

---

---
url: /api/ai-core/functions/createAiSlice.md
---
[@sqlrooms/ai-core](../index.md) / createAiSlice

# Function: createAiSlice()

> **createAiSlice**<`PC`>(`params`): `StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `params` | `AiSliceOptions` |

## Returns

`StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

---

---
url: /api/ai/functions/createAiSlice.md
---
[@sqlrooms/ai](../index.md) / createAiSlice

# Function: createAiSlice()

> **createAiSlice**<`PC`>(`params`): `StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `params` | `AiSliceOptions` |

## Returns

`StateCreator`<[`AiSliceState`](../type-aliases/AiSliceState.md)>

---

---
url: /api/duckdb/functions/createBaseDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createBaseDuckDbConnector

# Function: createBaseDuckDbConnector()

> **createBaseDuckDbConnector**(`__namedParameters`, `impl`): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`BaseDuckDbConnectorOptions`](../interfaces/BaseDuckDbConnectorOptions.md) |
| `impl` | [`BaseDuckDbConnectorImpl`](../interfaces/BaseDuckDbConnectorImpl.md) |

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/room-shell/functions/createBaseSlice.md
---
[@sqlrooms/room-shell](../index.md) / createBaseSlice

# Function: createBaseSlice()

> **createBaseSlice**<`PC`, `S`>(`sliceCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`S`>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `S` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `S` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`S`>

---

---
url: /api/room-store/functions/createBaseSlice.md
---
[@sqlrooms/room-store](../index.md) / createBaseSlice

# Function: createBaseSlice()

> **createBaseSlice**<`PC`, `S`>(`sliceCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`S`>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `S` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `S` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`S`>

---

---
url: /api/canvas/functions/createCanvasSlice.md
---
[@sqlrooms/canvas](../index.md) / createCanvasSlice

# Function: createCanvasSlice()

> **createCanvasSlice**<`PC`>(`props`): `StateCreator`<[`CanvasSliceState`](../type-aliases/CanvasSliceState.md)>

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `PC` *extends* `object` | `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `config`: `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }>; `ai`: `Partial`<`AiSliceOptions`>; } |
| `props.config`? | `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }> |
| `props.ai`? | `Partial`<`AiSliceOptions`> |

## Returns

`StateCreator`<[`CanvasSliceState`](../type-aliases/CanvasSliceState.md)>

---

---
url: /api/cosmos/functions/createCosmosSlice.md
---
[@sqlrooms/cosmos](../index.md) / createCosmosSlice

# Function: createCosmosSlice()

> **createCosmosSlice**(): `StateCreator`<[`CosmosSliceState`](../type-aliases/CosmosSliceState.md)>

Creates a Zustand slice for managing Cosmos graph state.
This slice handles graph creation, destruction, configuration, and data updates.

## Returns

`StateCreator`<[`CosmosSliceState`](../type-aliases/CosmosSliceState.md)>

A state creator function for the Cosmos slice

---

---
url: /api/ai-config/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai-config](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `sessions`: `object`\[]; `currentSessionId`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai-core/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai-core](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `sessions`: `object`\[]; `currentSessionId`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai/functions/createDefaultAiConfig.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiConfig

# Function: createDefaultAiConfig()

> **createDefaultAiConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `sessions`: `object`\[]; `currentSessionId`: `string`; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai/functions/createDefaultAiInstructions.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiInstructions

# Function: createDefaultAiInstructions()

> **createDefaultAiInstructions**(`store`): `string`

Returns the default system instructions for the AI assistant

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md) & `DuckDbSliceState`> |

## Returns

`string`

---

---
url: /api/ai-settings/functions/createDefaultAiSettingsConfig.md
---
[@sqlrooms/ai-settings](../index.md) / createDefaultAiSettingsConfig

# Function: createDefaultAiSettingsConfig()

> **createDefaultAiSettingsConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `providers`: `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }>; `customModels`: `object`\[]; `modelParameters`: { `maxSteps`: `number`; `additionalInstruction`: `string`; }; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/functions/createDefaultAiSettingsConfig.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiSettingsConfig

# Function: createDefaultAiSettingsConfig()

> **createDefaultAiSettingsConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `providers`: `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }>; `customModels`: `object`\[]; `modelParameters`: { `maxSteps`: `number`; `additionalInstruction`: `string`; }; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/functions/createDefaultAiTools.md
---
[@sqlrooms/ai](../index.md) / createDefaultAiTools

# Function: createDefaultAiTools()

> **createDefaultAiTools**(`store`, `options`?): `Record`<`string`, [`AiSliceTool`](../type-aliases/AiSliceTool.md)>

Default tools available to the AI assistant for data analysis
Includes:

* query: Executes SQL queries against DuckDB

## Parameters

| Parameter | Type |
| ------ | ------ |
| `store` | `StoreApi`<[`AiSliceState`](../type-aliases/AiSliceState.md) & `DuckDbSliceState`> |
| `options`? | [`DefaultToolsOptions`](../type-aliases/DefaultToolsOptions.md) |

## Returns

`Record`<`string`, [`AiSliceTool`](../type-aliases/AiSliceTool.md)>

---

---
url: /api/room-config/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `description`? | `null` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-shell/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; })\[] |
|  `description`? | `null` | `string` |

---

---
url: /api/room-store/functions/createDefaultBaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / createDefaultBaseRoomConfig

# Function: createDefaultBaseRoomConfig()

> **createDefaultBaseRoomConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; })\[] |
|  `description`? | `null` | `string` |

---

---
url: /api/canvas/functions/createDefaultCanvasConfig.md
---
[@sqlrooms/canvas](../index.md) / createDefaultCanvasConfig

# Function: createDefaultCanvasConfig()

> **createDefaultCanvasConfig**(`props`?): `object`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | `Partial`<{ `viewport`: { `x`: `number`; `y`: `number`; `zoom`: `number`; }; `nodes`: `object`\[]; `edges`: `object`\[]; }> |

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `viewport` | { `x`: `number`; `y`: `number`; `zoom`: `number`; } |
|  `nodes` | `object`\[] |
|  `edges` | `object`\[] |

---

---
url: /api/cosmos/functions/createDefaultCosmosConfig.md
---
[@sqlrooms/cosmos](../index.md) / createDefaultCosmosConfig

# Function: createDefaultCosmosConfig()

> **createDefaultCosmosConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `cosmos` | { `pointSizeScale`: `number`; `scalePointsOnZoom`: `boolean`; `renderLinks`: `boolean`; `linkWidthScale`: `number`; `linkArrowsSizeScale`: `number`; `linkArrows`: `boolean`; `curvedLinks`: `boolean`; `simulationGravity`: `number`; `simulationRepulsion`: `number`; `simulationLinkSpring`: `number`; `simulationLinkDistance`: `number`; `simulationFriction`: `number`; `simulationDecay`: `number`; } |

---

---
url: /api/discuss/functions/createDefaultDiscussConfig.md
---
[@sqlrooms/discuss](../index.md) / createDefaultDiscussConfig

# Function: createDefaultDiscussConfig()

> **createDefaultDiscussConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `discussions` | `object`\[] |

---

---
url: /api/duckdb-config/functions/createDefaultDuckDbConfig.md
---
[@sqlrooms/duckdb-config](../index.md) / createDefaultDuckDbConfig

# Function: createDefaultDuckDbConfig()

> **createDefaultDuckDbConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `db`? | {} |

---

---
url: /api/duckdb/functions/createDefaultDuckDbConfig.md
---
[@sqlrooms/duckdb](../index.md) / createDefaultDuckDbConfig

# Function: createDefaultDuckDbConfig()

> **createDefaultDuckDbConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `db`? | {} |

---

---
url: /api/layout/functions/createDefaultLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / createDefaultLayoutConfig

# Function: createDefaultLayoutConfig()

> **createDefaultLayoutConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `layout`? | `any` |

---

---
url: /api/layout-config/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/layout-config](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/layout/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/layout](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-config/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-config](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-shell/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-shell](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-store/functions/createDefaultMosaicLayout.md
---
[@sqlrooms/room-store](../index.md) / createDefaultMosaicLayout

# Function: createDefaultMosaicLayout()

> **createDefaultMosaicLayout**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/sql-editor-config/functions/createDefaultSqlEditorConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / createDefaultSqlEditorConfig

# Function: createDefaultSqlEditorConfig()

> **createDefaultSqlEditorConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `sqlEditor` | { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery`: `string`; } |

---

---
url: /api/sql-editor/functions/createDefaultSqlEditorConfig.md
---
[@sqlrooms/sql-editor](../index.md) / createDefaultSqlEditorConfig

# Function: createDefaultSqlEditorConfig()

> **createDefaultSqlEditorConfig**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `sqlEditor` | { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery`: `string`; } |

---

---
url: /api/discuss/functions/createDiscussSlice.md
---
[@sqlrooms/discuss](../index.md) / createDiscussSlice

# Function: createDiscussSlice()

> **createDiscussSlice**<`PC`>(`__namedParameters`): `StateCreator`<[`DiscussSliceState`](../type-aliases/DiscussSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `userId`: `string`; } |
| `__namedParameters.userId` | `string` |

## Returns

`StateCreator`<[`DiscussSliceState`](../type-aliases/DiscussSliceState.md)>

---

---
url: /api/duckdb/functions/createDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createDuckDbConnector

# Function: createDuckDbConnector()

> **createDuckDbConnector**(`options`): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | `DuckDbConnectorOptions` |

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/duckdb/functions/createDuckDbSlice.md
---
[@sqlrooms/duckdb](../index.md) / createDuckDbSlice

# Function: createDuckDbSlice()

> **createDuckDbSlice**(`__namedParameters`): `StateCreator`<[`DuckDbSliceState`](../type-aliases/DuckDbSliceState.md)>

Create a DuckDB slice for managing the connector

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `connector`: [`DuckDbConnector`](../interfaces/DuckDbConnector.md); } |
| `__namedParameters.connector`? | [`DuckDbConnector`](../interfaces/DuckDbConnector.md) |

## Returns

`StateCreator`<[`DuckDbSliceState`](../type-aliases/DuckDbSliceState.md)>

---

---
url: /api/layout/functions/createLayoutSlice.md
---
[@sqlrooms/layout](../index.md) / createLayoutSlice

# Function: createLayoutSlice()

> **createLayoutSlice**<`PC`>(`__namedParameters`): `StateCreator`<[`LayoutSliceState`](../type-aliases/LayoutSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` & `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `panels`: `Record`<`string`, [`RoomPanelInfo`](../type-aliases/RoomPanelInfo.md)>; } |
| `__namedParameters.panels`? | `Record`<`string`, [`RoomPanelInfo`](../type-aliases/RoomPanelInfo.md)> |

## Returns

`StateCreator`<[`LayoutSliceState`](../type-aliases/LayoutSliceState.md)>

---

---
url: /api/room-shell/functions/createRoomShellSlice.md
---
[@sqlrooms/room-shell](../index.md) / createRoomShellSlice

# Function: createRoomShellSlice()

> **createRoomShellSlice**<`PC`>(`props`): [`StateCreator`](../type-aliases/StateCreator.md)<[`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md)<`PC`>>

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `PC` *extends* `object` | `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `InitialState`<`PC`> |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md)<`PC`>>

---

---
url: /api/room-shell/functions/createRoomSlice.md
---
[@sqlrooms/room-shell](../index.md) / createRoomSlice

# Function: createRoomSlice()

> **createRoomSlice**<`PC`>(`props`?): [`StateCreator`](../type-aliases/StateCreator.md)<[`RoomState`](../type-aliases/RoomState.md)<`PC`>>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | { `config`: `PC`; `room`: `Partial`<`Omit`<[`RoomStateProps`](../type-aliases/RoomStateProps.md)<`PC`>, `"config"`>>; } |
| `props.config`? | `PC` |
| `props.room`? | `Partial`<`Omit`<[`RoomStateProps`](../type-aliases/RoomStateProps.md)<`PC`>, `"config"`>> |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`RoomState`](../type-aliases/RoomState.md)<`PC`>>

---

---
url: /api/room-store/functions/createRoomSlice.md
---
[@sqlrooms/room-store](../index.md) / createRoomSlice

# Function: createRoomSlice()

> **createRoomSlice**<`PC`>(`props`?): [`StateCreator`](../type-aliases/StateCreator.md)<[`RoomState`](../type-aliases/RoomState.md)<`PC`>>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | { `config`: `PC`; `room`: `Partial`<`Omit`<[`RoomStateProps`](../type-aliases/RoomStateProps.md)<`PC`>, `"config"`>>; } |
| `props.config`? | `PC` |
| `props.room`? | `Partial`<`Omit`<[`RoomStateProps`](../type-aliases/RoomStateProps.md)<`PC`>, `"config"`>> |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<[`RoomState`](../type-aliases/RoomState.md)<`PC`>>

---

---
url: /api/room-shell/functions/createRoomStore.md
---
[@sqlrooms/room-shell](../index.md) / createRoomStore

# Function: createRoomStore()

> **createRoomStore**<`PC`, `RS`>(`stateCreator`): `object`

Create a room store with custom fields and methods

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `RS` *extends* [`RoomState`](../type-aliases/RoomState.md)<`PC`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

## Returns

`object`

The room store and a hook for accessing the room store

| Name | Type |
| ------ | ------ |
|  `roomStore` | [`StoreApi`](../interfaces/StoreApi.md)<`RS`> |
|  `useRoomStore` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-store/functions/createRoomStore.md
---
[@sqlrooms/room-store](../index.md) / createRoomStore

# Function: createRoomStore()

> **createRoomStore**<`PC`, `RS`>(`stateCreator`): `object`

Create a room store with custom fields and methods

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `RS` *extends* [`RoomState`](../type-aliases/RoomState.md)<`PC`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreator` | [`StateCreator`](../type-aliases/StateCreator.md)<`RS`> |

## Returns

`object`

The room store and a hook for accessing the room store

| Name | Type |
| ------ | ------ |
|  `roomStore` | [`StoreApi`](../interfaces/StoreApi.md)<`RS`> |
|  `useRoomStore` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-shell/functions/createRoomStoreCreator.md
---
[@sqlrooms/room-shell](../index.md) / createRoomStoreCreator

# Function: createRoomStoreCreator()

> **createRoomStoreCreator**<`TState`>(): <`TFactory`>(`stateCreatorFactory`) => `object`

Factory to create a room store creator with custom params.

## Type Parameters

| Type Parameter |
| ------ |
| `TState` *extends* [`RoomState`](../type-aliases/RoomState.md)<`any`> |

## Returns

`Function`

An object with createRoomStore(params) and useRoomStore(selector)

### Type Parameters

| Type Parameter |
| ------ |
| `TFactory` *extends* (...`args`) => [`StateCreator`](../type-aliases/StateCreator.md)<`TState`> |

### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreatorFactory` | `TFactory` |

### Returns

`object`

| Name | Type |
| ------ | ------ |
|  `createRoomStore` | (...`args`) => [`StoreApi`](../interfaces/StoreApi.md)<`TState`> |
|  `useRoomStore` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-store/functions/createRoomStoreCreator.md
---
[@sqlrooms/room-store](../index.md) / createRoomStoreCreator

# Function: createRoomStoreCreator()

> **createRoomStoreCreator**<`TState`>(): <`TFactory`>(`stateCreatorFactory`) => `object`

Factory to create a room store creator with custom params.

## Type Parameters

| Type Parameter |
| ------ |
| `TState` *extends* [`RoomState`](../type-aliases/RoomState.md)<`any`> |

## Returns

`Function`

An object with createRoomStore(params) and useRoomStore(selector)

### Type Parameters

| Type Parameter |
| ------ |
| `TFactory` *extends* (...`args`) => [`StateCreator`](../type-aliases/StateCreator.md)<`TState`> |

### Parameters

| Parameter | Type |
| ------ | ------ |
| `stateCreatorFactory` | `TFactory` |

### Returns

`object`

| Name | Type |
| ------ | ------ |
|  `createRoomStore` | (...`args`) => [`StoreApi`](../interfaces/StoreApi.md)<`TState`> |
|  `useRoomStore` | <`T`>(`selector`) => `T` |

---

---
url: /api/room-shell/functions/createSlice.md
---
[@sqlrooms/room-shell](../index.md) / createSlice

# Function: createSlice()

> **createSlice**<`PC`, `S`>(`sliceCreator`): [`StateCreator`](../type-aliases/StateCreator.md)<`S`>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |
| `S` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `sliceCreator` | (...`args`) => `S` |

## Returns

[`StateCreator`](../type-aliases/StateCreator.md)<`S`>

---

---
url: /api/sql-editor/functions/createSqlEditorSlice.md
---
[@sqlrooms/sql-editor](../index.md) / createSqlEditorSlice

# Function: createSqlEditorSlice()

> **createSqlEditorSlice**<`PC`>(`__namedParameters`): `StateCreator`<[`SqlEditorSliceState`](../type-aliases/SqlEditorSliceState.md)>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` & `object` & `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `queryResultLimit`: `number`; `queryResultLimitOptions`: `number`\[]; } |
| `__namedParameters.queryResultLimit`? | `number` |
| `__namedParameters.queryResultLimitOptions`? | `number`\[] |

## Returns

`StateCreator`<[`SqlEditorSliceState`](../type-aliases/SqlEditorSliceState.md)>

---

---
url: /api/sql-editor/functions/CreateTableModal.md
---
[@sqlrooms/sql-editor](../index.md) / CreateTableModal

# Function: CreateTableModal()

> **CreateTableModal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CreateTableModalProps`](../type-aliases/CreateTableModalProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/duckdb/functions/createTypedRowAccessor.md
---
[@sqlrooms/duckdb](../index.md) / createTypedRowAccessor

# Function: createTypedRowAccessor()

> **createTypedRowAccessor**<`T`>(`__namedParameters`): [`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

Creates a row accessor wrapper around an Arrow table that provides typed row access.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | { `arrowTable`: `Table`<`T`>; `validate`: (`row`) => `T`; } |
| `__namedParameters.arrowTable` | `Table`<`T`> |
| `__namedParameters.validate`? | (`row`) => `T` |

## Returns

[`TypedRowAccessor`](../interfaces/TypedRowAccessor.md)<`T`>

---

---
url: /api/vega/functions/createVegaChartTool.md
---
[@sqlrooms/vega](../index.md) / createVegaChartTool

# Function: createVegaChartTool()

> **createVegaChartTool**(`options`): `AiSliceTool`

Creates a VegaLite chart visualization tool for AI assistants

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `description`: `string`; } | Configuration options for the VegaChart tool |
| `options.description`? | `string` | Custom description for the tool (defaults to a standard description) |

## Returns

`AiSliceTool`

A tool that can be used with the AI assistant

---

---
url: /api/duckdb/functions/createWasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createWasmDuckDbConnector

# Function: createWasmDuckDbConnector()

> **createWasmDuckDbConnector**(`options`): [`WasmDuckDbConnector`](../interfaces/WasmDuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | `WasmDuckDbConnectorOptions` |

## Returns

[`WasmDuckDbConnector`](../interfaces/WasmDuckDbConnector.md)

---

---
url: /api/motherduck/functions/createWasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / createWasmMotherDuckDbConnector

# Function: createWasmMotherDuckDbConnector()

> **createWasmMotherDuckDbConnector**(`options`): [`WasmMotherDuckDbConnector`](../interfaces/WasmMotherDuckDbConnector.md)

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | [`WasmMotherDuckDbConnectorOptions`](../interfaces/WasmMotherDuckDbConnectorOptions.md) |

## Returns

[`WasmMotherDuckDbConnector`](../interfaces/WasmMotherDuckDbConnector.md)

---

---
url: /api/duckdb/functions/createWebSocketDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / createWebSocketDuckDbConnector

# Function: createWebSocketDuckDbConnector()

> **createWebSocketDuckDbConnector**(`options`): `WebSocketDuckDbConnector`

Create a WebSocket-based DuckDB connector.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `options` | `WebSocketDuckDbConnectorOptions` |

## Returns

`WebSocketDuckDbConnector`

---

---
url: /api/recharts/functions/Cross.md
---
[@sqlrooms/recharts](../index.md) / Cross

# Function: Cross()

> **Cross**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CrossProps`](../type-aliases/CrossProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/functions/Curve.md
---
[@sqlrooms/recharts](../index.md) / Curve

# Function: Curve()

> **Curve**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`CurveProps`](../type-aliases/CurveProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/functions/Customized.md
---
[@sqlrooms/recharts](../index.md) / Customized

# Function: Customized()

> **Customized**<`P`, `C`>(`__namedParameters`): `Element`

custom svg elements by rechart instance props and state.

## Type Parameters

| Type Parameter |
| ------ |
| `P` |
| `C` *extends* `Comp`<`P`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`CustomizedProps`](../type-aliases/CustomizedProps.md)<`P`, `C`> |

## Returns

`Element`

svg elements

---

---
url: /api/schema-tree/functions/DatabaseTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / DatabaseTreeNode

# Function: DatabaseTreeNode()

> **DatabaseTreeNode**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `nodeObject`: `DatabaseNodeObject`; `additionalMenuItems`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.nodeObject` | `DatabaseNodeObject` |
| `props.additionalMenuItems`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/data-table/functions/DataTableArrowPaginated.md
---
[@sqlrooms/data-table](../index.md) / DataTableArrowPaginated

# Function: DataTableArrowPaginated()

> **DataTableArrowPaginated**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `table`: `undefined` | `Table`<`any`>; `fontSize`: `string`; `footerActions`: `ReactNode`; `pageSize`: `number`; } |
| `props.className`? | `string` |
| `props.table` | `undefined` | `Table`<`any`> |
| `props.fontSize`? | `string` |
| `props.footerActions`? | `ReactNode` |
| `props.pageSize`? | `number` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/data-table/functions/DataTableModal.md
---
[@sqlrooms/data-table](../index.md) / DataTableModal

# Function: DataTableModal()

> **DataTableModal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A modal component for displaying a table with data from a SQL query.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `object` & { `query`: `undefined` | `string`; } | { `arrowTable`: `undefined` | `Table`<`any`>; } | Component props |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Component

## Example

```tsx
import { useState } from 'react';
import { DataTableModal } from '@sqlrooms/data-table';

const MyComponent = () => {
  const tableModal = useDisclosure();
  return (
    <DataTableModal
      title="Users"
      query="SELECT * FROM users LIMIT 10"
      tableModal={tableModal}
    />
  );
};
```

---

---
url: /api/data-table/functions/DataTablePaginated.md
---
[@sqlrooms/data-table](../index.md) / DataTablePaginated

# Function: DataTablePaginated()

> **DataTablePaginated**<`Data`>(`props`): `Element`

Data table with pagination, sorting, and custom actions.

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`DataTablePaginatedProps`](../type-aliases/DataTablePaginatedProps.md)<`Data`> |  |

## Returns

`Element`

---

---
url: /api/schema-tree/functions/defaultRenderTableNodeMenuItems.md
---
[@sqlrooms/schema-tree](../index.md) / defaultRenderTableNodeMenuItems

# Function: defaultRenderTableNodeMenuItems()

> **defaultRenderTableNodeMenuItems**(`nodeObject`, `viewTableModal`?): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `nodeObject` | `TableNodeObject` |
| `viewTableModal`? | `UseDisclosureReturnValue` |

## Returns

`Element`

---

---
url: /api/schema-tree/functions/defaultRenderTableSchemaNode.md
---
[@sqlrooms/schema-tree](../index.md) / defaultRenderTableSchemaNode

# Function: defaultRenderTableSchemaNode()

> **defaultRenderTableSchemaNode**(`node`): `null` | `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `DbSchemaNode` |

## Returns

`null` | `Element`

---

---
url: /api/recharts/functions/DefaultTooltipContent.md
---
[@sqlrooms/recharts](../index.md) / DefaultTooltipContent

# Function: DefaultTooltipContent()

> **DefaultTooltipContent**<`TValue`, `TName`>(`props`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`TValue`, `TName`> |

## Returns

`Element`

---

---
url: /api/discuss/functions/DeleteConfirmDialog.md
---
[@sqlrooms/discuss](../index.md) / DeleteConfirmDialog

# Function: DeleteConfirmDialog()

> **DeleteConfirmDialog**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DeleteConfirmDialogProps` |

## Returns

`Element`

---

---
url: /api/s3-browser/functions/deleteS3Files.md
---
[@sqlrooms/s3-browser](../index.md) / deleteS3Files

# Function: deleteS3Files()

> **deleteS3Files**(`S3`, `bucket`, `prefix`): `Promise`<`void`>

Delete all files with the given prefix

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `S3` | `S3Client` | - |
| `bucket` | `string` | - |
| `prefix` | `string` |  |

## Returns

`Promise`<`void`>

---

---
url: /api/ai-core/functions/DeleteSessionDialog.md
---
[@sqlrooms/ai-core](../index.md) / DeleteSessionDialog

# Function: DeleteSessionDialog()

> **DeleteSessionDialog**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Dialog component for confirming session deletion.
Displays a warning message and provides cancel/delete buttons.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DeleteSessionDialogProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<DeleteSessionDialog
  isOpen={true}
  onClose={() => console.log("Dialog closed")}
  onDelete={() => console.log("Session deleted")}
/>
```

---

---
url: /api/ai/functions/DeleteSessionDialog.md
---
[@sqlrooms/ai](../index.md) / DeleteSessionDialog

# Function: DeleteSessionDialog()

> **DeleteSessionDialog**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Dialog component for confirming session deletion.
Displays a warning message and provides cancel/delete buttons.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DeleteSessionDialogProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<DeleteSessionDialog
  isOpen={true}
  onClose={() => console.log("Dialog closed")}
  onDelete={() => console.log("Session deleted")}
/>
```

---

---
url: /api/ui/functions/Dialog.md
---
[@sqlrooms/ui](../index.md) / Dialog

# Function: Dialog()

> **Dialog**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/DialogClose.md
---
[@sqlrooms/ui](../index.md) / DialogClose

# Function: DialogClose()

> **DialogClose**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DialogContent.md
---
[@sqlrooms/ui](../index.md) / DialogContent

# Function: DialogContent()

> **DialogContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogContentProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DialogDescription.md
---
[@sqlrooms/ui](../index.md) / DialogDescription

# Function: DialogDescription()

> **DialogDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`>, `"ref"`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DialogFooter.md
---
[@sqlrooms/ui](../index.md) / DialogFooter

# Function: DialogFooter()

> **DialogFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DialogHeader.md
---
[@sqlrooms/ui](../index.md) / DialogHeader

# Function: DialogHeader()

> **DialogHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DialogOverlay.md
---
[@sqlrooms/ui](../index.md) / DialogOverlay

# Function: DialogOverlay()

> **DialogOverlay**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DialogPortal.md
---
[@sqlrooms/ui](../index.md) / DialogPortal

# Function: DialogPortal()

> **DialogPortal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogPortalProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/DialogTitle.md
---
[@sqlrooms/ui](../index.md) / DialogTitle

# Function: DialogTitle()

> **DialogTitle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`>, `"ref"`> & `RefAttributes`<`HTMLHeadingElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DialogTrigger.md
---
[@sqlrooms/ui](../index.md) / DialogTrigger

# Function: DialogTrigger()

> **DialogTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/discuss/functions/DiscussionItem.md
---
[@sqlrooms/discuss](../index.md) / DiscussionItem

# Function: DiscussionItem()

> **DiscussionItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DiscussionItemProps`, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/discuss/functions/DiscussionList.md
---
[@sqlrooms/discuss](../index.md) / DiscussionList

# Function: DiscussionList()

> **DiscussionList**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Dot.md
---
[@sqlrooms/recharts](../index.md) / Dot

# Function: Dot()

> **Dot**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`DotProps`](../type-aliases/DotProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/utils/functions/downloadFile.md
---
[@sqlrooms/utils](../index.md) / downloadFile

# Function: downloadFile()

> **downloadFile**(`url`, `opts`?): `Promise`<`Uint8Array`<`ArrayBufferLike`>>

Downloads a file from a specified URL using XMLHttpRequest

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `url` | `string` | The URL to download the file from |
| `opts`? | { `method`: `string`; `headers`: `Record`<`string`, `string`>; `onProgress`: (`info`) => `void`; } | Optional configuration for the download |
| `opts.method`? | `string` | The HTTP method to use |
| `opts.headers`? | `Record`<`string`, `string`> | Additional headers to include in the request |
| `opts.onProgress`? | (`info`) => `void` | Callback function to track download progress |

## Returns

`Promise`<`Uint8Array`<`ArrayBufferLike`>>

The downloaded file as a Uint8Array

## Throws

Throws an object containing status and error message if download fails

---

---
url: /api/ui/functions/Drawer.md
---
[@sqlrooms/ui](../index.md) / Drawer

# Function: Drawer()

> **Drawer**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerClose.md
---
[@sqlrooms/ui](../index.md) / DrawerClose

# Function: DrawerClose()

> **DrawerClose**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerContent.md
---
[@sqlrooms/ui](../index.md) / DrawerContent

# Function: DrawerContent()

> **DrawerContent**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DialogContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerDescription.md
---
[@sqlrooms/ui](../index.md) / DrawerDescription

# Function: DrawerDescription()

> **DrawerDescription**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerFooter.md
---
[@sqlrooms/ui](../index.md) / DrawerFooter

# Function: DrawerFooter()

> **DrawerFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerHandle.md
---
[@sqlrooms/ui](../index.md) / DrawerHandle

# Function: DrawerHandle()

> **DrawerHandle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>, `HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerHeader.md
---
[@sqlrooms/ui](../index.md) / DrawerHeader

# Function: DrawerHeader()

> **DrawerHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLDivElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerOverlay.md
---
[@sqlrooms/ui](../index.md) / DrawerOverlay

# Function: DrawerOverlay()

> **DrawerOverlay**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerPortal.md
---
[@sqlrooms/ui](../index.md) / DrawerPortal

# Function: DrawerPortal()

> **DrawerPortal**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogPortalProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerTitle.md
---
[@sqlrooms/ui](../index.md) / DrawerTitle

# Function: DrawerTitle()

> **DrawerTitle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DrawerTrigger.md
---
[@sqlrooms/ui](../index.md) / DrawerTrigger

# Function: DrawerTrigger()

> **DrawerTrigger**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DropdownMenu.md
---
[@sqlrooms/ui](../index.md) / DropdownMenu

# Function: DropdownMenu()

> **DropdownMenu**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/DropdownMenuCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuCheckboxItem

# Function: DropdownMenuCheckboxItem()

> **DropdownMenuCheckboxItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuContent.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuContent

# Function: DropdownMenuContent()

> **DropdownMenuContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuGroup.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuGroup

# Function: DropdownMenuGroup()

> **DropdownMenuGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuItem

# Function: DropdownMenuItem()

> **DropdownMenuItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuLabel.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuLabel

# Function: DropdownMenuLabel()

> **DropdownMenuLabel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuPortal.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuPortal

# Function: DropdownMenuPortal()

> **DropdownMenuPortal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuPortalProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/DropdownMenuRadioGroup.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuRadioGroup

# Function: DropdownMenuRadioGroup()

> **DropdownMenuRadioGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuRadioGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuRadioItem.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuRadioItem

# Function: DropdownMenuRadioItem()

> **DropdownMenuRadioItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuSeparator.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSeparator

# Function: DropdownMenuSeparator()

> **DropdownMenuSeparator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuShortcut.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuShortcut

# Function: DropdownMenuShortcut()

> **DropdownMenuShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/DropdownMenuSub.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSub

# Function: DropdownMenuSub()

> **DropdownMenuSub**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuSubProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/DropdownMenuSubContent.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSubContent

# Function: DropdownMenuSubContent()

> **DropdownMenuSubContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuSubTrigger.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuSubTrigger

# Function: DropdownMenuSubTrigger()

> **DropdownMenuSubTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DropdownMenuSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/DropdownMenuTrigger.md
---
[@sqlrooms/ui](../index.md) / DropdownMenuTrigger

# Function: DropdownMenuTrigger()

> **DropdownMenuTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DropdownMenuTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/EditableText.md
---
[@sqlrooms/ui](../index.md) / EditableText

# Function: EditableText()

> **EditableText**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | { `className`: `string`; `isReadOnly`: `boolean`; `value`: `string`; `minWidth`: `number`; `maxWidth`: `number`; `placeholder`: `string`; `onChange`: (`text`) => `void`; `defaultEditing`: `boolean`; `isEditing`: `boolean`; `onEditingChange`: (`isEditing`) => `void`; } | - |
| `props.className`? | `string` | - |
| `props.isReadOnly`? | `boolean` | - |
| `props.value` | `string` | - |
| `props.minWidth`? | `number` | - |
| `props.maxWidth`? | `number` | - |
| `props.placeholder`? | `string` | - |
| `props.onChange` | (`text`) => `void` | - |
| `props.defaultEditing`? | `boolean` | The editing state when it is initially rendered. Use when you do not need to control its editing state in the parent component. |
| `props.isEditing`? | `boolean` | The controlled editing state of the component. Must be used in conjunction with onEditingChange. |
| `props.onEditingChange`? | (`isEditing`) => `void` | - |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/monaco-editor/functions/ensureMonacoLoaderConfigured.md
---
[@sqlrooms/monaco-editor](../index.md) / ensureMonacoLoaderConfigured

# Function: ensureMonacoLoaderConfigured()

> **ensureMonacoLoaderConfigured**(): `void`

## Returns

`void`

---

---
url: /api/ui/functions/ErrorPane.md
---
[@sqlrooms/ui](../index.md) / ErrorPane

# Function: ErrorPane()

> **ErrorPane**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ErrorPaneProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/duckdb/functions/escapeId.md
---
[@sqlrooms/duckdb](../index.md) / escapeId

# Function: escapeId()

> **escapeId**(`id`): `string`

Escapes an identifier (like table or column names) for use in DuckDB SQL queries
by wrapping it in double quotes and escaping any existing double quotes by doubling them.
If the identifier is already properly quoted, returns it as is.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `id` | `string` | The identifier string to escape |

## Returns

`string`

The escaped identifier wrapped in double quotes

## Example

```ts
escapeId("my_table") // Returns '"my_table"'
escapeId("my""table") // Returns '"my""""table"'
```

---

---
url: /api/duckdb/functions/escapeVal.md
---
[@sqlrooms/duckdb](../index.md) / escapeVal

# Function: escapeVal()

> **escapeVal**(`val`): `string`

Escapes a value for use in DuckDB SQL queries by wrapping it in single quotes
and escaping any existing single quotes by doubling them.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `val` | `unknown` | The value to escape. Will be converted to string if not already a string. |

## Returns

`string`

The escaped string value wrapped in single quotes.

## Example

```ts
escapeVal("John's data") // Returns "'John''s data'"
```

---

---
url: /api/room-shell/functions/FileDataSourceCard.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSourceCard

# Function: FileDataSourceCard()

> **FileDataSourceCard**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `isReadOnly`: `boolean`; `fileInfo`: [`RoomFileInfo`](../type-aliases/RoomFileInfo.md); `fileState`: [`RoomFileState`](../type-aliases/RoomFileState.md); } |
| `props.isReadOnly`? | `boolean` |
| `props.fileInfo` | [`RoomFileInfo`](../type-aliases/RoomFileInfo.md) |
| `props.fileState`? | [`RoomFileState`](../type-aliases/RoomFileState.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/FileDataSourcesPanel.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSourcesPanel

# Function: FileDataSourcesPanel()

> **FileDataSourcesPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `isReadOnly`: `boolean`; } |
| `props.isReadOnly`? | `boolean` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/dropzone/functions/FileDropzone.md
---
[@sqlrooms/dropzone](../index.md) / FileDropzone

# Function: FileDropzone()

> **FileDropzone**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A customizable file dropzone component that handles file uploads through drag-and-drop or click interactions.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | { `className`: `string`; `isInvalid`: `boolean`; `onDrop`: (`files`) => `Promise`<`void`>; `multiple`: `boolean`; `acceptedFormats`: `Record`<`string`, `string`\[]>; `children`: `ReactNode`; } | Component props |
| `props.className`? | `string` | Optional CSS class name for styling |
| `props.isInvalid`? | `boolean` | Optional flag to indicate validation error state |
| `props.onDrop` | (`files`) => `Promise`<`void`> | Async callback function called when files are dropped or selected |
| `props.multiple`? | `boolean` | Optional flag to allow multiple file selection (default: true) |
| `props.acceptedFormats`? | `Record`<`string`, `string`\[]> | Optional object defining accepted MIME types and their extensions |
| `props.children`? | `ReactNode` | Optional React nodes to render inside the dropzone |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
// Basic usage
<FileDropzone
  onDrop={async (files) => {
    console.log('Dropped files:', files);
    // Handle file upload
  }}
/>

// With file type restrictions and single file upload
<FileDropzone
  multiple={false}
  acceptedFormats={{
    'text/csv': ['.csv'],
    'application/json': ['.json']
  }}
  onDrop={async (files) => {
    const file = files[0];
    // Handle single file upload
  }}
>
  <p>Custom dropzone content</p>
</FileDropzone>
```

---

---
url: /api/layout/functions/findMosaicNodePathByKey.md
---
[@sqlrooms/layout](../index.md) / findMosaicNodePathByKey

# Function: findMosaicNodePathByKey()

> **findMosaicNodePathByKey**(`root`, `key`): `undefined` | `MosaicPath`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
| `key` | `string` |

## Returns

`undefined` | `MosaicPath`

---

---
url: /api/ui/functions/Form.md
---
[@sqlrooms/ui](../index.md) / Form

# Function: Form()

> **Form**<`TFieldValues`, `TContext`, `TTransformedValues`>(`props`): `Element`

A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with useFormContext.

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `TFieldValues` *extends* `FieldValues` | - |
| `TContext` | `any` |
| `TTransformedValues` | `TFieldValues` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `FormProviderProps`<`TFieldValues`, `TContext`, `TTransformedValues`> | all useForm methods |

## Returns

`Element`

## Remarks

[API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)

## Example

```tsx
function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}
```

---

---
url: /api/utils/functions/formatBytes.md
---
[@sqlrooms/utils](../index.md) / formatBytes

# Function: formatBytes()

> **formatBytes**(`bytes`): `string`

Formats a number of bytes into a human-readable string with appropriate size units.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `bytes` | `number` | The number of bytes to format |

## Returns

`string`

A string representation of the bytes with appropriate unit (Bytes, KB, MB, etc.)

## Example

```ts
formatBytes(1024) // returns "1 KB"
formatBytes(1234567) // returns "1.18 MB"
```

---

---
url: /api/utils/functions/formatCount.md
---
[@sqlrooms/utils](../index.md) / formatCount

# Function: formatCount()

> **formatCount**(`n`): `string`

Formats a number as a string with thousands separators and no decimal places.
Example: 1234567 -> "1,234,567"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/utils/functions/formatCount4.md
---
[@sqlrooms/utils](../index.md) / formatCount4

# Function: formatCount4()

> **formatCount4**(`n`): `string`

Formats a number as a string with 4 significant digits and SI prefix.
Example: 1234567 -> "1.235M"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/utils/functions/formatCountShort.md
---
[@sqlrooms/utils](../index.md) / formatCountShort

# Function: formatCountShort()

> **formatCountShort**(`n`): `string`

Formats a number as a string with thousands separators and SI prefix.
Example: 1234567 -> "1M"

## Parameters

| Parameter | Type |
| ------ | ------ |
| `n` | `number` | { `valueOf`: `number`; } |

## Returns

`string`

---

---
url: /api/utils/functions/formatDate.md
---
[@sqlrooms/utils](../index.md) / formatDate

# Function: formatDate()

> **formatDate**(`d`): `string`

Formats a date into YYYY-MM-DD format

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted date string

## Example

```ts
formatDate(new Date()); // e.g., "2024-03-13"
```

---

---
url: /api/utils/functions/formatDateTime.md
---
[@sqlrooms/utils](../index.md) / formatDateTime

# Function: formatDateTime()

> **formatDateTime**(`d`): `string`

Formats a date into a human-readable datetime string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted string in "Day YYYY-MM-DD HH:MM AM/PM" format

## Example

```ts
formatDateTime(new Date()); // e.g., "Wed 2024-03-13 02:30 PM"
```

---

---
url: /api/utils/functions/formatNumber.md
---
[@sqlrooms/utils](../index.md) / formatNumber

# Function: formatNumber()

> **formatNumber**(`n`): `string`

Formats a number using US locale formatting

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `n` | `number` | Number to format |

## Returns

`string`

Formatted number string

## Example

```ts
formatNumber(1234567.89); // "1,234,568"
```

---

---
url: /api/utils/functions/formatTimeOfDay.md
---
[@sqlrooms/utils](../index.md) / formatTimeOfDay

# Function: formatTimeOfDay()

> **formatTimeOfDay**(`d`): `string`

Formats a date into time of day (HH:MM AM/PM)

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `number` | `bigint` | `Date` | Date to format (can be Date object, timestamp number, or bigint) |

## Returns

`string`

Formatted time string

## Example

```ts
formatTimeOfDay(new Date()); // e.g., "02:30 PM"
```

---

---
url: /api/utils/functions/formatTimeRelative.md
---
[@sqlrooms/utils](../index.md) / formatTimeRelative

# Function: formatTimeRelative()

> **formatTimeRelative**(`d`): `string`

Formats a date relative to the current time (e.g., "2 hours ago", "in 3 days")

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `d` | `undefined` | `null` | `string` | `number` | `Dayjs` | `Date` | Date to format (accepts any dayjs ConfigType) |

## Returns

`string`

Human-readable relative time string

## Example

```ts
formatTimeRelative(new Date(Date.now() - 3600000)); // "1 hour ago"
```

---

---
url: /api/utils/functions/formatTimestampForFilename.md
---
[@sqlrooms/utils](../index.md) / formatTimestampForFilename

# Function: formatTimestampForFilename()

> **formatTimestampForFilename**(): `string`

Formats the current timestamp for use in filenames (filesystem-safe)

## Returns

`string`

Timestamp string in YYYY-MM-DDTHH-mm-ss format

## Example

```ts
formatTimestampForFilename(); // "2024-03-13T14-30-25"
```

---

---
url: /api/ui/functions/FormControl.md
---
[@sqlrooms/ui](../index.md) / FormControl

# Function: FormControl()

> **FormControl**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SlotProps` & `RefAttributes`<`HTMLElement`>, `"ref"`> & `RefAttributes`<`HTMLElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/FormDescription.md
---
[@sqlrooms/ui](../index.md) / FormDescription

# Function: FormDescription()

> **FormDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/FormField.md
---
[@sqlrooms/ui](../index.md) / FormField

# Function: FormField()

> **FormField**<`TFieldValues`, `TName`>(`__namedParameters`): `Element`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `TFieldValues` *extends* `FieldValues` | `FieldValues` |
| `TName` *extends* `string` | `FieldPath`<`TFieldValues`> |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ControllerProps`<`TFieldValues`, `TName`> |

## Returns

`Element`

---

---
url: /api/ui/functions/FormItem.md
---
[@sqlrooms/ui](../index.md) / FormItem

# Function: FormItem()

> **FormItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLDivElement`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/FormLabel.md
---
[@sqlrooms/ui](../index.md) / FormLabel

# Function: FormLabel()

> **FormLabel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`LabelProps` & `RefAttributes`<`HTMLLabelElement`>, `"ref"`> & `RefAttributes`<`HTMLLabelElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/FormMessage.md
---
[@sqlrooms/ui](../index.md) / FormMessage

# Function: FormMessage()

> **FormMessage**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLParagraphElement`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/FunnelChart.md
---
[@sqlrooms/recharts](../index.md) / FunnelChart

# Function: FunnelChart()

> **FunnelChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/generateUniqueName.md
---
[@sqlrooms/utils](../index.md) / generateUniqueName

# Function: generateUniqueName()

> **generateUniqueName**(`name`, `usedNames`?): `string`

Generates a unique name by appending a numeric suffix if the name already exists.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `name` | `string` | The base name to make unique |
| `usedNames`? | `string`\[] | Optional array of existing names to check against |

## Returns

`string`

A unique name, potentially with a numeric suffix

## Example

```ts
generateUniqueName("table", ["table"]) // returns "table_1"
generateUniqueName("table_1", ["table_1"]) // returns "table_2"
```

---

---
url: /api/utils/functions/generateUniquePath.md
---
[@sqlrooms/utils](../index.md) / generateUniquePath

# Function: generateUniquePath()

> **generateUniquePath**(`filePath`, `existingPaths`): `string`

Generates a unique file path by appending a numeric suffix if the path already exists.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filePath` | `string` | The original file path |
| `existingPaths` | `string`\[] | Array of existing file paths to check against |

## Returns

`string`

A unique file path

## Example

```ts
generateUniquePath("file.txt", ["file.txt"]) // returns "file_1.txt"
```

---

---
url: /api/utils/functions/genRandomStr.md
---
[@sqlrooms/utils](../index.md) / genRandomStr

# Function: genRandomStr()

> **genRandomStr**(`length`, `seed`?): `string`

Generates a random string of specified length with optional seed

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `length` | `number` | The length of the random string to generate |
| `seed`? | `string` | Seed will be ignored. |

## Returns

`string`

Random string containing uppercase letters, lowercase letters, and numbers

## Example

```ts
const random = genRandomStr(10); // e.g., "aB3kF9mN2x"
```

---

---
url: /api/duckdb/functions/getArrowColumnTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / getArrowColumnTypeCategory

# Function: getArrowColumnTypeCategory()

> **getArrowColumnTypeCategory**(`type`): [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

This function is used to get the type category of a column from an Arrow table.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `DataType` | The Arrow DataType of the column. |

## Returns

[`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

The type category of the column.

---

---
url: /api/duckdb/functions/getColValAsNumber.md
---
[@sqlrooms/duckdb](../index.md) / getColValAsNumber

# Function: getColValAsNumber()

> **getColValAsNumber**(`res`, `column`, `index`): `number`

Extracts a numeric value from an Arrow Table at the specified column and row index.
Handles both column name and index-based access. Converts BigInt values to numbers.

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `res` | `Table` | `undefined` | The Arrow Table containing the data |
| `column` | `string` | `number` | `0` | The column name or index (0-based) to read from. Defaults to first column (0) |
| `index` | `number` | `0` | The row index (0-based) to read from. Defaults to first row (0) |

## Returns

`number`

The numeric value at the specified position, or NaN if the value is null/undefined

## Example

```ts
const value = getColValAsNumber(table, "amount", 0)
```

---

---
url: /api/monaco-editor/functions/getCssColor.md
---
[@sqlrooms/monaco-editor](../index.md) / getCssColor

# Function: getCssColor()

> **getCssColor**(`variableName`, `fallbackColor`): `string`

Safely gets a CSS variable and ensures it's in a format Monaco can use

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `variableName` | `string` | CSS variable name (e.g. '--background') |
| `fallbackColor` | `string` | Fallback color if the variable isn't found |

## Returns

`string`

A color string in a format Monaco can use (typically hex)

---

---
url: /api/duckdb/functions/getDuckDbTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / getDuckDbTypeCategory

# Function: getDuckDbTypeCategory()

> **getDuckDbTypeCategory**(`columnType`): `undefined` | [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

Get the category of a column type

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `columnType` | `string` | The type of the column |

## Returns

`undefined` | [`ColumnTypeCategory`](../type-aliases/ColumnTypeCategory.md)

The category of the column type

---

---
url: /api/utils/functions/getErrorMessageForDisplay.md
---
[@sqlrooms/utils](../index.md) / getErrorMessageForDisplay

# Function: getErrorMessageForDisplay()

> **getErrorMessageForDisplay**(`e`): `string`

Extracts and formats an error message for display, removing common prefixes and truncating at first newline

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `e` | `unknown` | Error object or any other value that can be converted to string |

## Returns

`string`

Cleaned up error message string

## Example

```ts
getErrorMessageForDisplay(new Error("Query failed: Error: Invalid syntax\nMore details...")); // "Invalid syntax"
```

---

---
url: /api/monaco-editor/functions/getMonospaceFont.md
---
[@sqlrooms/monaco-editor](../index.md) / getMonospaceFont

# Function: getMonospaceFont()

> **getMonospaceFont**(): `string`

Gets a monospace font family from CSS variables or falls back to a system monospace font stack

## Returns

`string`

Monospace font family string suitable for code editors

---

---
url: /api/duckdb/functions/getSqlErrorWithPointer.md
---
[@sqlrooms/duckdb](../index.md) / getSqlErrorWithPointer

# Function: getSqlErrorWithPointer()

> **getSqlErrorWithPointer**(`query`, `position`): `object`

Function given a query and position finds the line and column of the console.error();

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The query to parse |
| `position` | `number` | The position of the error |

## Returns

`object`

The line and column of the error

| Name | Type |
| ------ | ------ |
|  `line` | `number` |
|  `column` | `number` |
|  `lineText` | `string` |
|  `pointerLine` | `string` |
|  `formatted` | `string` |

---

---
url: /api/layout/functions/getVisibleMosaicLayoutPanels.md
---
[@sqlrooms/layout](../index.md) / getVisibleMosaicLayoutPanels

# Function: getVisibleMosaicLayoutPanels()

> **getVisibleMosaicLayoutPanels**(`root`): `string`\[]

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `root` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `DEFAULT_MOSAIC_LAYOUT.nodes` |

## Returns

`string`\[]

---

---
url: /api/monaco-editor/functions/hslToHex.md
---
[@sqlrooms/monaco-editor](../index.md) / hslToHex

# Function: hslToHex()

> **hslToHex**(`h`, `s`, `l`): `string`

Converts HSL color values to Hex color string

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `h` | `number` | Hue (0-360) |
| `s` | `number` | Saturation (0-100) |
| `l` | `number` | Lightness (0-100) |

## Returns

`string`

Hex color string (#RRGGBB)

---

---
url: /api/ui/functions/Input.md
---
[@sqlrooms/ui](../index.md) / Input

# Function: Input()

> **Input**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`InputHTMLAttributes`<`HTMLInputElement`>, `HTMLInputElement`>, `"ref"`> & `RefAttributes`<`HTMLInputElement`> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/isMacOS.md
---
[@sqlrooms/utils](../index.md) / isMacOS

# Function: isMacOS()

> **isMacOS**(): `boolean`

Function to detect if the user is on a Mac device

## Returns

`boolean`

boolean indicating if the user is on a Mac

---

---
url: /api/layout-config/functions/isMosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/layout/functions/isMosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-config/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-shell/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/room-store/functions/isMosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / isMosaicLayoutParent

# Function: isMosaicLayoutParent()

> **isMosaicLayoutParent**(`node`): `node is MosaicLayoutParent`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |

## Returns

`node is MosaicLayoutParent`

---

---
url: /api/duckdb/functions/isNumericDuckType.md
---
[@sqlrooms/duckdb](../index.md) / isNumericDuckType

# Function: isNumericDuckType()

> **isNumericDuckType**(`type`): `boolean`

Checks if a DuckDB type string represents a numeric type.
Includes INTEGER, DECIMAL, FLOAT, REAL, and DOUBLE types.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `type` | `string` | The DuckDB type string to check |

## Returns

`boolean`

True if the type is numeric, false otherwise

## Example

```ts
isNumericDuckType('INTEGER') // Returns true
isNumericDuckType('VARCHAR') // Returns false
```

---

---
url: /api/duckdb/functions/isQualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / isQualifiedTableName

# Function: isQualifiedTableName()

> **isQualifiedTableName**(`tableName`): `tableName is QualifiedTableName`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `tableName` | `string` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) |

## Returns

`tableName is QualifiedTableName`

---

---
url: /api/room-shell/functions/isRoomSliceWithInitialize.md
---
[@sqlrooms/room-shell](../index.md) / isRoomSliceWithInitialize

# Function: isRoomSliceWithInitialize()

> **isRoomSliceWithInitialize**(`slice`): `slice is RoomSlice & Required<Pick<RoomSlice, "initialize">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is RoomSlice & Required<Pick<RoomSlice, "initialize">>`

---

---
url: /api/room-store/functions/isRoomSliceWithInitialize.md
---
[@sqlrooms/room-store](../index.md) / isRoomSliceWithInitialize

# Function: isRoomSliceWithInitialize()

> **isRoomSliceWithInitialize**(`slice`): `slice is RoomSlice & Required<Pick<RoomSlice, "initialize">>`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `slice` | `unknown` |

## Returns

`slice is RoomSlice & Required<Pick<RoomSlice, "initialize">>`

---

---
url: /api/duckdb/functions/isSpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / isSpatialLoadFileOptions

# Function: isSpatialLoadFileOptions()

> **isSpatialLoadFileOptions**(`options`): `options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | The options to check |

## Returns

`options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

True if options are spatial load file options

---

---
url: /api/room-config/functions/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / isSpatialLoadFileOptions

# Function: isSpatialLoadFileOptions()

> **isSpatialLoadFileOptions**(`options`): `options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | The options to check |

## Returns

`options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

True if options are spatial load file options

---

---
url: /api/room-shell/functions/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / isSpatialLoadFileOptions

# Function: isSpatialLoadFileOptions()

> **isSpatialLoadFileOptions**(`options`): `options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | The options to check |

## Returns

`options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

True if options are spatial load file options

---

---
url: /api/room-store/functions/isSpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / isSpatialLoadFileOptions

# Function: isSpatialLoadFileOptions()

> **isSpatialLoadFileOptions**(`options`): `options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

Type guard to check if options are spatial load file options

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | The options to check |

## Returns

`options is objectOutputType<{ schema: ZodOptional<ZodString>; select: ZodOptional<ZodArray<ZodString, "many">>; where: ZodOptional<ZodString>; view: ZodOptional<ZodBoolean>; temp: ZodOptional<ZodBoolean>; replace: ZodOptional<ZodBoolean> } & { options: ZodOptional<ZodUnion<[ZodArray<ZodString, "many">, ZodString, ZodRecord<ZodString, ZodUnknown>]>> } & { method: ZodLiteral<"st_read"> }, ZodUnknown, "strip">`

True if options are spatial load file options

---

---
url: /api/duckdb/functions/isWasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / isWasmDuckDbConnector

# Function: isWasmDuckDbConnector()

> **isWasmDuckDbConnector**(`connector`): `connector is WasmDuckDbConnector`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `connector` | [`DuckDbConnector`](../interfaces/DuckDbConnector.md) |

## Returns

`connector is WasmDuckDbConnector`

---

---
url: /api/motherduck/functions/isWasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / isWasmMotherDuckDbConnector

# Function: isWasmMotherDuckDbConnector()

> **isWasmMotherDuckDbConnector**(`connector`): `connector is WasmMotherDuckDbConnector`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `connector` | `DuckDbConnector` |

## Returns

`connector is WasmMotherDuckDbConnector`

---

---
url: /api/monaco-editor/functions/JsonMonacoEditor.md
---
[@sqlrooms/monaco-editor](../index.md) / JsonMonacoEditor

# Function: JsonMonacoEditor()

> **JsonMonacoEditor**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A Monaco editor for editing JSON with schema validation

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`JsonMonacoEditorProps`](../interfaces/JsonMonacoEditorProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/functions/Label.md
---
[@sqlrooms/recharts](../index.md) / Label

# Function: Label()

> **Label**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`LabelProps`](../type-aliases/LabelProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/Label.md
---
[@sqlrooms/ui](../index.md) / Label

# Function: Label()

> **Label**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`LabelProps` & `RefAttributes`<`HTMLLabelElement`>, `"ref"`> & `VariantProps`<(`props`?) => `string`> & `RefAttributes`<`HTMLLabelElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/LabelList.md
---
[@sqlrooms/recharts](../index.md) / LabelList

# Function: LabelList()

> **LabelList**<`T`>(`__namedParameters`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`LabelListProps`](../type-aliases/LabelListProps.md)<`T`> |

## Returns

`Element`

---

---
url: /api/recharts/functions/Layer.md
---
[@sqlrooms/recharts](../index.md) / Layer

# Function: Layer()

> **Layer**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SVGAttributes`<`SVGGElement`> & `LayerProps` & `RefAttributes`<`SVGGElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/LineChart.md
---
[@sqlrooms/recharts](../index.md) / LineChart

# Function: LineChart()

> **LineChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/s3-browser/functions/listFilesAndDirectoriesWithPrefix.md
---
[@sqlrooms/s3-browser](../index.md) / listFilesAndDirectoriesWithPrefix

# Function: listFilesAndDirectoriesWithPrefix()

> **listFilesAndDirectoriesWithPrefix**(`S3`, `bucket`, `prefix`?): `Promise`<({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified`: `Date`; `size`: `number`; `contentType`: `string`; })\[]>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `S3` | `S3Client` |
| `bucket` | `string` |
| `prefix`? | `string` |

## Returns

`Promise`<({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified`: `Date`; `size`: `number`; `contentType`: `string`; })\[]>

---

---
url: /api/duckdb/functions/load.md
---
[@sqlrooms/duckdb](../index.md) / load

# Function: load()

> **load**(`method`, `tableName`, `fileName`, `options`, `defaults`): `string`

Generic function to load data from a file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `method` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"` | The DuckDB read method to use (e.g., 'read\_csv', 'read\_json') |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the input file |
| `options` | `objectOutputType` | Load options including select, where, view, temp, replace and file-specific options |
| `defaults` | `Record`<`string`, `unknown`> | Default options to merge with provided options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadCSV.md
---
[@sqlrooms/duckdb](../index.md) / loadCSV

# Function: loadCSV()

> **loadCSV**(`tableName`, `fileName`, `options`?): `string`

Load data from a CSV file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the CSV file |
| `options`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadJSON.md
---
[@sqlrooms/duckdb](../index.md) / loadJSON

# Function: loadJSON()

> **loadJSON**(`tableName`, `fileName`, `options`?): `string`

Load data from a JSON file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the JSON file |
| `options`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadObjects.md
---
[@sqlrooms/duckdb](../index.md) / loadObjects

# Function: loadObjects()

> **loadObjects**(`tableName`, `data`, `options`): `string`

Load JavaScript objects directly into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `options` | `objectOutputType` | Load options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadParquet.md
---
[@sqlrooms/duckdb](../index.md) / loadParquet

# Function: loadParquet()

> **loadParquet**(`tableName`, `fileName`, `options`?): `string`

Load data from a Parquet file into a DuckDB table

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the Parquet file |
| `options`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/loadSpatial.md
---
[@sqlrooms/duckdb](../index.md) / loadSpatial

# Function: loadSpatial()

> **loadSpatial**(`tableName`, `fileName`, `options`): `string`

Load geometry data within a spatial file format.
This method requires that the DuckDB spatial extension is loaded.
Supports GeoJSON, TopoJSON, and other common spatial formats.
For TopoJSON, set the layer option to indicate the feature to extract.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Name of the table to create |
| `fileName` | `string` | Path to the spatial data file |
| `options` | `objectOutputType` | Load options including spatial-specific options |

## Returns

`string`

SQL query string to create the table

---

---
url: /api/duckdb/functions/makeLimitQuery.md
---
[@sqlrooms/duckdb](../index.md) / makeLimitQuery

# Function: makeLimitQuery()

> **makeLimitQuery**(`query`, `options`): `string`

Make a limit query from a query and a limit.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The SELECT query to make limited. |
| `options` | { `limit`: `number`; `offset`: `number`; `sanitize`: `boolean`; } | The options for the limit query. |
| `options.limit`? | `number` | The number of rows to limit the query to. |
| `options.offset`? | `number` | The number of rows to offset the query by. |
| `options.sanitize`? | `boolean` | Whether to sanitize the query. |

## Returns

`string`

The limited query.

---

---
url: /api/layout/functions/makeMosaicStack.md
---
[@sqlrooms/layout](../index.md) / makeMosaicStack

# Function: makeMosaicStack()

> **makeMosaicStack**(`direction`, `children`): `null` | `MosaicNode`<`string`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `direction` | `MosaicDirection` |
| `children` | `object`\[] |

## Returns

`null` | `MosaicNode`<`string`>

---

---
url: /api/data-table/functions/makePagedQuery.md
---
[@sqlrooms/data-table](../index.md) / makePagedQuery

# Function: makePagedQuery()

> **makePagedQuery**(`query`, `sorting`, `pagination`): `string`

Make a paged query from a query and pagination/sorting state.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | The query to make paged. |
| `sorting` | `SortingState` | The sorting state. |
| `pagination` | `PaginationState` | The pagination state. |

## Returns

`string`

The paged query.

---

---
url: /api/duckdb/functions/makeQualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / makeQualifiedTableName

# Function: makeQualifiedTableName()

> **makeQualifiedTableName**(`__namedParameters`): `object`

Get a qualified table name from a table name, schema, and database.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`QualifiedTableName`](../type-aliases/QualifiedTableName.md) |

## Returns

`object`

The qualified table name.

| Name | Type |
| ------ | ------ |
|  `database` | `undefined` | `string` |
|  `schema` | `undefined` | `string` |
|  `table` | `string` |
|  `toString` | () => `string` |

---

---
url: /api/utils/functions/memoizeOnce.md
---
[@sqlrooms/utils](../index.md) / memoizeOnce

# Function: memoizeOnce()

> **memoizeOnce**<`TArgs`, `TReturn`>(`fn`): (...`args`) => `TReturn`

Creates a memoized version of a function that caches only the last result.
The cache is invalidated when any of the arguments change.

This is useful for expensive operations that are likely to be called
multiple times with the same arguments, like database queries or API calls.

## Type Parameters

| Type Parameter |
| ------ |
| `TArgs` *extends* readonly `unknown`\[] |
| `TReturn` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fn` | (...`args`) => `TReturn` | The function to memoize |

## Returns

`Function`

A memoized version of the function

### Parameters

| Parameter | Type |
| ------ | ------ |
| ...`args` | `TArgs` |

### Returns

`TReturn`

## Example

```ts
const expensiveQuery = async (userId: string, limit: number) => {
  return await database.query(`SELECT * FROM users WHERE id = ? LIMIT ?`, [userId, limit]);
};

const memoizedQuery = memoizeOnce(expensiveQuery);

// First call executes the function
const result1 = await memoizedQuery("123", 10);

// Second call with same arguments returns cached result
const result2 = await memoizedQuery("123", 10); // Uses cache

// Call with different arguments invalidates cache and executes function
const result3 = await memoizedQuery("456", 10); // Executes function
```

---

---
url: /api/ui/functions/Menubar.md
---
[@sqlrooms/ui](../index.md) / Menubar

# Function: Menubar()

> **Menubar**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarCheckboxItem.md
---
[@sqlrooms/ui](../index.md) / MenubarCheckboxItem

# Function: MenubarCheckboxItem()

> **MenubarCheckboxItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarCheckboxItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarContent.md
---
[@sqlrooms/ui](../index.md) / MenubarContent

# Function: MenubarContent()

> **MenubarContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarGroup.md
---
[@sqlrooms/ui](../index.md) / MenubarGroup

# Function: MenubarGroup()

> **MenubarGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarItem.md
---
[@sqlrooms/ui](../index.md) / MenubarItem

# Function: MenubarItem()

> **MenubarItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarLabel.md
---
[@sqlrooms/ui](../index.md) / MenubarLabel

# Function: MenubarLabel()

> **MenubarLabel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarMenu.md
---
[@sqlrooms/ui](../index.md) / MenubarMenu

# Function: MenubarMenu()

> **MenubarMenu**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarMenuProps` & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarPortal.md
---
[@sqlrooms/ui](../index.md) / MenubarPortal

# Function: MenubarPortal()

> **MenubarPortal**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarPortalProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarRadioGroup.md
---
[@sqlrooms/ui](../index.md) / MenubarRadioGroup

# Function: MenubarRadioGroup()

> **MenubarRadioGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarRadioGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarRadioItem.md
---
[@sqlrooms/ui](../index.md) / MenubarRadioItem

# Function: MenubarRadioItem()

> **MenubarRadioItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarRadioItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarSeparator.md
---
[@sqlrooms/ui](../index.md) / MenubarSeparator

# Function: MenubarSeparator()

> **MenubarSeparator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarShortcut.md
---
[@sqlrooms/ui](../index.md) / MenubarShortcut

# Function: MenubarShortcut()

> **MenubarShortcut**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLSpanElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarSub.md
---
[@sqlrooms/ui](../index.md) / MenubarSub

# Function: MenubarSub()

> **MenubarSub**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `MenubarSubProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/MenubarSubContent.md
---
[@sqlrooms/ui](../index.md) / MenubarSubContent

# Function: MenubarSubContent()

> **MenubarSubContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarSubContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarSubTrigger.md
---
[@sqlrooms/ui](../index.md) / MenubarSubTrigger

# Function: MenubarSubTrigger()

> **MenubarSubTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarSubTriggerProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/MenubarTrigger.md
---
[@sqlrooms/ui](../index.md) / MenubarTrigger

# Function: MenubarTrigger()

> **MenubarTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`MenubarTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ai-core/functions/ModelSelector.md
---
[@sqlrooms/ai-core](../index.md) / ModelSelector

# Function: ModelSelector()

> **ModelSelector**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ModelSelectorProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/ModelSelector.md
---
[@sqlrooms/ai](../index.md) / ModelSelector

# Function: ModelSelector()

> **ModelSelector**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ModelSelectorProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/monaco-editor/functions/MonacoEditor.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoEditor

# Function: MonacoEditor()

> **MonacoEditor**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A wrapper around the Monaco Editor component

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`MonacoEditorProps`](../interfaces/MonacoEditorProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/layout/functions/MosaicLayout.md
---
[@sqlrooms/layout](../index.md) / MosaicLayout

# Function: MosaicLayout()

> **MosaicLayout**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `MosaicProps`<`string`> & `object` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/utils/functions/opacifyHex.md
---
[@sqlrooms/utils](../index.md) / opacifyHex

# Function: opacifyHex()

> **opacifyHex**(`hexCode`, `opacity`): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `hexCode` | `string` |
| `opacity` | `number` |

## Returns

`string`

---

---
url: /api/ui/functions/Pagination.md
---
[@sqlrooms/ui](../index.md) / Pagination

# Function: Pagination()

> **Pagination**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationContent.md
---
[@sqlrooms/ui](../index.md) / PaginationContent

# Function: PaginationContent()

> **PaginationContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`HTMLAttributes`<`HTMLUListElement`>, `HTMLUListElement`>, `"ref"`> & `RefAttributes`<`HTMLUListElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/PaginationEllipsis.md
---
[@sqlrooms/ui](../index.md) / PaginationEllipsis

# Function: PaginationEllipsis()

> **PaginationEllipsis**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `DetailedHTMLProps`<`HTMLAttributes`<`HTMLSpanElement`>> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationItem.md
---
[@sqlrooms/ui](../index.md) / PaginationItem

# Function: PaginationItem()

> **PaginationItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DetailedHTMLProps`<`LiHTMLAttributes`<`HTMLLIElement`>, `HTMLLIElement`>, `"ref"`> & `RefAttributes`<`HTMLLIElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/PaginationLink.md
---
[@sqlrooms/ui](../index.md) / PaginationLink

# Function: PaginationLink()

> **PaginationLink**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `PaginationLinkProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationNext.md
---
[@sqlrooms/ui](../index.md) / PaginationNext

# Function: PaginationNext()

> **PaginationNext**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `object` & `Pick`<[`ButtonProps`](../interfaces/ButtonProps.md), `"size"`> & `ClassAttributes`<`HTMLAnchorElement`> & `AnchorHTMLAttributes`<`HTMLAnchorElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/PaginationPrevious.md
---
[@sqlrooms/ui](../index.md) / PaginationPrevious

# Function: PaginationPrevious()

> **PaginationPrevious**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `object` & `Pick`<[`ButtonProps`](../interfaces/ButtonProps.md), `"size"`> & `ClassAttributes`<`HTMLAnchorElement`> & `AnchorHTMLAttributes`<`HTMLAnchorElement`> |

## Returns

`Element`

---

---
url: /api/room-shell/functions/PanelHeaderButton.md
---
[@sqlrooms/room-shell](../index.md) / PanelHeaderButton

# Function: PanelHeaderButton()

> **PanelHeaderButton**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `label`: `string`; `icon`: `ReactElement`; `isPinned`: `boolean`; `onClick`: () => `void`; } |
| `props.label` | `string` |
| `props.icon` | `ReactElement` |
| `props.isPinned`? | `boolean` |
| `props.onClick` | () => `void` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/recharts/namespaces/Label/functions/parseViewBox.md
---
[@sqlrooms/recharts](../../../index.md) / [Label](../index.md) / parseViewBox

# Function: parseViewBox()

> **parseViewBox**(`props`): `ViewBox`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `any` |

## Returns

`ViewBox`

---

---
url: /api/recharts/functions/PieChart.md
---
[@sqlrooms/recharts](../index.md) / PieChart

# Function: PieChart()

> **PieChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/PolarGrid.md
---
[@sqlrooms/recharts](../index.md) / PolarGrid

# Function: PolarGrid()

> **PolarGrid**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`PolarGridProps`](../type-aliases/PolarGridProps.md) |

## Returns

`Element`

---

---
url: /api/recharts/functions/Polygon.md
---
[@sqlrooms/recharts](../index.md) / Polygon

# Function: Polygon()

> **Polygon**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`PolygonProps`](../type-aliases/PolygonProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Popover.md
---
[@sqlrooms/ui](../index.md) / Popover

# Function: Popover()

> **Popover**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PopoverProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/PopoverAnchor.md
---
[@sqlrooms/ui](../index.md) / PopoverAnchor

# Function: PopoverAnchor()

> **PopoverAnchor**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PopoverAnchorProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/PopoverContent.md
---
[@sqlrooms/ui](../index.md) / PopoverContent

# Function: PopoverContent()

> **PopoverContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`PopoverContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/PopoverTrigger.md
---
[@sqlrooms/ui](../index.md) / PopoverTrigger

# Function: PopoverTrigger()

> **PopoverTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PopoverTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/postData.md
---
[@sqlrooms/utils](../index.md) / postData

# Function: postData()

> **postData**(`params`): `Promise`<`any`>

Posts data to a specified URL endpoint using fetch API

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `params` | { `url`: `string`; `data`: `Record`<`string`, `unknown`>; } | The parameters for the POST request |
| `params.url` | `string` | The URL to send the POST request to |
| `params.data`? | `Record`<`string`, `unknown`> | Optional data to be sent in the request body |

## Returns

`Promise`<`any`>

The parsed JSON response from the server

## Throws

If the response is not ok, throws an error with the status message or error details

---

---
url: /api/ui/functions/Progress.md
---
[@sqlrooms/ui](../index.md) / Progress

# Function: Progress()

> **Progress**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ProgressProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ProgressModal.md
---
[@sqlrooms/ui](../index.md) / ProgressModal

# Function: ProgressModal()

> **ProgressModal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `isOpen`: `boolean`; `title`: `string`; `loadingStage`: `string`; `progress`: `number`; `indeterminate`: `boolean`; } |
| `props.className`? | `string` |
| `props.isOpen` | `boolean` |
| `props.title`? | `string` |
| `props.loadingStage`? | `string` |
| `props.progress`? | `number` |
| `props.indeterminate`? | `boolean` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai-core/functions/QueryControls.md
---
[@sqlrooms/ai-core](../index.md) / QueryControls

# Function: QueryControls()

> **QueryControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `QueryControlsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/QueryControls.md
---
[@sqlrooms/ai](../index.md) / QueryControls

# Function: QueryControls()

> **QueryControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `QueryControlsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/data-table/functions/QueryDataTable.md
---
[@sqlrooms/data-table](../index.md) / QueryDataTable

# Function: QueryDataTable()

> **QueryDataTable**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `QueryDataTableProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/data-table/functions/QueryDataTableActionsMenu.md
---
[@sqlrooms/data-table](../index.md) / QueryDataTableActionsMenu

# Function: QueryDataTableActionsMenu()

> **QueryDataTableActionsMenu**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `query`: `string`; } |
| `props.query` | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/QueryEditorPanel.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanel

# Function: QueryEditorPanel()

> **QueryEditorPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`QueryEditorPanelProps`](../interfaces/QueryEditorPanelProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/QueryEditorPanelActions.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelActions

# Function: QueryEditorPanelActions()

> **QueryEditorPanelActions**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/QueryEditorPanelEditor.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelEditor

# Function: QueryEditorPanelEditor()

> **QueryEditorPanelEditor**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `queryId`: `string`; } |
| `props.className`? | `string` |
| `props.queryId` | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/QueryEditorPanelTabsList.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelTabsList

# Function: QueryEditorPanelTabsList()

> **QueryEditorPanelTabsList**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/QueryResultPanel.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResultPanel

# Function: QueryResultPanel()

> **QueryResultPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`QueryResultPanelProps`](../interfaces/QueryResultPanelProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ai/functions/QueryToolResult.md
---
[@sqlrooms/ai](../index.md) / QueryToolResult

# Function: QueryToolResult()

> **QueryToolResult**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `QueryToolResultProps` |

## Returns

`Element`

---

---
url: /api/recharts/functions/RadarChart.md
---
[@sqlrooms/recharts](../index.md) / RadarChart

# Function: RadarChart()

> **RadarChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/RadialBarChart.md
---
[@sqlrooms/recharts](../index.md) / RadialBarChart

# Function: RadialBarChart()

> **RadialBarChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/RadioGroup.md
---
[@sqlrooms/ui](../index.md) / RadioGroup

# Function: RadioGroup()

> **RadioGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`RadioGroupProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/RadioGroupItem.md
---
[@sqlrooms/ui](../index.md) / RadioGroupItem

# Function: RadioGroupItem()

> **RadioGroupItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`RadioGroupItemProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Rectangle.md
---
[@sqlrooms/recharts](../index.md) / Rectangle

# Function: Rectangle()

> **Rectangle**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`RectangleProps`](../type-aliases/RectangleProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/reducer.md
---
[@sqlrooms/ui](../index.md) / reducer

# Function: reducer()

> **reducer**(`state`, `action`): `State`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `State` |
| `action` | `Action` |

## Returns

`State`

---

---
url: /api/layout/functions/removeMosaicNodeByKey.md
---
[@sqlrooms/layout](../index.md) / removeMosaicNodeByKey

# Function: removeMosaicNodeByKey()

> **removeMosaicNodeByKey**(`root`, `key`): { `success`: `true`; `nextTree`: `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); } | { `success`: `false`; }

## Parameters

| Parameter | Type |
| ------ | ------ |
| `root` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) |
| `key` | `string` |

## Returns

{ `success`: `true`; `nextTree`: `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md); } | { `success`: `false`; }

---

---
url: /api/recharts/namespaces/Label/functions/renderCallByParent.md
---
[@sqlrooms/recharts](../../../index.md) / [Label](../index.md) / renderCallByParent

# Function: renderCallByParent()

> **renderCallByParent**(`parentProps`, `viewBox`?, `checkPropsLabel`?): `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]

## Parameters

| Parameter | Type |
| ------ | ------ |
| `parentProps` | { `children`: `ReactNode`; `label`: `unknown`; } |
| `parentProps.children`? | `ReactNode` |
| `parentProps.label`? | `unknown` |
| `viewBox`? | `ViewBox` |
| `checkPropsLabel`? | `boolean` |

## Returns

`ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]

---

---
url: /api/recharts/namespaces/LabelList/functions/renderCallByParent.md
---
[@sqlrooms/recharts](../../../index.md) / [LabelList](../index.md) / renderCallByParent

# Function: renderCallByParent()

> **renderCallByParent**<`T`>(`parentProps`, `data`, `checkPropsLabel`?): `Element`\[]

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `parentProps` | { `children`: `ReactNode`; `label`: `unknown`; } |
| `parentProps.children`? | `ReactNode` |
| `parentProps.label`? | `unknown` |
| `data`? | `T`\[] |
| `checkPropsLabel`? | `boolean` |

## Returns

`Element`\[]

---

---
url: /api/ui/functions/ResizableHandle.md
---
[@sqlrooms/ui](../index.md) / ResizableHandle

# Function: ResizableHandle()

> **ResizableHandle**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`HTMLAttributes`\<keyof `HTMLElementTagNameMap`>, `"id"` | `"onFocus"` | `"onBlur"` | `"onClick"` | `"onPointerDown"` | `"onPointerUp"`> & `object` & `object` & `object` |

## Returns

`Element`

---

---
url: /api/ui/functions/ResizablePanel.md
---
[@sqlrooms/ui](../index.md) / ResizablePanel

# Function: ResizablePanel()

> **ResizablePanel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`HTMLAttributes`<`HTMLDivElement` | `HTMLElement` | `HTMLObjectElement` | `HTMLMapElement` | `HTMLAnchorElement` | `HTMLButtonElement` | `HTMLFormElement` | `HTMLHeadingElement` | `HTMLImageElement` | `HTMLInputElement` | `HTMLLabelElement` | `HTMLLIElement` | `HTMLOListElement` | `HTMLParagraphElement` | `HTMLSelectElement` | `HTMLSpanElement` | `HTMLUListElement` | `HTMLAreaElement` | `HTMLAudioElement` | `HTMLBaseElement` | `HTMLQuoteElement` | `HTMLBodyElement` | `HTMLBRElement` | `HTMLCanvasElement` | `HTMLTableColElement` | `HTMLDataElement` | `HTMLDataListElement` | `HTMLModElement` | `HTMLDetailsElement` | `HTMLDialogElement` | `HTMLDListElement` | `HTMLEmbedElement` | `HTMLFieldSetElement` | `HTMLHeadElement` | `HTMLHRElement` | `HTMLHtmlElement` | `HTMLIFrameElement` | `HTMLLegendElement` | `HTMLLinkElement` | `HTMLMetaElement` | `HTMLMeterElement` | `HTMLOptGroupElement` | `HTMLOptionElement` | `HTMLOutputElement` | `HTMLPreElement` | `HTMLProgressElement` | `HTMLSlotElement` | `HTMLScriptElement` | `HTMLSourceElement` | `HTMLStyleElement` | `HTMLTableElement` | `HTMLTemplateElement` | `HTMLTableSectionElement` | `HTMLTableCellElement` | `HTMLTextAreaElement` | `HTMLTimeElement` | `HTMLTitleElement` | `HTMLTableRowElement` | `HTMLTrackElement` | `HTMLVideoElement` | `HTMLTableCaptionElement` | `HTMLMenuElement` | `HTMLPictureElement`>, `"id"` | `"onResize"`> & `object` & `object` & `RefAttributes`<`ImperativePanelHandle`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ResizablePanelGroup.md
---
[@sqlrooms/ui](../index.md) / ResizablePanelGroup

# Function: ResizablePanelGroup()

> **ResizablePanelGroup**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `Omit`<`HTMLAttributes`\<keyof `HTMLElementTagNameMap`>, `"id"`> & `object` & `object` & `RefAttributes`<`ImperativePanelGroupHandle`> |

## Returns

`Element`

---

---
url: /api/recharts/functions/ResponsiveContainer.md
---
[@sqlrooms/recharts](../index.md) / ResponsiveContainer

# Function: ResponsiveContainer()

> **ResponsiveContainer**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`ResponsiveContainerProps`](../interfaces/ResponsiveContainerProps.md) & `RefAttributes`<`HTMLDivElement` | { `current`: `HTMLDivElement`; }> |

## Returns

`ReactNode`

---

---
url: /api/room-shell/functions/RoomPanel.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanel

# Function: RoomPanel()

> **RoomPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/RoomPanelHeader.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanelHeader

# Function: RoomPanelHeader()

> **RoomPanelHeader**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `panelKey`: `string`; `showHeader`: `boolean`; `children`: `ReactNode`; } |
| `props.panelKey` | `string` |
| `props.showHeader`? | `boolean` |
| `props.children`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/RoomShell.md
---
[@sqlrooms/room-shell](../index.md) / RoomShell

# Function: RoomShell()

> **RoomShell**<`PC`>(`__namedParameters`): `Element`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `PropsWithChildren`<{ `className`: `string`; `roomStore`: [`RoomStore`](../type-aliases/RoomStore.md)<`PC`>; }> |

## Returns

`Element`

---

---
url: /api/room-shell/functions/RoomShellSidebarButton.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSidebarButton

# Function: RoomShellSidebarButton()

> **RoomShellSidebarButton**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `roomPanelType`: `string`; } |
| `props.roomPanelType` | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/RoomShellSidebarButtons.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSidebarButtons

# Function: RoomShellSidebarButtons()

> **RoomShellSidebarButtons**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/RoomStateContext.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateContext

# Function: RoomStateContext()

> **RoomStateContext**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ProviderProps` |

## Returns

`ReactNode`

---

---
url: /api/room-store/functions/RoomStateContext.md
---
[@sqlrooms/room-store](../index.md) / RoomStateContext

# Function: RoomStateContext()

> **RoomStateContext**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ProviderProps` |

## Returns

`ReactNode`

---

---
url: /api/room-shell/functions/RoomStateProvider.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateProvider

# Function: RoomStateProvider()

> **RoomStateProvider**<`PC`>(`__namedParameters`): `ReactNode`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`RoomStateProviderProps`](../type-aliases/RoomStateProviderProps.md)<`PC`> |

## Returns

`ReactNode`

---

---
url: /api/room-store/functions/RoomStateProvider.md
---
[@sqlrooms/room-store](../index.md) / RoomStateProvider

# Function: RoomStateProvider()

> **RoomStateProvider**<`PC`>(`__namedParameters`): `ReactNode`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`RoomStateProviderProps`](../type-aliases/RoomStateProviderProps.md)<`PC`> |

## Returns

`ReactNode`

---

---
url: /api/s3-browser/functions/S3FileBrowser.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileBrowser

# Function: S3FileBrowser()

> **S3FileBrowser**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A file browser component for navigating and selecting files from an S3-like storage.

This component provides a familiar file explorer interface with features like:

* Directory navigation with breadcrumbs
* File and directory listing
* Multiple file selection
* File metadata display (size, type, last modified)

![S3 File Browser Interface](https://github.com/user-attachments/assets/dd79fbb9-c487-4050-96ef-81cff39930d3)

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | { `files`: ({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified`: `Date`; `size`: `number`; `contentType`: `string`; })\[]; `selectedFiles`: `string`\[]; `selectedDirectory`: `string`; `onCanConfirmChange`: (`canConfirm`) => `void`; `onChangeSelectedDirectory`: (`directory`) => `void`; `onChangeSelectedFiles`: (`files`) => `void`; } | The component props |
| `props.files`? | ({ `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified`: `Date`; `size`: `number`; `contentType`: `string`; })\[] | Array of files and directories to display |
| `props.selectedFiles` | `string`\[] | Array of currently selected file keys |
| `props.selectedDirectory` | `string` | Current directory path (empty string for root) |
| `props.onCanConfirmChange` | (`canConfirm`) => `void` | Callback fired when selection state changes |
| `props.onChangeSelectedDirectory` | (`directory`) => `void` | Callback fired when directory navigation occurs |
| `props.onChangeSelectedFiles` | (`files`) => `void` | Callback fired when file selection changes |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
const [selectedDirectory, setSelectedDirectory] = useState('');

return (
  <S3FileBrowser
    files={[
      { key: 'documents', isDirectory: true },
      {
        key: 'example.txt',
        isDirectory: false,
        size: 1024,
        contentType: 'text/plain',
        lastModified: new Date()
      }
    ]}
    selectedFiles={selectedFiles}
    selectedDirectory={selectedDirectory}
    onCanConfirmChange={(canConfirm) => console.log('Can confirm:', canConfirm)}
    onChangeSelectedDirectory={setSelectedDirectory}
    onChangeSelectedFiles={setSelectedFiles}
  />
);
```

---

---
url: /api/utils/functions/safeJsonParse.md
---
[@sqlrooms/utils](../index.md) / safeJsonParse

# Function: safeJsonParse()

> **safeJsonParse**<`T`>(`json`): `undefined` | `T`

Parse a JSON string and return the parsed object.
If the string is not valid JSON, return undefined.

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `json` | `undefined` | `null` | `string` | The JSON string to parse. |

## Returns

`undefined` | `T`

The parsed object or undefined if the string is not valid JSON.

---

---
url: /api/duckdb/functions/sanitizeQuery.md
---
[@sqlrooms/duckdb](../index.md) / sanitizeQuery

# Function: sanitizeQuery()

> **sanitizeQuery**(`query`): `string`

Sanitizes a SQL query by removing trailing semicolons, comments, and normalizing whitespace

## Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

## Returns

`string`

---

---
url: /api/recharts/functions/ScatterChart.md
---
[@sqlrooms/recharts](../index.md) / ScatterChart

# Function: ScatterChart()

> **ScatterChart**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `CategoricalChartProps` & `RefAttributes`<{ `eventEmitterSymbol`: `Symbol`; `clipPathId`: `string`; `accessibilityManager`: `AccessibilityManager`; `throttleTriggeredAfterMouseMove`: `any`; `container`: `HTMLElement`; `componentDidMount`: `void`; `displayDefaultTooltip`: `void`; `getSnapshotBeforeUpdate`: `null`; `componentDidUpdate`: `void`; `componentWillUnmount`: `void`; `getTooltipEventType`: `TooltipEventType`; `getMouseInfo`: { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `xValue`: `any`; `yValue`: `any`; `chartX`: `number`; `chartY`: `number`; } | { `activeTooltipIndex`: `number`; `activeLabel`: `any`; `activePayload`: `any`\[]; `activeCoordinate`: `ChartCoordinate`; `chartX`: `number`; `chartY`: `number`; }; `inRange`: `any`; `parseEventsOfWrapper`: `any`; `addListener`: `void`; `removeListener`: `void`; `handleLegendBBoxUpdate`: (`box`) => `void`; `handleReceiveSyncEvent`: (`cId`, `data`, `emitter`) => `void`; `handleBrushChange`: (`__namedParameters`) => `void`; `handleMouseEnter`: (`e`) => `void`; `triggeredAfterMouseMove`: (`e`) => `any`; `handleItemMouseEnter`: (`el`) => `void`; `handleItemMouseLeave`: () => `void`; `handleMouseMove`: (`e`) => `void`; `handleMouseLeave`: (`e`) => `void`; `handleOuterEvent`: (`e`) => `void`; `handleClick`: (`e`) => `void`; `handleMouseDown`: (`e`) => `void`; `handleMouseUp`: (`e`) => `void`; `handleTouchMove`: (`e`) => `void`; `handleTouchStart`: (`e`) => `void`; `handleTouchEnd`: (`e`) => `void`; `handleDoubleClick`: (`e`) => `void`; `handleContextMenu`: (`e`) => `void`; `triggerSyncEvent`: (`data`) => `void`; `applySyncEvent`: (`data`) => `void`; `filterFormatItem`: `any`; `renderCursor`: (`element`) => `Element`; `renderPolarAxis`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderPolarGrid`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderLegend`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderTooltip`: () => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderBrush`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderReferenceElement`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderActivePoints`: (`__namedParameters`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>\[]; `renderGraphicChild`: (`element`, `displayName`, `index`) => `any`\[]; `renderCustomized`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `renderClipPath`: `Element`; `getXScales`: {}; `getYScales`: {}; `getXScaleByAxisId`: `Function` | `ScaleType`; `getYScaleByAxisId`: `Function` | `ScaleType`; `getItemByXY`: { `graphicalItem`: `any`; `payload`: `any`; }; `renderMap`: { `CartesianGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `ReferenceArea`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceLine`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `ReferenceDot`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `XAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `YAxis`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Brush`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `Bar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Line`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Area`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Radar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `RadialBar`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Scatter`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Pie`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Funnel`: { `handler`: (`element`, `displayName`, `index`) => `any`\[]; }; `Tooltip`: { `handler`: (`element`) => `Element`; `once`: `boolean`; }; `PolarGrid`: { `handler`: (`element`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; `once`: `boolean`; }; `PolarAngleAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `PolarRadiusAxis`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; `Customized`: { `handler`: (`element`, `displayName`, `index`) => `ReactElement`<`any`, `string` | `JSXElementConstructor`<`any`>>; }; }; `render`: `Element`; `context`: `unknown`; `setState`: `void`; `forceUpdate`: `void`; `props`: `Readonly`<`CategoricalChartProps`>; `state`: `Readonly`<`CategoricalChartState`>; `refs`: {}; `shouldComponentUpdate`: `boolean`; `componentDidCatch`: `void`; `componentWillMount`: `void`; `UNSAFE_componentWillMount`: `void`; `componentWillReceiveProps`: `void`; `UNSAFE_componentWillReceiveProps`: `void`; `componentWillUpdate`: `void`; `UNSAFE_componentWillUpdate`: `void`; }> |

## Returns

`ReactNode`

---

---
url: /api/schema-tree/functions/SchemaTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / SchemaTreeNode

# Function: SchemaTreeNode()

> **SchemaTreeNode**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `nodeObject`: `SchemaNodeObject`; `additionalMenuItems`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.nodeObject` | `SchemaNodeObject` |
| `props.additionalMenuItems`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ScrollArea.md
---
[@sqlrooms/ui](../index.md) / ScrollArea

# Function: ScrollArea()

> **ScrollArea**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ScrollAreaProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ScrollBar.md
---
[@sqlrooms/ui](../index.md) / ScrollBar

# Function: ScrollBar()

> **ScrollBar**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ScrollAreaScrollbarProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Sector.md
---
[@sqlrooms/recharts](../index.md) / Sector

# Function: Sector()

> **Sector**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`SectorProps`](../type-aliases/SectorProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Select.md
---
[@sqlrooms/ui](../index.md) / Select

# Function: Select()

> **Select**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SelectProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/SelectContent.md
---
[@sqlrooms/ui](../index.md) / SelectContent

# Function: SelectContent()

> **SelectContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectGroup.md
---
[@sqlrooms/ui](../index.md) / SelectGroup

# Function: SelectGroup()

> **SelectGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SelectGroupProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectItem.md
---
[@sqlrooms/ui](../index.md) / SelectItem

# Function: SelectItem()

> **SelectItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectLabel.md
---
[@sqlrooms/ui](../index.md) / SelectLabel

# Function: SelectLabel()

> **SelectLabel**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectLabelProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectScrollDownButton.md
---
[@sqlrooms/ui](../index.md) / SelectScrollDownButton

# Function: SelectScrollDownButton()

> **SelectScrollDownButton**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectScrollDownButtonProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectScrollUpButton.md
---
[@sqlrooms/ui](../index.md) / SelectScrollUpButton

# Function: SelectScrollUpButton()

> **SelectScrollUpButton**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectScrollUpButtonProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectSeparator.md
---
[@sqlrooms/ui](../index.md) / SelectSeparator

# Function: SelectSeparator()

> **SelectSeparator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectSeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectTrigger.md
---
[@sqlrooms/ui](../index.md) / SelectTrigger

# Function: SelectTrigger()

> **SelectTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SelectTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SelectValue.md
---
[@sqlrooms/ui](../index.md) / SelectValue

# Function: SelectValue()

> **SelectValue**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SelectValueProps` & `RefAttributes`<`HTMLSpanElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Separator.md
---
[@sqlrooms/ui](../index.md) / Separator

# Function: Separator()

> **Separator**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SeparatorProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ai-core/functions/SessionActions.md
---
[@sqlrooms/ai-core](../index.md) / SessionActions

# Function: SessionActions()

> **SessionActions**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays action buttons for session management.
Shows a delete button (via DeleteSessionButton) and a create new session button.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionActionsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionActions className="my-custom-class" />
```

---

---
url: /api/ai/functions/SessionActions.md
---
[@sqlrooms/ai](../index.md) / SessionActions

# Function: SessionActions()

> **SessionActions**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays action buttons for session management.
Shows a delete button (via DeleteSessionButton) and a create new session button.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionActionsProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionActions className="my-custom-class" />
```

---

---
url: /api/ai-core/functions/SessionControls.md
---
[@sqlrooms/ai-core](../index.md) / SessionControls

# Function: SessionControls()

> **SessionControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Main component for managing AI sessions.
Combines session dropdown, title editing, action buttons, and delete confirmation.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `children`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.children`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionControls className="p-4 border-b">
  <Button>Custom Button</Button>
</SessionControls>
```

---

---
url: /api/ai/functions/SessionControls.md
---
[@sqlrooms/ai](../index.md) / SessionControls

# Function: SessionControls()

> **SessionControls**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Main component for managing AI sessions.
Combines session dropdown, title editing, action buttons, and delete confirmation.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `children`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.children`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionControls className="p-4 border-b">
  <Button>Custom Button</Button>
</SessionControls>
```

---

---
url: /api/ai-core/functions/SessionDropdown.md
---
[@sqlrooms/ai-core](../index.md) / SessionDropdown

# Function: SessionDropdown()

> **SessionDropdown**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Dropdown component for managing AI sessions.
Allows users to switch between existing sessions or create a new one.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionDropdownProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionDropdown className="my-custom-class" />
```

---

---
url: /api/ai/functions/SessionDropdown.md
---
[@sqlrooms/ai](../index.md) / SessionDropdown

# Function: SessionDropdown()

> **SessionDropdown**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Dropdown component for managing AI sessions.
Allows users to switch between existing sessions or create a new one.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionDropdownProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionDropdown className="my-custom-class" />
```

---

---
url: /api/ai-core/functions/SessionTitle.md
---
[@sqlrooms/ai-core](../index.md) / SessionTitle

# Function: SessionTitle()

> **SessionTitle**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays the current session name as an editable text field.
Shows the model name if available and a placeholder if no session is selected.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionTitleProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionTitle className="my-custom-class" />
```

---

---
url: /api/ai/functions/SessionTitle.md
---
[@sqlrooms/ai](../index.md) / SessionTitle

# Function: SessionTitle()

> **SessionTitle**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that displays the current session name as an editable text field.
Shows the model name if available and a placeholder if no session is selected.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SessionTitleProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SessionTitle className="my-custom-class" />
```

---

---
url: /api/ui/functions/Sheet.md
---
[@sqlrooms/ui](../index.md) / Sheet

# Function: Sheet()

> **Sheet**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/SheetClose.md
---
[@sqlrooms/ui](../index.md) / SheetClose

# Function: SheetClose()

> **SheetClose**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogCloseProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SheetContent.md
---
[@sqlrooms/ui](../index.md) / SheetContent

# Function: SheetContent()

> **SheetContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SheetContentProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SheetDescription.md
---
[@sqlrooms/ui](../index.md) / SheetDescription

# Function: SheetDescription()

> **SheetDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogDescriptionProps` & `RefAttributes`<`HTMLParagraphElement`>, `"ref"`> & `RefAttributes`<`HTMLParagraphElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SheetFooter.md
---
[@sqlrooms/ui](../index.md) / SheetFooter

# Function: SheetFooter()

> **SheetFooter**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/SheetHeader.md
---
[@sqlrooms/ui](../index.md) / SheetHeader

# Function: SheetHeader()

> **SheetHeader**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/SheetOverlay.md
---
[@sqlrooms/ui](../index.md) / SheetOverlay

# Function: SheetOverlay()

> **SheetOverlay**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogOverlayProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SheetPortal.md
---
[@sqlrooms/ui](../index.md) / SheetPortal

# Function: SheetPortal()

> **SheetPortal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogPortalProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/SheetTitle.md
---
[@sqlrooms/ui](../index.md) / SheetTitle

# Function: SheetTitle()

> **SheetTitle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`DialogTitleProps` & `RefAttributes`<`HTMLHeadingElement`>, `"ref"`> & `RefAttributes`<`HTMLHeadingElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/SheetTrigger.md
---
[@sqlrooms/ui](../index.md) / SheetTrigger

# Function: SheetTrigger()

> **SheetTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `DialogTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/shorten.md
---
[@sqlrooms/utils](../index.md) / shorten

# Function: shorten()

> **shorten**(`str`, `maxLength`): `string`

Shortens a string to a specified maximum length by truncating and adding an ellipsis.

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `str` | `string` | `undefined` | The string to shorten |
| `maxLength` | `number` | `10` | Maximum length of the resulting string (including ellipsis). Defaults to 10. |

## Returns

`string`

The shortened string with ellipsis if truncated, or the original string if shorter than maxLength

## Example

```ts
shorten("Hello World", 8) // Returns "Hello..."
shorten("Hi", 8) // Returns "Hi"
```

---

---
url: /api/room-shell/functions/SidebarButton.md
---
[@sqlrooms/room-shell](../index.md) / SidebarButton

# Function: SidebarButton()

> **SidebarButton**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `title`: `string`; `isSelected`: `boolean`; `isDisabled`: `boolean`; `icon`: `ComponentType`<{ `className`: `string`; }>; `onClick`: () => `void`; } |
| `props.className`? | `string` |
| `props.title` | `string` |
| `props.isSelected` | `boolean` |
| `props.isDisabled`? | `boolean` |
| `props.icon` | `ComponentType`<{ `className`: `string`; }> |
| `props.onClick` | () => `void` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Skeleton.md
---
[@sqlrooms/ui](../index.md) / Skeleton

# Function: Skeleton()

> **Skeleton**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `HTMLAttributes`<`HTMLDivElement`> |

## Returns

`Element`

---

---
url: /api/ui/functions/SkeletonPane.md
---
[@sqlrooms/ui](../index.md) / SkeletonPane

# Function: SkeletonPane()

> **SkeletonPane**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `n`: `number`; `staggeringDelay`: `number`; `rowHeight`: `string` | `number`; `className`: `string`; } |
| `props.n`? | `number` |
| `props.staggeringDelay`? | `number` |
| `props.rowHeight`? | `string` | `number` |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Slider.md
---
[@sqlrooms/ui](../index.md) / Slider

# Function: Slider()

> **Slider**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SliderProps` & `RefAttributes`<`HTMLSpanElement`>, `"ref"`> & `RefAttributes`<`HTMLSpanElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Slot.md
---
[@sqlrooms/ui](../index.md) / Slot

# Function: Slot()

> **Slot**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `SlotProps` & `RefAttributes`<`HTMLElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Spinner.md
---
[@sqlrooms/ui](../index.md) / Spinner

# Function: Spinner()

> **Spinner**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Loading spinner component

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; } |
| `props.className`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/SpinnerPane.md
---
[@sqlrooms/ui](../index.md) / SpinnerPane

# Function: SpinnerPane()

> **SpinnerPane**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `h`: `string` | `number`; `delayed`: `boolean`; `className`: `string`; `children`: `ReactNode`; } |
| `props.h`? | `string` | `number` |
| `props.delayed`? | `boolean` |
| `props.className`? | `string` |
| `props.children`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/utils/functions/splitFilePath.md
---
[@sqlrooms/utils](../index.md) / splitFilePath

# Function: splitFilePath()

> **splitFilePath**(`filePath`): `object`

Splits a file path into its directory, name, and extension components.
Preserves the original path separator style (Windows backslashes or Unix forward slashes).

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `filePath` | `string` | The full file path to split |

## Returns

`object`

An object containing the directory path, file name (without extension), extension, and full filename

| Name | Type |
| ------ | ------ |
|  `dir` | `string` |
|  `name` | `string` |
|  `ext` | `string` |
|  `filename` | `string` |

## Example

```ts
splitFilePath("path/to/file.txt") // returns { dir: "path/to", name: "file", ext: "txt", filename: "file.txt" }
splitFilePath("C:\\Users\\file.txt") // returns { dir: "C:\\Users", name: "file", ext: "txt", filename: "file.txt" }
```

---

---
url: /api/duckdb/functions/splitSqlStatements.md
---
[@sqlrooms/duckdb](../index.md) / splitSqlStatements

# Function: splitSqlStatements()

> **splitSqlStatements**(`input`): `string`\[]

Split a string with potentially multiple SQL queries (separated as usual by ';')
into an array of queries.
This implementation:

* Handles single and double quoted strings with proper escaping
* Removes all comments: line comments (--) and block comments (/\* ... \*/)
* Ignores semicolons in quoted strings and comments
* Trims whitespace from queries
* Handles SQL-style escaped quotes ('' inside strings)
* Returns only non-empty queries

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `input` | `string` | The SQL string containing one or more statements |

## Returns

`string`\[]

An array of SQL statements with all comments removed

---

---
url: /api/sql-editor/functions/SqlEditor.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditor

# Function: SqlEditor()

> **SqlEditor**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`Props`](../type-aliases/Props.md) |

## Returns

`ReactNode`

---

---
url: /api/sql-editor/functions/SqlEditorHeader.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorHeader

# Function: SqlEditorHeader()

> **SqlEditorHeader**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`SqlEditorHeaderProps`](../type-aliases/SqlEditorHeaderProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/SqlEditorModal.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorModal

# Function: SqlEditorModal()

> **SqlEditorModal**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.

This component wraps the main SqlEditor component in a modal dialog, making it suitable for
overlay/popup usage scenarios. It inherits all props from SqlEditorProps and handles the
modal-specific behavior.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`Props`](../type-aliases/Props.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Example

```tsx
<SqlEditorModal
  isOpen={true}
  onClose={() => setIsOpen(false)}
  sqlEditorConfig={config}
  onChange={handleConfigChange}
/>
```

## See

* [SqlEditor](SqlEditor.md) for detailed documentation of all available props
* [SqlEditorProps](../type-aliases/Props.md)
  The component accepts all props from SqlEditorProps:
* `isOpen` - Whether the SQL editor modal is currently visible
* `onClose` - Callback fired when the modal should be closed
* `sqlEditorConfig` - Configuration object containing queries and selected query state
* `onChange` - Callback fired when the SQL editor configuration changes
* `schema` - Optional database schema to use for queries (defaults to 'main')
* `documentationPanel` - Optional component to render SQL documentation in the side panel
* `onAddOrUpdateSqlQuery` - Callback fired when a new table should be created from query results

---

---
url: /api/sql-editor/functions/SqlMonacoEditor.md
---
[@sqlrooms/sql-editor](../index.md) / SqlMonacoEditor

# Function: SqlMonacoEditor()

> **SqlMonacoEditor**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A Monaco editor for editing SQL with DuckDB syntax highlighting and autocompletion
This is an internal component used by SqlEditor

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`SqlMonacoEditorProps`](../interfaces/SqlMonacoEditorProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/SqlQueryDataSourcesPanel.md
---
[@sqlrooms/sql-editor](../index.md) / SqlQueryDataSourcesPanel

# Function: SqlQueryDataSourcesPanel()

> **SqlQueryDataSourcesPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `isReadOnly`: `boolean`; `queryDataSources`: `object`\[]; } |
| `props.isReadOnly`? | `boolean` |
| `props.queryDataSources` | `object`\[] |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/SqlReferenceButton.md
---
[@sqlrooms/sql-editor](../index.md) / SqlReferenceButton

# Function: SqlReferenceButton()

> **SqlReferenceButton**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `text`: `string`; `icon`: `ReactNode`; `variant`: `null` | `"link"` | `"default"` | `"destructive"` | `"outline"` | `"secondary"` | `"ghost"`; `url`: `string`; } |
| `props.className`? | `string` |
| `props.text`? | `string` |
| `props.icon`? | `ReactNode` |
| `props.variant`? | `null` | `"link"` | `"default"` | `"destructive"` | `"outline"` | `"secondary"` | `"ghost"` |
| `props.url`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/SqlReferenceButtonContent.md
---
[@sqlrooms/sql-editor](../index.md) / SqlReferenceButtonContent

# Function: SqlReferenceButtonContent()

> **SqlReferenceButtonContent**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `text`: `string`; `icon`: `ReactNode`; } |
| `props.className`? | `string` |
| `props.text`? | `string` |
| `props.icon`? | `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/sqlroomsTailwindPreset.md
---
[@sqlrooms/ui](../index.md) / sqlroomsTailwindPreset

# Function: sqlroomsTailwindPreset()

> **sqlroomsTailwindPreset**(`_options`?): `Partial`<`Config`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `_options`? | `Record`<`string`, `unknown`> |

## Returns

`Partial`<`Config`>

---

---
url: /api/recharts/functions/SunburstChart.md
---
[@sqlrooms/recharts](../index.md) / SunburstChart

# Function: SunburstChart()

> **SunburstChart**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `SunburstChartProps` |

## Returns

`Element`

---

---
url: /api/recharts/functions/Surface.md
---
[@sqlrooms/recharts](../index.md) / Surface

# Function: Surface()

> **Surface**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`SurfaceProps`](../type-aliases/SurfaceProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/Switch.md
---
[@sqlrooms/ui](../index.md) / Switch

# Function: Switch()

> **Switch**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`SwitchProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Symbols.md
---
[@sqlrooms/recharts](../index.md) / Symbols

# Function: Symbols()

> **Symbols**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`SymbolsProps`](../type-aliases/SymbolsProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/Table.md
---
[@sqlrooms/ui](../index.md) / Table

# Function: Table()

> **Table**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TableProps` & `RefAttributes`<`HTMLTableElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableBody.md
---
[@sqlrooms/ui](../index.md) / TableBody

# Function: TableBody()

> **TableBody**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableCaption.md
---
[@sqlrooms/ui](../index.md) / TableCaption

# Function: TableCaption()

> **TableCaption**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLTableCaptionElement`> & `RefAttributes`<`HTMLTableCaptionElement`> |

## Returns

`ReactNode`

---

---
url: /api/room-shell/functions/TableCard.md
---
[@sqlrooms/room-shell](../index.md) / TableCard

# Function: TableCard()

> **TableCard**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `isReadOnly`: `boolean`; `value`: `DataTable`; `rowCount`: `number`; `onReset`: () => `void`; `onClick`: () => `void`; `className`: `string`; `menuRenderer`: (`v`) => `ReactNode`; } |
| `props.isReadOnly`? | `boolean` |
| `props.value`? | `DataTable` |
| `props.rowCount`? | `number` |
| `props.onReset`? | () => `void` |
| `props.onClick`? | () => `void` |
| `props.className`? | `string` |
| `props.menuRenderer`? | (`v`) => `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/TableCell.md
---
[@sqlrooms/ui](../index.md) / TableCell

# Function: TableCell()

> **TableCell**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TdHTMLAttributes`<`HTMLTableCellElement`> & `RefAttributes`<`HTMLTableCellElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableFooter.md
---
[@sqlrooms/ui](../index.md) / TableFooter

# Function: TableFooter()

> **TableFooter**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableHead.md
---
[@sqlrooms/ui](../index.md) / TableHead

# Function: TableHead()

> **TableHead**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ThHTMLAttributes`<`HTMLTableCellElement`> & `RefAttributes`<`HTMLTableCellElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableHeader.md
---
[@sqlrooms/ui](../index.md) / TableHeader

# Function: TableHeader()

> **TableHeader**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLTableSectionElement`> & `RefAttributes`<`HTMLTableSectionElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TableRow.md
---
[@sqlrooms/ui](../index.md) / TableRow

# Function: TableRow()

> **TableRow**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `HTMLAttributes`<`HTMLTableRowElement`> & `RefAttributes`<`HTMLTableRowElement`> |

## Returns

`ReactNode`

---

---
url: /api/schema-tree/functions/TableSchemaTree.md
---
[@sqlrooms/schema-tree](../index.md) / TableSchemaTree

# Function: TableSchemaTree()

> **TableSchemaTree**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `schemaTrees`: `DbSchemaNode`\[]; `renderNode`: (`node`, `isOpen`) => `ReactNode`; `skipSingleDatabaseOrSchema`: `boolean`; } |
| `props.className`? | `string` |
| `props.schemaTrees` | `DbSchemaNode`\[] |
| `props.renderNode`? | (`node`, `isOpen`) => `ReactNode` |
| `props.skipSingleDatabaseOrSchema`? | `boolean` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/room-shell/functions/TablesListPanel.md
---
[@sqlrooms/room-shell](../index.md) / TablesListPanel

# Function: TablesListPanel()

> **TablesListPanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `isReadOnly`: `boolean`; } |
| `props.className`? | `string` |
| `props.isReadOnly`? | `boolean` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/sql-editor/functions/TableStructurePanel.md
---
[@sqlrooms/sql-editor](../index.md) / TableStructurePanel

# Function: TableStructurePanel()

> **TableStructurePanel**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TableStructurePanelProps`](../interfaces/TableStructurePanelProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/schema-tree/functions/TableTreeNode.md
---
[@sqlrooms/schema-tree](../index.md) / TableTreeNode

# Function: TableTreeNode()

> **TableTreeNode**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `nodeObject`: `TableNodeObject`; `renderMenuItems`: (`nodeObject`, `tableModal`) => `ReactNode`; } |
| `props.className`? | `string` |
| `props.nodeObject` | `TableNodeObject` |
| `props.renderMenuItems`? | (`nodeObject`, `tableModal`) => `ReactNode` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Tabs.md
---
[@sqlrooms/ui](../index.md) / Tabs

# Function: Tabs()

> **Tabs**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TabsProps` & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TabsContent.md
---
[@sqlrooms/ui](../index.md) / TabsContent

# Function: TabsContent()

> **TabsContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`TabsContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TabsList.md
---
[@sqlrooms/ui](../index.md) / TabsList

# Function: TabsList()

> **TabsList**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`TabsListProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TabsTrigger.md
---
[@sqlrooms/ui](../index.md) / TabsTrigger

# Function: TabsTrigger()

> **TabsTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`TabsTriggerProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Text.md
---
[@sqlrooms/recharts](../index.md) / Text

# Function: Text()

> **Text**(`__namedParameters`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`TextProps`](../type-aliases/TextProps.md) |

## Returns

`Element`

---

---
url: /api/ui/functions/Textarea.md
---
[@sqlrooms/ui](../index.md) / Textarea

# Function: Textarea()

> **Textarea**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`TextareaProps`, `"ref"`> & `RefAttributes`<`HTMLTextAreaElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ThemeProvider.md
---
[@sqlrooms/ui](../index.md) / ThemeProvider

# Function: ThemeProvider()

> **ThemeProvider**(`__namedParameters`): `Element`

ThemeProvider component that manages and provides theme context to its children.
Handles system theme detection and persistence of theme preference.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ThemeProviderProps` |

## Returns

`Element`

## Example

```tsx
// Basic usage with default settings
function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

// Custom default theme and storage key
function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
      <YourApp />
    </ThemeProvider>
  );
}
```

---

---
url: /api/ui/functions/ThemeSwitch.md
---
[@sqlrooms/ui](../index.md) / ThemeSwitch

# Function: ThemeSwitch()

> **ThemeSwitch**(`props`): `ReactNode` | `Promise`<`ReactNode`>

A theme toggle switch component that allows users to switch between light and dark themes.

This component provides a visually appealing switch with sun/moon icons that animate smoothly
during theme transitions. It integrates with the theme context to manage theme state.

Features:

* Smooth icon animations
* Accessible keyboard navigation
* Focus and hover states
* Customizable via className prop

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | { `className`: `string`; } | - |
| `props.className`? | `string` | Optional CSS class name for styling the switch container |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

## Component

## Example

```tsx
// Basic usage
<ThemeSwitch />

// With custom styling
<ThemeSwitch className="my-custom-class" />

// Within a theme provider
import { ThemeProvider } from '../theme/theme-provider';

function App() {
  return (
    <ThemeProvider>
      <ThemeSwitch />
    </ThemeProvider>
  );
}
```

---

---
url: /api/ui/functions/Toast.md
---
[@sqlrooms/ui](../index.md) / Toast

# Function: Toast()

> **Toast**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastProps` & `RefAttributes`<`HTMLLIElement`>, `"ref"`> & `VariantProps`<(`props`?) => `string`> & `RefAttributes`<`HTMLLIElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToastAction.md
---
[@sqlrooms/ui](../index.md) / ToastAction

# Function: ToastAction()

> **ToastAction**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastActionProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToastClose.md
---
[@sqlrooms/ui](../index.md) / ToastClose

# Function: ToastClose()

> **ToastClose**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastCloseProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToastDescription.md
---
[@sqlrooms/ui](../index.md) / ToastDescription

# Function: ToastDescription()

> **ToastDescription**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastDescriptionProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Toaster.md
---
[@sqlrooms/ui](../index.md) / Toaster

# Function: Toaster()

> **Toaster**(): `Element`

## Returns

`Element`

---

---
url: /api/ui/functions/ToastProvider.md
---
[@sqlrooms/ui](../index.md) / ToastProvider

# Function: ToastProvider()

> **ToastProvider**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ToastProviderProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/ToastTitle.md
---
[@sqlrooms/ui](../index.md) / ToastTitle

# Function: ToastTitle()

> **ToastTitle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastTitleProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToastViewport.md
---
[@sqlrooms/ui](../index.md) / ToastViewport

# Function: ToastViewport()

> **ToastViewport**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToastViewportProps` & `RefAttributes`<`HTMLOListElement`>, `"ref"`> & `RefAttributes`<`HTMLOListElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/Toggle.md
---
[@sqlrooms/ui](../index.md) / Toggle

# Function: Toggle()

> **Toggle**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToggleProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `VariantProps`<(`props`?) => `string`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToggleGroup.md
---
[@sqlrooms/ui](../index.md) / ToggleGroup

# Function: ToggleGroup()

> **ToggleGroup**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | (Omit\<ToggleGroupSingleProps & RefAttributes\<HTMLDivElement>, "ref"> | Omit\<ToggleGroupMultipleProps & RefAttributes<...>, "ref">) & VariantProps<...> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/ToggleGroupItem.md
---
[@sqlrooms/ui](../index.md) / ToggleGroupItem

# Function: ToggleGroupItem()

> **ToggleGroupItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`ToggleGroupItemProps` & `RefAttributes`<`HTMLButtonElement`>, `"ref"`> & `VariantProps`<(`props`?) => `string`> & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/toggleVariants.md
---
[@sqlrooms/ui](../index.md) / toggleVariants

# Function: toggleVariants()

> **toggleVariants**(`props`?): `string`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props`? | ConfigVariants<{ variant: { default: string; outline: string; }; size: { default: string; sm: string; lg: string; }; }> & ClassProp |

## Returns

`string`

---

---
url: /api/ai-core/functions/ToolErrorMessage.md
---
[@sqlrooms/ai-core](../index.md) / ToolErrorMessage

# Function: ToolErrorMessage()

> **ToolErrorMessage**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ToolErrorMessageProps` |

## Returns

`Element`

---

---
url: /api/ai/functions/ToolErrorMessage.md
---
[@sqlrooms/ai](../index.md) / ToolErrorMessage

# Function: ToolErrorMessage()

> **ToolErrorMessage**(`props`): `Element`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `ToolErrorMessageProps` |

## Returns

`Element`

---

---
url: /api/ui/functions/Tooltip.md
---
[@sqlrooms/ui](../index.md) / Tooltip

# Function: Tooltip()

> **Tooltip**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TooltipProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/TooltipContent.md
---
[@sqlrooms/ui](../index.md) / TooltipContent

# Function: TooltipContent()

> **TooltipContent**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`TooltipContentProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/ui/functions/TooltipProvider.md
---
[@sqlrooms/ui](../index.md) / TooltipProvider

# Function: TooltipProvider()

> **TooltipProvider**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TooltipProviderProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/TooltipTrigger.md
---
[@sqlrooms/ui](../index.md) / TooltipTrigger

# Function: TooltipTrigger()

> **TooltipTrigger**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TooltipTriggerProps` & `RefAttributes`<`HTMLButtonElement`> |

## Returns

`ReactNode`

---

---
url: /api/recharts/functions/Trapezoid.md
---
[@sqlrooms/recharts](../index.md) / Trapezoid

# Function: Trapezoid()

> **Trapezoid**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | [`TrapezoidProps`](../type-aliases/TrapezoidProps.md) |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/ui/functions/Tree.md
---
[@sqlrooms/ui](../index.md) / Tree

# Function: Tree()

> **Tree**<`T`>(`props`): `ReactElement`

Component that renders a generic tree.

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TreeProps`<`T`> |

## Returns

`ReactElement`

---

---
url: /api/schema-tree/functions/TreeNodeActionsMenu.md
---
[@sqlrooms/schema-tree](../index.md) / TreeNodeActionsMenu

# Function: TreeNodeActionsMenu()

> **TreeNodeActionsMenu**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Component that renders a tree node "more actions" menu.
The menu items are passed as children.

The menu is hidden by default and is shown when the user hovers over the node.
For this to work the parent element must have the `group` class.
It should also have classes `relative overflow-hidden`.

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `TreeNodeActionsMenuProps` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/schema-tree/functions/TreeNodeActionsMenuItem.md
---
[@sqlrooms/schema-tree](../index.md) / TreeNodeActionsMenuItem

# Function: TreeNodeActionsMenuItem()

> **TreeNodeActionsMenuItem**(`props`): `ReactNode`

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | `Omit`<`Omit`<`DropdownMenuItemProps` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `object` & `RefAttributes`<`HTMLDivElement`>, `"ref"`> & `RefAttributes`<`HTMLDivElement`> |

## Returns

`ReactNode`

---

---
url: /api/utils/functions/truncate.md
---
[@sqlrooms/utils](../index.md) / truncate

# Function: truncate()

> **truncate**(`text`, `maxWords`): `string`

Truncates text to a specified word limit

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `text` | `string` | `undefined` | The text to truncate |
| `maxWords` | `number` | `10` | The maximum number of words to keep (default: 10) |

## Returns

`string`

The truncated text with "..." appended if truncated

## Example

```ts
truncate("This is a very long sentence that should be truncated", 5) // returns "This is a very long..."
truncate("Short text", 10) // returns "Short text"
```

---

---
url: /api/utils/functions/uploadFile.md
---
[@sqlrooms/utils](../index.md) / uploadFile

# Function: uploadFile()

> **uploadFile**(`url`, `content`, `opts`?): `Promise`<`Response`>

Uploads a file to a specified URL using XMLHttpRequest

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `url` | `string` | The URL to upload the file to |
| `content` | `File` | `Blob` | `FormData` | The content to upload |
| `opts`? | { `method`: `string`; `headers`: `Record`<`string`, `string`>; `onProgress`: (`info`) => `void`; } | Optional configuration for the upload |
| `opts.method`? | `string` | The HTTP method to use |
| `opts.headers`? | `Record`<`string`, `string`> | Additional headers to include in the request |
| `opts.onProgress`? | (`info`) => `void` | Callback function to track upload progress |

## Returns

`Promise`<`Response`>

The server response

## Throws

Throws an object containing status and error message if upload fails

---

---
url: /api/data-table/functions/useArrowDataTable.md
---
[@sqlrooms/data-table](../index.md) / useArrowDataTable

# Function: useArrowDataTable()

> **useArrowDataTable**(`table`, `options`): `undefined` | `UseArrowDataTableResult`

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `undefined` | `Table`<`any`> | - |
| `options` | { `fontSize`: `string`; } | - |
| `options.fontSize`? | `string` | Custom font size for the table e.g. xs, sm, md, lg, base |

## Returns

`undefined` | `UseArrowDataTableResult`

---

---
url: /api/ui/functions/useAspectRatioDimensions.md
---
[@sqlrooms/ui](../index.md) / useAspectRatioDimensions

# Function: useAspectRatioDimensions()

> **useAspectRatioDimensions**(`props`): [`Dimensions`](../interfaces/Dimensions.md)

A hook that calculates element dimensions based on provided values and container size

This hook handles various combinations of width/height specifications:

* If both width and height are provided, uses those exact dimensions
* If only width is provided, calculates height using the aspect ratio
* If only height is provided, calculates width using the aspect ratio
* If both are 'auto', uses container width and calculates height using the aspect ratio

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | [`UseAspectRatioDimensionsProps`](../interfaces/UseAspectRatioDimensionsProps.md) | The input parameters for dimension calculation |

## Returns

[`Dimensions`](../interfaces/Dimensions.md)

The calculated width and height

## Example

```tsx
const containerRef = useRef<HTMLDivElement>(null);
const {width, height} = useAspectRatioDimensions({
  width: 'auto',
  height: 'auto',
  aspectRatio: 16/9,
  containerRef
});
// Returns dimensions based on container size
```

---

---
url: /api/room-shell/functions/useBaseRoomShellStore.md
---
[@sqlrooms/room-shell](../index.md) / useBaseRoomShellStore

# Function: useBaseRoomShellStore()

> **useBaseRoomShellStore**<`PC`, `PS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` *extends* `object` |
| `PS` *extends* [`RoomShellSliceState`](../type-aliases/RoomShellSliceState.md)<`PC`> |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/room-shell/functions/useBaseRoomStore.md
---
[@sqlrooms/room-shell](../index.md) / useBaseRoomStore

# Function: useBaseRoomStore()

> **useBaseRoomStore**<`PC`, `PS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `PS` *extends* [`RoomState`](../type-aliases/RoomState.md)<`PC`> |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/room-store/functions/useBaseRoomStore.md
---
[@sqlrooms/room-store](../index.md) / useBaseRoomStore

# Function: useBaseRoomStore()

> **useBaseRoomStore**<`PC`, `PS`, `T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |
| `PS` *extends* [`RoomState`](../type-aliases/RoomState.md)<`PC`> |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ui/functions/useDisclosure.md
---
[@sqlrooms/ui](../index.md) / useDisclosure

# Function: useDisclosure()

> **useDisclosure**(`initialState`): [`UseDisclosureReturnValue`](../interfaces/UseDisclosureReturnValue.md)

A custom hook for managing disclosure state (open/closed).

## Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `initialState` | `boolean` | `false` | The initial state of the disclosure (default: false) |

## Returns

[`UseDisclosureReturnValue`](../interfaces/UseDisclosureReturnValue.md)

An object containing the disclosure state and methods to control it

## Example

```tsx
import { useDisclosure } from '@your-package/ui';

function Modal() {
  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

  return (
    <>
      <button onClick={onOpen}>Open Modal</button>

      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>Modal content goes here...</p>
            <button onClick={onClose}>Close</button>
          </div>
        </div>
      )}
    </>
  );
}
```

---

---
url: /api/duckdb/functions/useDuckDb.md
---
[@sqlrooms/duckdb](../index.md) / useDuckDb

# Function: useDuckDb()

> **useDuckDb**(): [`DuckDbConnector`](../interfaces/DuckDbConnector.md)

## Returns

[`DuckDbConnector`](../interfaces/DuckDbConnector.md)

---

---
url: /api/duckdb/functions/useExportToCsv.md
---
[@sqlrooms/duckdb](../index.md) / useExportToCsv

# Function: useExportToCsv()

> **useExportToCsv**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `exportToCsv` | (`query`, `fileName`, `pageSize`) => `Promise`<`void`> |

---

---
url: /api/ui/functions/useFormField.md
---
[@sqlrooms/ui](../index.md) / useFormField

# Function: useFormField()

> **useFormField**(): `object`

## Returns

`object`

| Name | Type | Default value |
| ------ | ------ | ------ |
|  `invalid` | `boolean` | - |
|  `isDirty` | `boolean` | - |
|  `isTouched` | `boolean` | - |
|  `isValidating` | `boolean` | - |
|  `error`? | `FieldError` | - |
|  `id` | `string` | - |
|  `name` | `string` | fieldContext.name |
|  `formItemId` | `string` | - |
|  `formDescriptionId` | `string` | - |
|  `formMessageId` | `string` | - |

---

---
url: /api/cosmos/functions/useHoverState.md
---
[@sqlrooms/cosmos](../index.md) / useHoverState

# Function: useHoverState()

> **useHoverState**(`calcRelativeCoordinates`): `object`

A custom hook that manages hover state for graph points.

This hook provides functionality to:

* Track which point is currently being hovered
* Store the hover position coordinates
* Clear the hover state
* Provide event handlers for hover-related graph interactions

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `calcRelativeCoordinates` | (`x`, `y`) => \[`number`, `number`] | A function that converts client coordinates to container-relative coordinates |

## Returns

`object`

An object containing the hover state and event handlers for the graph

| Name | Type |
| ------ | ------ |
|  `hoveredPoint` | `HoverState` |
|  `eventHandlers` | { `onPointMouseOver`: (`index`, `pointPosition`, `event`) => `void`; `onPointMouseOut`: () => `void`; `onZoomStart`: () => `void`; `onDragStart`: () => `void`; } |

## Example

```tsx
const Graph = () => {
  const calcRelativeCoords = useRelativeCoordinates(containerRef);
  const { hoveredPoint, eventHandlers } = useHoverState(calcRelativeCoords);

  return (
    <div ref={containerRef}>
      <CosmosGraph
        config={eventHandlers}
      />
      {hoveredPoint && (
        <Tooltip
          x={hoveredPoint.position[0]}
          y={hoveredPoint.position[1]}
        />
      )}
    </div>
  );
};
```

---

---
url: /api/mosaic/functions/useMosaic.md
---
[@sqlrooms/mosaic](../index.md) / useMosaic

# Function: useMosaic()

> **useMosaic**(): `object`

Hook to manage the Mosaic connector.

## Returns

`object`

An object containing the Mosaic connector and a loading state.

| Name | Type | Default value |
| ------ | ------ | ------ |
|  `isMosaicLoading` | `boolean` | isLoading |
|  `mosaicConnector` | `undefined` | `Connector` | connector |

---

---
url: /api/ui/functions/useRelativeCoordinates.md
---
[@sqlrooms/ui](../index.md) / useRelativeCoordinates

# Function: useRelativeCoordinates()

> **useRelativeCoordinates**(`containerRef`): (`x`, `y`) => \[`number`, `number`]

A hook that converts absolute screen coordinates to coordinates relative to a container element.

This hook is useful when you need to position elements (like tooltips, popovers, or context menus)
relative to a container, especially when dealing with mouse or touch events.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `containerRef` | `RefObject`<`null` | `HTMLElement`> | A React ref object pointing to the container HTML element |

## Returns

`Function`

A callback function that converts absolute coordinates to relative ones

### Parameters

| Parameter | Type |
| ------ | ------ |
| `x` | `number` |
| `y` | `number` |

### Returns

\[`number`, `number`]

## Examples

```typescript
const MyComponent = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const getRelativeCoords = useRelativeCoordinates(containerRef);

  const handleMouseMove = (e: React.MouseEvent) => {
    // Convert screen coordinates to container-relative coordinates
    const [relativeX, relativeY] = getRelativeCoords(e.clientX, e.clientY);

    // Use the coordinates to position a tooltip, etc.
    setTooltipPosition({ x: relativeX, y: relativeY });
  };

  return (
    <div
      ref={containerRef}
      onMouseMove={handleMouseMove}
      className="relative"
    >
      Content
    </div>
  );
};
```

```typescript
// Using with touch events
const handleTouch = (e: React.TouchEvent) => {
  const touch = e.touches[0];
  const [x, y] = getRelativeCoords(touch.clientX, touch.clientY);
  // Position elements based on touch coordinates
};
```

---

---
url: /api/ai-core/functions/useScrollToBottom.md
---
[@sqlrooms/ai-core](../index.md) / useScrollToBottom

# Function: useScrollToBottom()

> **useScrollToBottom**<`T`>(`options`): `ScrollToBottomResult`<`T`>

A React hook that provides automatic scrolling behavior for containers with dynamic content.

This hook helps manage scroll behavior in containers where content is being added dynamically,
such as chat interfaces or logs. It automatically scrolls to the bottom when new content is added
if the user was already at the bottom, and provides a function to manually scroll to the bottom.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` *extends* `null` | `HTMLElement` | The type of HTMLElement for the container and end references |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `dataToObserve`: `unknown`; `containerRef`: `RefObject`<`null` | `T`>; `endRef`: `RefObject`<`null` | `T`>; `scrollOnInitialLoad`: `boolean`; } | Configuration options |
| `options.dataToObserve` | `unknown` | The data to observe for changes (messages, items, etc.) |
| `options.containerRef` | `RefObject`<`null` | `T`> | Reference to the scrollable container element |
| `options.endRef` | `RefObject`<`null` | `T`> | Reference to an element at the end of the content |
| `options.scrollOnInitialLoad`? | `boolean` | Whether to scroll to bottom on initial load (default: true) |

## Returns

`ScrollToBottomResult`<`T`>

An object containing:

* showScrollButton: Boolean indicating if the "scroll to bottom" button should be shown
* scrollToBottom: Function to programmatically scroll to the bottom

## Example

```tsx
import { useRef } from 'react';
import { useScrollToBottom } from './use-scroll-to-bottom';

function ChatContainer({ messages }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const endRef = useRef<HTMLDivElement>(null);

  const { showScrollButton, scrollToBottom } = useScrollToBottom({
    dataToObserve: messages,
    containerRef,
    endRef,
    scrollOnInitialLoad: false // Disable scrolling on initial load
  });

  return (
    <div className="relative h-[500px]">
      <div ref={containerRef} className="h-full overflow-y-auto p-4">
        {messages.map((message) => (
          <div key={message.id} className="mb-4">
            {message.text}
          </div>
        ))}
        <div ref={endRef} />
      </div>

      {showScrollButton && (
        <button
          onClick={scrollToBottom}
          className="absolute bottom-4 right-4 rounded-full bg-blue-500 p-2"
        >
          ↓
        </button>
      )}
    </div>
  );
}
```

---

---
url: /api/ai/functions/useScrollToBottom.md
---
[@sqlrooms/ai](../index.md) / useScrollToBottom

# Function: useScrollToBottom()

> **useScrollToBottom**<`T`>(`options`): `ScrollToBottomResult`<`T`>

A React hook that provides automatic scrolling behavior for containers with dynamic content.

This hook helps manage scroll behavior in containers where content is being added dynamically,
such as chat interfaces or logs. It automatically scrolls to the bottom when new content is added
if the user was already at the bottom, and provides a function to manually scroll to the bottom.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` *extends* `null` | `HTMLElement` | The type of HTMLElement for the container and end references |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `dataToObserve`: `unknown`; `containerRef`: `RefObject`<`null` | `T`>; `endRef`: `RefObject`<`null` | `T`>; `scrollOnInitialLoad`: `boolean`; } | Configuration options |
| `options.dataToObserve` | `unknown` | The data to observe for changes (messages, items, etc.) |
| `options.containerRef` | `RefObject`<`null` | `T`> | Reference to the scrollable container element |
| `options.endRef` | `RefObject`<`null` | `T`> | Reference to an element at the end of the content |
| `options.scrollOnInitialLoad`? | `boolean` | Whether to scroll to bottom on initial load (default: true) |

## Returns

`ScrollToBottomResult`<`T`>

An object containing:

* showScrollButton: Boolean indicating if the "scroll to bottom" button should be shown
* scrollToBottom: Function to programmatically scroll to the bottom

## Example

```tsx
import { useRef } from 'react';
import { useScrollToBottom } from './use-scroll-to-bottom';

function ChatContainer({ messages }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const endRef = useRef<HTMLDivElement>(null);

  const { showScrollButton, scrollToBottom } = useScrollToBottom({
    dataToObserve: messages,
    containerRef,
    endRef,
    scrollOnInitialLoad: false // Disable scrolling on initial load
  });

  return (
    <div className="relative h-[500px]">
      <div ref={containerRef} className="h-full overflow-y-auto p-4">
        {messages.map((message) => (
          <div key={message.id} className="mb-4">
            {message.text}
          </div>
        ))}
        <div ref={endRef} />
      </div>

      {showScrollButton && (
        <button
          onClick={scrollToBottom}
          className="absolute bottom-4 right-4 rounded-full bg-blue-500 p-2"
        >
          ↓
        </button>
      )}
    </div>
  );
}
```

---

---
url: /api/duckdb/functions/useSql.md
---
[@sqlrooms/duckdb](../index.md) / useSql

# Function: useSql()

Implementation of useSql that handles both overloads

## Call Signature

> **useSql**<`Row`>(`options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Row` | The TypeScript type for each row in the result |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `options` | { `query`: `string`; `enabled`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled`? | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

Object containing the validated query result, loading state, and any error

| Name | Type |
| ------ | ------ |
|  `data` | `undefined` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`Row`> |
|  `error` | `null` | `Error` |
|  `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

## Call Signature

> **useSql**<`Schema`>(`zodSchema`, `options`): `object`

A React hook for executing SQL queries with automatic state management.
Provides two ways to ensure type safety:

1. Using TypeScript types (compile-time safety only)
2. Using Zod schemas (both compile-time and runtime validation)

### Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `Schema` *extends* `ZodType`<`any`, `ZodTypeDef`, `any`> | The Zod schema type that defines the shape and validation of each row |

### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `zodSchema` | `Schema` | A Zod schema that defines the expected shape and validation rules for each row |
| `options` | { `query`: `string`; `enabled`: `boolean`; } | Configuration object containing the query and execution control |
| `options.query` | `string` | - |
| `options.enabled`? | `boolean` | - |

### Returns

`object`

Object containing the query result, loading state, and any error

Object containing the validated query result, loading state, and any error

| Name | Type |
| ------ | ------ |
|  `data` | `undefined` | [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`TypeOf`<`Schema`>> |
|  `error` | `null` | `Error` |
|  `isLoading` | `boolean` |

### Example

```typescript
// Option 1: Using TypeScript types (faster, no runtime validation)
interface User {
  id: number;
  name: string;
  email: string;
}

const {data, isLoading, error} = useSql<User>({
  query: 'SELECT id, name, email FROM users'
});

// Option 2: Using Zod schema (slower but with runtime validation)
const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  createdAt: z.string().transform(str => new Date(str)) // Transform string to Date
});

const {data: validatedData, isLoading, error} = useSql(
  userSchema,
  {query: 'SELECT id, name, email, created_at as createdAt FROM users'}
);
```

## Error Handling

```typescript
if (isLoading) return <div>Loading...</div>;
if (error) {
  // With Zod, you can catch validation errors specifically
  if (error instanceof z.ZodError) {
    return <div>Validation Error: {error.errors[0].message}</div>;
  }
  return <div>Error: {error.message}</div>;
}
if (!data) return null;
```

## Data Access Methods

There are several ways to access data with different performance characteristics:

### 1. Typed Row Access (getRow, rows(), toArray())

* Provides type safety and validation
* Converts data to JavaScript objects
* Slower for large datasets due to object creation and validation

```typescript
// Iterate through rows using the rows() iterator (recommended)
for (const user of data.rows()) {
  console.log(user.name, user.email);
}

// Traditional for loop with index access
for (let i = 0; i < data.length; i++) {
  const user = data.getRow(i);
  console.log(`User ${i}: ${user.name} (${user.email})`);
}

// Get all rows as an array
const allUsers = data.toArray();

// With Zod schema, transformed fields are available
for (const user of validatedData.rows()) {
  console.log(`Created: ${user.createdAt.toISOString()}`); // createdAt is a Date object
}
```

### 2. Direct Arrow Table Access

* Much faster for large datasets
* Columnar access is more efficient for analytics
* No type safety or validation

```typescript
// For performance-critical operations with large datasets:
const nameColumn = data.arrowTable.getChild('name');
const emailColumn = data.arrowTable.getChild('email');

// Fast columnar iteration (no object creation)
for (let i = 0; i < data.length; i++) {
  console.log(nameColumn.get(i), emailColumn.get(i));
}

// Note: For filtering data, it's most efficient to use SQL in your query
const { data } = useSql<User>({
  query: "SELECT * FROM users WHERE age > 30"
});
```

### 3. Using Flechette for Advanced Operations

For more advanced Arrow operations, consider using [Flechette](https://idl.uw.edu/flechette/),
a faster and lighter alternative to the standard Arrow JS implementation.

```typescript
// Example using Flechette with SQL query results
import { tableFromIPC } from '@uwdata/flechette';

// Convert Arrow table to Flechette table
const serializedData = data.arrowTable.serialize();
const flechetteTable = tableFromIPC(serializedData);

// Extract all columns into a { name: array, ... } object
const columns = flechetteTable.toColumns();

// Create a new table with a selected subset of columns
const subtable = flechetteTable.select(['name', 'email']);

// Convert to array of objects with customization options
const objects = flechetteTable.toArray({
  useDate: true,  // Convert timestamps to Date objects
  useMap: true    // Create Map objects for key-value pairs
});

// For large datasets, consider memory management
serializedData = null; // Allow garbage collection of the serialized data
```

Flechette provides several advantages:

* Better performance (1.3-1.6x faster value iteration, 7-11x faster row object extraction)
* Smaller footprint (~43k minified vs 163k for Arrow JS)
* Support for additional data types (including decimal-to-number conversion)
* More flexible data value conversion options

---

---
url: /api/ai-core/functions/useStoreWithAi.md
---
[@sqlrooms/ai-core](../index.md) / useStoreWithAi

# Function: useStoreWithAi()

> **useStoreWithAi**<`T`, `PC`, `S`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |
| `PC` *extends* `object` |
| `S` *extends* `RoomState`<`PC`> & [`AiSliceState`](../type-aliases/AiSliceState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai/functions/useStoreWithAi.md
---
[@sqlrooms/ai](../index.md) / useStoreWithAi

# Function: useStoreWithAi()

> **useStoreWithAi**<`T`, `PC`, `S`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |
| `PC` *extends* `object` |
| `S` *extends* `RoomState`<`PC`> & [`AiSliceState`](../type-aliases/AiSliceState.md) |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai-settings/functions/useStoreWithAiSettings.md
---
[@sqlrooms/ai-settings](../index.md) / useStoreWithAiSettings

# Function: useStoreWithAiSettings()

> **useStoreWithAiSettings**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ai/functions/useStoreWithAiSettings.md
---
[@sqlrooms/ai](../index.md) / useStoreWithAiSettings

# Function: useStoreWithAiSettings()

> **useStoreWithAiSettings**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/cosmos/functions/useStoreWithCosmos.md
---
[@sqlrooms/cosmos](../index.md) / useStoreWithCosmos

# Function: useStoreWithCosmos()

> **useStoreWithCosmos**<`T`>(`selector`): `T`

Hook to access the Cosmos store with proper typing.
Provides type-safe access to the combined room and Cosmos state.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` | The type of the selected state slice |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `selector` | (`state`) => `T` | A function that selects a portion of the state |

## Returns

`T`

The selected state portion

## Example

```typescript
const graph = useStoreWithCosmos(state => state.cosmos.graph);
const isRunning = useStoreWithCosmos(state => state.cosmos.isSimulationRunning);
```

---

---
url: /api/discuss/functions/useStoreWithDiscussion.md
---
[@sqlrooms/discuss](../index.md) / useStoreWithDiscussion

# Function: useStoreWithDiscussion()

> **useStoreWithDiscussion**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/duckdb/functions/useStoreWithDuckDb.md
---
[@sqlrooms/duckdb](../index.md) / useStoreWithDuckDb

# Function: useStoreWithDuckDb()

> **useStoreWithDuckDb**<`T`>(`selector`): `T`

**`Internal`**

Select values from the room store that includes the DuckDB slice.

This is a typed wrapper around `useBaseRoomStore` that narrows the
state to `RoomStateWithDuckDb` so selectors can access `db` safely.

## Type Parameters

| Type Parameter | Description |
| ------ | ------ |
| `T` | The selected slice of state returned by the selector |

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `selector` | (`state`) => `T` | Function that selects a value from the store state |

## Returns

`T`

The selected value of type `T`

---

---
url: /api/layout/functions/useStoreWithLayout.md
---
[@sqlrooms/layout](../index.md) / useStoreWithLayout

# Function: useStoreWithLayout()

> **useStoreWithLayout**<`T`>(`selector`): `T`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Parameters

| Parameter | Type |
| ------ | ------ |
| `selector` | (`state`) => `T` |

## Returns

`T`

---

---
url: /api/ui/functions/useTheme.md
---
[@sqlrooms/ui](../index.md) / useTheme

# Function: useTheme()

> **useTheme**(): `ThemeProviderState`

Hook to access the current theme and theme setter function.
Must be used within a ThemeProvider component.

## Returns

`ThemeProviderState`

Object containing current theme and setTheme function

## Examples

```tsx
import { Button } from '@sqlrooms/ui';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const isDark = theme === 'dark';

  return (
    <Button
      variant="outline"
      size="sm"
      onClick={() => setTheme(isDark ? 'light' : 'dark')}
    >
      {isDark ? '☀️ Light' : '🌙 Dark'}
    </Button>
  );
}
```

```tsx
import { ThemeSwitch } from '@sqlrooms/ui';

function AppHeader() {
  return (
    <nav className="border-b">
      <div className="flex h-16 items-center px-4">
        <div className="ml-auto">
          <ThemeSwitch />
        </div>
      </div>
    </nav>
  );
}
```

## Throws

If used outside of a ThemeProvider

---

---
url: /api/ui/functions/useToast.md
---
[@sqlrooms/ui](../index.md) / useToast

# Function: useToast()

> **useToast**(): `object`

## Returns

`object`

| Name | Type |
| ------ | ------ |
|  `toasts` | `ToasterToast`\[] |
|  `toast` | (`__namedParameters`) => `object` |
|  `dismiss` | (`toastId`?) => `void` |

---

---
url: /api/vega/functions/VegaChartToolResult.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolResult

# Function: VegaChartToolResult()

> **VegaChartToolResult**(`props`): `Element`

Renders a chart tool call with visualization using Vega-Lite

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `VegaChartToolResultProps` | The component props |

## Returns

`Element`

The rendered chart tool call

---

---
url: /api/vega/functions/VegaLiteChart.md
---
[@sqlrooms/vega](../index.md) / VegaLiteChart

# Function: VegaLiteChart()

> **VegaLiteChart**(`props`): `ReactNode` | `Promise`<`ReactNode`>

## Parameters

| Parameter | Type |
| ------ | ------ |
| `props` | { `className`: `string`; `width`: `number` | `"auto"`; `height`: `number` | `"auto"`; `aspectRatio`: `number`; `sqlQuery`: `string`; `spec`: `string` | [`VisualizationSpec`](../type-aliases/VisualizationSpec.md); `dataName`: `string`; } |
| `props.className`? | `string` |
| `props.width`? | `number` | `"auto"` |
| `props.height`? | `number` | `"auto"` |
| `props.aspectRatio`? | `number` |
| `props.sqlQuery` | `string` |
| `props.spec` | `string` | [`VisualizationSpec`](../type-aliases/VisualizationSpec.md) |
| `props.dataName`? | `string` |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

---

---
url: /api/mosaic/functions/VgPlotChart.md
---
[@sqlrooms/mosaic](../index.md) / VgPlotChart

# Function: VgPlotChart()

> **VgPlotChart**(`props`): `ReactNode` | `Promise`<`ReactNode`>

Renders a Vega-Lite chart using the Mosaic library.

## Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `props` | `VgPlotChartProps` | The component props. |

## Returns

`ReactNode` | `Promise`<`ReactNode`>

The rendered chart component.

---

---
url: /api/layout/functions/visitMosaicLeafNodes.md
---
[@sqlrooms/layout](../index.md) / visitMosaicLeafNodes

# Function: visitMosaicLeafNodes()

> **visitMosaicLeafNodes**<`T`>(`root`, `visitor`, `path`): `undefined` | `T`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `void` |

## Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `root` | `undefined` | `null` | `string` | [`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md) | `undefined` |
| `visitor` | (`node`, `path`) => `T` | `undefined` |
| `path` | `MosaicPath` | `[]` |

## Returns

`undefined` | `T`

---

---
url: /getting-started.md
---

# Getting Started with SQLRooms

SQLRooms is a powerful framework and a set of building blocks for creating DuckDB-backed analytics applications in React. This guide will help you integrate SQLRooms into your application. For a detailed overview of the framework's architecture and core ideas, check out the [Key Concepts](/key-concepts) and [Modular Architecture](/modular-architecture) pages.

## Try the Minimal Example

The [Minimal Example](https://github.com/sqlrooms/examples/tree/main/minimal) is the quickest way to see SQLRooms in action with the smallest possible setup. It demonstrates loading a CSV data source and running SQL queries with `useSql()` in a barebones Vite + React app.

To create a new project from the minimal example, run:

```bash
npx degit sqlrooms/examples/minimal my-minimal-app/
cd my-minimal-app
npm install
npm run dev
```

***

## Try the Get Started Example

The [Get Started Example](https://github.com/sqlrooms/examples/tree/main/get-started) is a more feature-rich starter template that demonstrates a typical SQLRooms application structure, including panels, layout, and configuration.

To create a new project from the get-started example, run:

```bash
npx degit sqlrooms/examples/get-started myapp/
cd myapp
npm install
npm run dev
```

This Vite application demonstrates loading a CSV data source and running SQL queries with `useSql()`, along with a more complete app shell and layout.

## Manual Setup

### Prerequisites

Your application should have the following dependencies:

* [React 18](https://react.dev/) or higher
* [Tailwind CSS](https://tailwindcss.com/)
* [Zustand](https://zustand.docs.pmnd.rs) for state management
* [Zod](https://zod.dev) for schema validation
* [Node.js](https://nodejs.org/) >= 20

### Installation

Install the required SQLRooms packages:

::: code-group

```bash [npm]
npm install @sqlrooms/room-shell @sqlrooms/room-store @sqlrooms/ui
```

```bash [pnpm]
pnpm add @sqlrooms/room-shell @sqlrooms/room-store @sqlrooms/ui
```

```bash [yarn]
yarn add @sqlrooms/room-shell @sqlrooms/room-store @sqlrooms/ui
```

:::

### Configure Tailwind CSS

You can follow [this guide](https://v3.tailwindcss.com/docs/installation) to install and configure Tailwind 3 (Tailwind 4 support is still experimental).

::: code-group

```bash [npm]
npm install -D tailwindcss@3
npx tailwindcss init
```

```bash [pnpm]
pnpm add -D tailwindcss@3
npx tailwindcss init
```

```bash [yarn]
yarn add -D tailwindcss@3
npx tailwindcss init
```

:::

SQLRooms provides a Tailwind preset that includes all the necessary styles. Update your `tailwind.config.js` or `tailwind.config.ts`:

```typescript
import {sqlroomsTailwindPreset} from '@sqlrooms/ui';
import type {Config} from 'tailwindcss';

const config = {
  presets: [sqlroomsTailwindPreset()],
  content: [
    // Your content paths...
    './src/**/*.{ts,tsx}',
    // Add SQLRooms packages to content paths
    './node_modules/@sqlrooms/**/dist/**/*.js',
  ],
} satisfies Config;

export default config;
```

Make sure to import the preset Tailwind styles in your main CSS file:

```css
@import '@sqlrooms/ui/tailwind-preset.css';
```

### Setting Up the Room Store

1. First, define your panel types and room configuration:

```typescript
import {BaseRoomConfig, LayoutTypes, MAIN_VIEW} from '@sqlrooms/room-store';
import {z} from 'zod';

// Define panel types
export const RoomPanelTypes = z.enum([
  'room-details',
  'data-sources',
  MAIN_VIEW,
] as const);
export type RoomPanelTypes = z.infer<typeof RoomPanelTypes>;

// Define your room config
// This holds all state necessary for persisting/saving the state of the app
export const RoomConfig = BaseRoomConfig;
// If using additional slices like SQL Editor:
// export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
export type RoomConfig = z.infer<typeof RoomConfig>;

// Define your application state type
export type RoomState = RoomState<RoomConfig>;
// If using additional slices:
// export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;
```

2. Create your room store:

```typescript
import {createRoomShellSlice, createRoomStore} from '@sqlrooms/room-shell';
import {DatabaseIcon} from 'lucide-react';

export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room slice
    ...createRoomShellSlice<RoomConfig>({
      // config holds all state that should be persisted between sessions
      config: {
        title: 'My SQLRooms Room',
        layout: {
          type: LayoutTypes.enum.mosaic,
          nodes: {
            direction: 'row',
            first: RoomPanelTypes.enum['data-sources'],
            second: MAIN_VIEW,
            splitPercentage: 30,
          },
        },
        dataSources: [],
      },
      room: {
        panels: {
          'data-sources': {
            title: 'Data Sources',
            icon: DatabaseIcon,
            component: DataSourcesPanel,
            placement: 'sidebar',
          },
          [MAIN_VIEW]: {
            title: 'Main View',
            icon: () => null,
            component: MainView,
            placement: 'main',
          },
        },
      },
    })(set, get, store),

    // Add additional slices if needed
    // ...createSqlEditorSlice()(set, get, store),
  }),
);
```

3. Optionally add persistence:

```typescript
import {persist} from 'zustand/middleware';

// The config is meant to be saved for persistence between sessions
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  persist(
    (set, get, store) => ({
      // Store configuration as shown above
      ...createRoomShellSlice<RoomConfig>({
        config: {
          title: 'My SQLRooms Room',
          // ...other configuration
        },
        room: {
          panels: {
            // Panel definitions
          },
        },
      })(set, get, store),
    }),
    {
      name: 'app-state-storage',
      // Specify which parts of the state to persist
      partialize: (state) => ({
        // Persist configuration between sessions
        config: state.config,
        // Add other state properties you want to persist
      }),
    },
  ),
);
```

### Using the Room Store

Wrap your application with a `RoomShell` which provides the room store context:

```typescript
import {RoomShell} from '@sqlrooms/room-shell';
import {roomStore} from './store';

function App() {
  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar/>
      <RoomShell.LayoutComposer />
      <RoomShell.LoadingProgress />
    </RoomShell>
  );
}
```

Access the store in your components:

```typescript
function YourComponent() {
  // Config is now accessed directly from state, not from state.room.config
  const roomConfig = useRoomStore((state) => state.config);
  // Other state properties remain in the room object
  const dataSources = useRoomStore((state) => state.room.dataSources);

  return (
    // Your component JSX
  );
}
```

## Need Help?

* Start or join a discussion on [GitHub Discussions](https://github.com/sqlrooms/sqlrooms/discussions)
* File an issue on [GitHub](https://github.com/sqlrooms/sqlrooms/issues)

---

---
url: /custom-slice.md
---
# How Create a Custom Slice

A custom module typically bundles **state** (via a slice) with **UI** (via one or more panels) so it can be plugged into any room.

### Slice

Create a Zustand slice (e.g. `createMyModuleSlice`) that adds new state, selectors, and actions to the Room Store.\
Expose a `config` sub-object if you want part of that state to be persisted and validated.

### Panels

Build React components for the module's UI (tables, charts, wizards, etc.).\
Register them with the module so the Layout can discover them and users can open them from the sidebar or programmatically.

Combining the slice (logic/state) with the panels (presentation) lets you ship an encapsulated feature—like an AI assistant or advanced visualization toolkit—as a reusable package.

---

---
url: /api/ui/interfaces/BadgeProps.md
---
[@sqlrooms/ui](../index.md) / BadgeProps

# Interface: BadgeProps

## Extends

* `HTMLAttributes`<`HTMLDivElement`>.`VariantProps`<*typeof* [`badgeVariants`](../functions/badgeVariants.md)>

## Properties

### children?

> `optional` **children**: `ReactNode`

#### Inherited from

`React.HTMLAttributes.children`

***

### dangerouslySetInnerHTML?

> `optional` **dangerouslySetInnerHTML**: `object`

| Name | Type |
| ------ | ------ |
| `__html` | `string` | `TrustedHTML` |

#### Inherited from

`React.HTMLAttributes.dangerouslySetInnerHTML`

***

### onCopy?

> `optional` **onCopy**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCopy`

***

### onCopyCapture?

> `optional` **onCopyCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCopyCapture`

***

### onCut?

> `optional` **onCut**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCut`

***

### onCutCapture?

> `optional` **onCutCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCutCapture`

***

### onPaste?

> `optional` **onPaste**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPaste`

***

### onPasteCapture?

> `optional` **onPasteCapture**: `ClipboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPasteCapture`

***

### onCompositionEnd?

> `optional` **onCompositionEnd**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionEnd`

***

### onCompositionEndCapture?

> `optional` **onCompositionEndCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionEndCapture`

***

### onCompositionStart?

> `optional` **onCompositionStart**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionStart`

***

### onCompositionStartCapture?

> `optional` **onCompositionStartCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionStartCapture`

***

### onCompositionUpdate?

> `optional` **onCompositionUpdate**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionUpdate`

***

### onCompositionUpdateCapture?

> `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCompositionUpdateCapture`

***

### onFocus?

> `optional` **onFocus**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onFocus`

***

### onFocusCapture?

> `optional` **onFocusCapture**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onFocusCapture`

***

### onBlur?

> `optional` **onBlur**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBlur`

***

### onBlurCapture?

> `optional` **onBlurCapture**: `FocusEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBlurCapture`

***

### onChange?

> `optional` **onChange**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onChange`

***

### onChangeCapture?

> `optional` **onChangeCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onChangeCapture`

***

### onBeforeInput?

> `optional` **onBeforeInput**: `InputEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeInput`

***

### onBeforeInputCapture?

> `optional` **onBeforeInputCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeInputCapture`

***

### onInput?

> `optional` **onInput**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInput`

***

### onInputCapture?

> `optional` **onInputCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInputCapture`

***

### onReset?

> `optional` **onReset**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onReset`

***

### onResetCapture?

> `optional` **onResetCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onResetCapture`

***

### onSubmit?

> `optional` **onSubmit**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSubmit`

***

### onSubmitCapture?

> `optional` **onSubmitCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSubmitCapture`

***

### onInvalid?

> `optional` **onInvalid**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInvalid`

***

### onInvalidCapture?

> `optional` **onInvalidCapture**: `FormEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onInvalidCapture`

***

### onLoad?

> `optional` **onLoad**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoad`

***

### onLoadCapture?

> `optional` **onLoadCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadCapture`

***

### onError?

> `optional` **onError**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onError`

***

### onErrorCapture?

> `optional` **onErrorCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onErrorCapture`

***

### onKeyDown?

> `optional` **onKeyDown**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyDown`

***

### onKeyDownCapture?

> `optional` **onKeyDownCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyDownCapture`

***

### ~~onKeyPress?~~

> `optional` **onKeyPress**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Deprecated

Use `onKeyUp` or `onKeyDown` instead

#### Inherited from

`React.HTMLAttributes.onKeyPress`

***

### ~~onKeyPressCapture?~~

> `optional` **onKeyPressCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Deprecated

Use `onKeyUpCapture` or `onKeyDownCapture` instead

#### Inherited from

`React.HTMLAttributes.onKeyPressCapture`

***

### onKeyUp?

> `optional` **onKeyUp**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyUp`

***

### onKeyUpCapture?

> `optional` **onKeyUpCapture**: `KeyboardEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onKeyUpCapture`

***

### onAbort?

> `optional` **onAbort**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAbort`

***

### onAbortCapture?

> `optional` **onAbortCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAbortCapture`

***

### onCanPlay?

> `optional` **onCanPlay**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlay`

***

### onCanPlayCapture?

> `optional` **onCanPlayCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayCapture`

***

### onCanPlayThrough?

> `optional` **onCanPlayThrough**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayThrough`

***

### onCanPlayThroughCapture?

> `optional` **onCanPlayThroughCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onCanPlayThroughCapture`

***

### onDurationChange?

> `optional` **onDurationChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDurationChange`

***

### onDurationChangeCapture?

> `optional` **onDurationChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDurationChangeCapture`

***

### onEmptied?

> `optional` **onEmptied**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEmptied`

***

### onEmptiedCapture?

> `optional` **onEmptiedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEmptiedCapture`

***

### onEncrypted?

> `optional` **onEncrypted**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEncrypted`

***

### onEncryptedCapture?

> `optional` **onEncryptedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEncryptedCapture`

***

### onEnded?

> `optional` **onEnded**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEnded`

***

### onEndedCapture?

> `optional` **onEndedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onEndedCapture`

***

### onLoadedData?

> `optional` **onLoadedData**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedData`

***

### onLoadedDataCapture?

> `optional` **onLoadedDataCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedDataCapture`

***

### onLoadedMetadata?

> `optional` **onLoadedMetadata**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedMetadata`

***

### onLoadedMetadataCapture?

> `optional` **onLoadedMetadataCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadedMetadataCapture`

***

### onLoadStart?

> `optional` **onLoadStart**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadStart`

***

### onLoadStartCapture?

> `optional` **onLoadStartCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLoadStartCapture`

***

### onPause?

> `optional` **onPause**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPause`

***

### onPauseCapture?

> `optional` **onPauseCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPauseCapture`

***

### onPlay?

> `optional` **onPlay**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlay`

***

### onPlayCapture?

> `optional` **onPlayCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlayCapture`

***

### onPlaying?

> `optional` **onPlaying**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlaying`

***

### onPlayingCapture?

> `optional` **onPlayingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPlayingCapture`

***

### onProgress?

> `optional` **onProgress**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onProgress`

***

### onProgressCapture?

> `optional` **onProgressCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onProgressCapture`

***

### onRateChange?

> `optional` **onRateChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onRateChange`

***

### onRateChangeCapture?

> `optional` **onRateChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onRateChangeCapture`

***

### onSeeked?

> `optional` **onSeeked**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeeked`

***

### onSeekedCapture?

> `optional` **onSeekedCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeekedCapture`

***

### onSeeking?

> `optional` **onSeeking**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeeking`

***

### onSeekingCapture?

> `optional` **onSeekingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSeekingCapture`

***

### onStalled?

> `optional` **onStalled**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onStalled`

***

### onStalledCapture?

> `optional` **onStalledCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onStalledCapture`

***

### onSuspend?

> `optional` **onSuspend**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSuspend`

***

### onSuspendCapture?

> `optional` **onSuspendCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSuspendCapture`

***

### onTimeUpdate?

> `optional` **onTimeUpdate**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTimeUpdate`

***

### onTimeUpdateCapture?

> `optional` **onTimeUpdateCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTimeUpdateCapture`

***

### onVolumeChange?

> `optional` **onVolumeChange**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onVolumeChange`

***

### onVolumeChangeCapture?

> `optional` **onVolumeChangeCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onVolumeChangeCapture`

***

### onWaiting?

> `optional` **onWaiting**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWaiting`

***

### onWaitingCapture?

> `optional` **onWaitingCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWaitingCapture`

***

### onAuxClick?

> `optional` **onAuxClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAuxClick`

***

### onAuxClickCapture?

> `optional` **onAuxClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAuxClickCapture`

***

### onClick?

> `optional` **onClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onClick`

***

### onClickCapture?

> `optional` **onClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onClickCapture`

***

### onContextMenu?

> `optional` **onContextMenu**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onContextMenu`

***

### onContextMenuCapture?

> `optional` **onContextMenuCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onContextMenuCapture`

***

### onDoubleClick?

> `optional` **onDoubleClick**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDoubleClick`

***

### onDoubleClickCapture?

> `optional` **onDoubleClickCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDoubleClickCapture`

***

### onDrag?

> `optional` **onDrag**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDrag`

***

### onDragCapture?

> `optional` **onDragCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragCapture`

***

### onDragEnd?

> `optional` **onDragEnd**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnd`

***

### onDragEndCapture?

> `optional` **onDragEndCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEndCapture`

***

### onDragEnter?

> `optional` **onDragEnter**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnter`

***

### onDragEnterCapture?

> `optional` **onDragEnterCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragEnterCapture`

***

### onDragExit?

> `optional` **onDragExit**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragExit`

***

### onDragExitCapture?

> `optional` **onDragExitCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragExitCapture`

***

### onDragLeave?

> `optional` **onDragLeave**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragLeave`

***

### onDragLeaveCapture?

> `optional` **onDragLeaveCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragLeaveCapture`

***

### onDragOver?

> `optional` **onDragOver**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragOver`

***

### onDragOverCapture?

> `optional` **onDragOverCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragOverCapture`

***

### onDragStart?

> `optional` **onDragStart**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragStart`

***

### onDragStartCapture?

> `optional` **onDragStartCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDragStartCapture`

***

### onDrop?

> `optional` **onDrop**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDrop`

***

### onDropCapture?

> `optional` **onDropCapture**: `DragEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onDropCapture`

***

### onMouseDown?

> `optional` **onMouseDown**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseDown`

***

### onMouseDownCapture?

> `optional` **onMouseDownCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseDownCapture`

***

### onMouseEnter?

> `optional` **onMouseEnter**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseEnter`

***

### onMouseLeave?

> `optional` **onMouseLeave**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseLeave`

***

### onMouseMove?

> `optional` **onMouseMove**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseMove`

***

### onMouseMoveCapture?

> `optional` **onMouseMoveCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseMoveCapture`

***

### onMouseOut?

> `optional` **onMouseOut**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOut`

***

### onMouseOutCapture?

> `optional` **onMouseOutCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOutCapture`

***

### onMouseOver?

> `optional` **onMouseOver**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOver`

***

### onMouseOverCapture?

> `optional` **onMouseOverCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseOverCapture`

***

### onMouseUp?

> `optional` **onMouseUp**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseUp`

***

### onMouseUpCapture?

> `optional` **onMouseUpCapture**: `MouseEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onMouseUpCapture`

***

### onSelect?

> `optional` **onSelect**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSelect`

***

### onSelectCapture?

> `optional` **onSelectCapture**: `ReactEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onSelectCapture`

***

### onTouchCancel?

> `optional` **onTouchCancel**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchCancel`

***

### onTouchCancelCapture?

> `optional` **onTouchCancelCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchCancelCapture`

***

### onTouchEnd?

> `optional` **onTouchEnd**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchEnd`

***

### onTouchEndCapture?

> `optional` **onTouchEndCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchEndCapture`

***

### onTouchMove?

> `optional` **onTouchMove**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchMove`

***

### onTouchMoveCapture?

> `optional` **onTouchMoveCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchMoveCapture`

***

### onTouchStart?

> `optional` **onTouchStart**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchStart`

***

### onTouchStartCapture?

> `optional` **onTouchStartCapture**: `TouchEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTouchStartCapture`

***

### onPointerDown?

> `optional` **onPointerDown**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerDown`

***

### onPointerDownCapture?

> `optional` **onPointerDownCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerDownCapture`

***

### onPointerMove?

> `optional` **onPointerMove**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerMove`

***

### onPointerMoveCapture?

> `optional` **onPointerMoveCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerMoveCapture`

***

### onPointerUp?

> `optional` **onPointerUp**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerUp`

***

### onPointerUpCapture?

> `optional` **onPointerUpCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerUpCapture`

***

### onPointerCancel?

> `optional` **onPointerCancel**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerCancel`

***

### onPointerCancelCapture?

> `optional` **onPointerCancelCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerCancelCapture`

***

### onPointerEnter?

> `optional` **onPointerEnter**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerEnter`

***

### onPointerLeave?

> `optional` **onPointerLeave**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerLeave`

***

### onPointerOver?

> `optional` **onPointerOver**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOver`

***

### onPointerOverCapture?

> `optional` **onPointerOverCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOverCapture`

***

### onPointerOut?

> `optional` **onPointerOut**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOut`

***

### onPointerOutCapture?

> `optional` **onPointerOutCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onPointerOutCapture`

***

### onGotPointerCapture?

> `optional` **onGotPointerCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onGotPointerCapture`

***

### onGotPointerCaptureCapture?

> `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onGotPointerCaptureCapture`

***

### onLostPointerCapture?

> `optional` **onLostPointerCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLostPointerCapture`

***

### onLostPointerCaptureCapture?

> `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onLostPointerCaptureCapture`

***

### onScroll?

> `optional` **onScroll**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScroll`

***

### onScrollCapture?

> `optional` **onScrollCapture**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollCapture`

***

### onScrollEnd?

> `optional` **onScrollEnd**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollEnd`

***

### onScrollEndCapture?

> `optional` **onScrollEndCapture**: `UIEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onScrollEndCapture`

***

### onWheel?

> `optional` **onWheel**: `WheelEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWheel`

***

### onWheelCapture?

> `optional` **onWheelCapture**: `WheelEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onWheelCapture`

***

### onAnimationStart?

> `optional` **onAnimationStart**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationStart`

***

### onAnimationStartCapture?

> `optional` **onAnimationStartCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationStartCapture`

***

### onAnimationEnd?

> `optional` **onAnimationEnd**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationEnd`

***

### onAnimationEndCapture?

> `optional` **onAnimationEndCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationEndCapture`

***

### onAnimationIteration?

> `optional` **onAnimationIteration**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationIteration`

***

### onAnimationIterationCapture?

> `optional` **onAnimationIterationCapture**: `AnimationEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onAnimationIterationCapture`

***

### onToggle?

> `optional` **onToggle**: `ToggleEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onToggle`

***

### onBeforeToggle?

> `optional` **onBeforeToggle**: `ToggleEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onBeforeToggle`

***

### onTransitionCancel?

> `optional` **onTransitionCancel**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionCancel`

***

### onTransitionCancelCapture?

> `optional` **onTransitionCancelCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionCancelCapture`

***

### onTransitionEnd?

> `optional` **onTransitionEnd**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionEnd`

***

### onTransitionEndCapture?

> `optional` **onTransitionEndCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionEndCapture`

***

### onTransitionRun?

> `optional` **onTransitionRun**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionRun`

***

### onTransitionRunCapture?

> `optional` **onTransitionRunCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionRunCapture`

***

### onTransitionStart?

> `optional` **onTransitionStart**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionStart`

***

### onTransitionStartCapture?

> `optional` **onTransitionStartCapture**: `TransitionEventHandler`<`HTMLDivElement`>

#### Inherited from

`React.HTMLAttributes.onTransitionStartCapture`

***

### aria-activedescendant?

> `optional` **aria-activedescendant**: `string`

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

#### Inherited from

`React.HTMLAttributes.aria-activedescendant`

***

### aria-atomic?

> `optional` **aria-atomic**: `Booleanish`

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

#### Inherited from

`React.HTMLAttributes.aria-atomic`

***

### aria-autocomplete?

> `optional` **aria-autocomplete**: `"none"` | `"list"` | `"inline"` | `"both"`

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.

#### Inherited from

`React.HTMLAttributes.aria-autocomplete`

***

### aria-braillelabel?

> `optional` **aria-braillelabel**: `string`

Defines a string value that labels the current element, which is intended to be converted into Braille.

#### See

aria-label.

#### Inherited from

`React.HTMLAttributes.aria-braillelabel`

***

### aria-brailleroledescription?

> `optional` **aria-brailleroledescription**: `string`

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

#### See

aria-roledescription.

#### Inherited from

`React.HTMLAttributes.aria-brailleroledescription`

***

### aria-busy?

> `optional` **aria-busy**: `Booleanish`

#### Inherited from

`React.HTMLAttributes.aria-busy`

***

### aria-checked?

> `optional` **aria-checked**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

#### See

* aria-pressed
* aria-selected.

#### Inherited from

`React.HTMLAttributes.aria-checked`

***

### aria-colcount?

> `optional` **aria-colcount**: `number`

Defines the total number of columns in a table, grid, or treegrid.

#### See

aria-colindex.

#### Inherited from

`React.HTMLAttributes.aria-colcount`

***

### aria-colindex?

> `optional` **aria-colindex**: `number`

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

#### See

* aria-colcount
* aria-colspan.

#### Inherited from

`React.HTMLAttributes.aria-colindex`

***

### aria-colindextext?

> `optional` **aria-colindextext**: `string`

Defines a human readable text alternative of aria-colindex.

#### See

aria-rowindextext.

#### Inherited from

`React.HTMLAttributes.aria-colindextext`

***

### aria-colspan?

> `optional` **aria-colspan**: `number`

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-colindex
* aria-rowspan.

#### Inherited from

`React.HTMLAttributes.aria-colspan`

***

### aria-controls?

> `optional` **aria-controls**: `string`

Identifies the element (or elements) whose contents or presence are controlled by the current element.

#### See

aria-owns.

#### Inherited from

`React.HTMLAttributes.aria-controls`

***

### aria-current?

> `optional` **aria-current**: `boolean` | `"time"` | `"true"` | `"false"` | `"page"` | `"step"` | `"location"` | `"date"`

Indicates the element that represents the current item within a container or set of related elements.

#### Inherited from

`React.HTMLAttributes.aria-current`

***

### aria-describedby?

> `optional` **aria-describedby**: `string`

Identifies the element (or elements) that describes the object.

#### See

aria-labelledby

#### Inherited from

`React.HTMLAttributes.aria-describedby`

***

### aria-description?

> `optional` **aria-description**: `string`

Defines a string value that describes or annotates the current element.

#### See

related aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-description`

***

### aria-details?

> `optional` **aria-details**: `string`

Identifies the element that provides a detailed, extended description for the object.

#### See

aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-details`

***

### aria-disabled?

> `optional` **aria-disabled**: `Booleanish`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

#### See

* aria-hidden
* aria-readonly.

#### Inherited from

`React.HTMLAttributes.aria-disabled`

***

### ~~aria-dropeffect?~~

> `optional` **aria-dropeffect**: `"link"` | `"none"` | `"copy"` | `"execute"` | `"move"` | `"popup"`

Indicates what functions can be performed when a dragged object is released on the drop target.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.HTMLAttributes.aria-dropeffect`

***

### aria-errormessage?

> `optional` **aria-errormessage**: `string`

Identifies the element that provides an error message for the object.

#### See

* aria-invalid
* aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-errormessage`

***

### aria-expanded?

> `optional` **aria-expanded**: `Booleanish`

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

#### Inherited from

`React.HTMLAttributes.aria-expanded`

***

### aria-flowto?

> `optional` **aria-flowto**: `string`

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order.

#### Inherited from

`React.HTMLAttributes.aria-flowto`

***

### ~~aria-grabbed?~~

> `optional` **aria-grabbed**: `Booleanish`

Indicates an element's "grabbed" state in a drag-and-drop operation.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.HTMLAttributes.aria-grabbed`

***

### aria-haspopup?

> `optional` **aria-haspopup**: `boolean` | `"dialog"` | `"menu"` | `"true"` | `"false"` | `"grid"` | `"listbox"` | `"tree"`

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

#### Inherited from

`React.HTMLAttributes.aria-haspopup`

***

### aria-hidden?

> `optional` **aria-hidden**: `Booleanish`

Indicates whether the element is exposed to an accessibility API.

#### See

aria-disabled.

#### Inherited from

`React.HTMLAttributes.aria-hidden`

***

### aria-invalid?

> `optional` **aria-invalid**: `boolean` | `"true"` | `"false"` | `"grammar"` | `"spelling"`

Indicates the entered value does not conform to the format expected by the application.

#### See

aria-errormessage.

#### Inherited from

`React.HTMLAttributes.aria-invalid`

***

### aria-keyshortcuts?

> `optional` **aria-keyshortcuts**: `string`

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

#### Inherited from

`React.HTMLAttributes.aria-keyshortcuts`

***

### aria-label?

> `optional` **aria-label**: `string`

Defines a string value that labels the current element.

#### See

aria-labelledby.

#### Inherited from

`React.HTMLAttributes.aria-label`

***

### aria-labelledby?

> `optional` **aria-labelledby**: `string`

Identifies the element (or elements) that labels the current element.

#### See

aria-describedby.

#### Inherited from

`React.HTMLAttributes.aria-labelledby`

***

### aria-level?

> `optional` **aria-level**: `number`

Defines the hierarchical level of an element within a structure.

#### Inherited from

`React.HTMLAttributes.aria-level`

***

### aria-live?

> `optional` **aria-live**: `"off"` | `"assertive"` | `"polite"`

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

#### Inherited from

`React.HTMLAttributes.aria-live`

***

### aria-modal?

> `optional` **aria-modal**: `Booleanish`

Indicates whether an element is modal when displayed.

#### Inherited from

`React.HTMLAttributes.aria-modal`

***

### aria-multiline?

> `optional` **aria-multiline**: `Booleanish`

Indicates whether a text box accepts multiple lines of input or only a single line.

#### Inherited from

`React.HTMLAttributes.aria-multiline`

***

### aria-multiselectable?

> `optional` **aria-multiselectable**: `Booleanish`

Indicates that the user may select more than one item from the current selectable descendants.

#### Inherited from

`React.HTMLAttributes.aria-multiselectable`

***

### aria-orientation?

> `optional` **aria-orientation**: `"horizontal"` | `"vertical"`

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

#### Inherited from

`React.HTMLAttributes.aria-orientation`

***

### aria-owns?

> `optional` **aria-owns**: `string`

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

#### See

aria-controls.

#### Inherited from

`React.HTMLAttributes.aria-owns`

***

### aria-placeholder?

> `optional` **aria-placeholder**: `string`

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.

#### Inherited from

`React.HTMLAttributes.aria-placeholder`

***

### aria-posinset?

> `optional` **aria-posinset**: `number`

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-setsize.

#### Inherited from

`React.HTMLAttributes.aria-posinset`

***

### aria-pressed?

> `optional` **aria-pressed**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "pressed" state of toggle buttons.

#### See

* aria-checked
* aria-selected.

#### Inherited from

`React.HTMLAttributes.aria-pressed`

***

### aria-readonly?

> `optional` **aria-readonly**: `Booleanish`

Indicates that the element is not editable, but is otherwise operable.

#### See

aria-disabled.

#### Inherited from

`React.HTMLAttributes.aria-readonly`

***

### aria-relevant?

> `optional` **aria-relevant**: `"text"` | `"additions"` | `"additions removals"` | `"additions text"` | `"all"` | `"removals"` | `"removals additions"` | `"removals text"` | `"text additions"` | `"text removals"`

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

#### See

aria-atomic.

#### Inherited from

`React.HTMLAttributes.aria-relevant`

***

### aria-required?

> `optional` **aria-required**: `Booleanish`

Indicates that user input is required on the element before a form may be submitted.

#### Inherited from

`React.HTMLAttributes.aria-required`

***

### aria-roledescription?

> `optional` **aria-roledescription**: `string`

Defines a human-readable, author-localized description for the role of an element.

#### Inherited from

`React.HTMLAttributes.aria-roledescription`

***

### aria-rowcount?

> `optional` **aria-rowcount**: `number`

Defines the total number of rows in a table, grid, or treegrid.

#### See

aria-rowindex.

#### Inherited from

`React.HTMLAttributes.aria-rowcount`

***

### aria-rowindex?

> `optional` **aria-rowindex**: `number`

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

#### See

* aria-rowcount
* aria-rowspan.

#### Inherited from

`React.HTMLAttributes.aria-rowindex`

***

### aria-rowindextext?

> `optional` **aria-rowindextext**: `string`

Defines a human readable text alternative of aria-rowindex.

#### See

aria-colindextext.

#### Inherited from

`React.HTMLAttributes.aria-rowindextext`

***

### aria-rowspan?

> `optional` **aria-rowspan**: `number`

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-rowindex
* aria-colspan.

#### Inherited from

`React.HTMLAttributes.aria-rowspan`

***

### aria-selected?

> `optional` **aria-selected**: `Booleanish`

Indicates the current "selected" state of various widgets.

#### See

* aria-checked
* aria-pressed.

#### Inherited from

`React.HTMLAttributes.aria-selected`

***

### aria-setsize?

> `optional` **aria-setsize**: `number`

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-posinset.

#### Inherited from

`React.HTMLAttributes.aria-setsize`

***

### aria-sort?

> `optional` **aria-sort**: `"none"` | `"ascending"` | `"descending"` | `"other"`

Indicates if items in a table or grid are sorted in ascending or descending order.

#### Inherited from

`React.HTMLAttributes.aria-sort`

***

### aria-valuemax?

> `optional` **aria-valuemax**: `number`

Defines the maximum allowed value for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuemax`

***

### aria-valuemin?

> `optional` **aria-valuemin**: `number`

Defines the minimum allowed value for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuemin`

***

### aria-valuenow?

> `optional` **aria-valuenow**: `number`

Defines the current value for a range widget.

#### See

aria-valuetext.

#### Inherited from

`React.HTMLAttributes.aria-valuenow`

***

### aria-valuetext?

> `optional` **aria-valuetext**: `string`

Defines the human readable text alternative of aria-valuenow for a range widget.

#### Inherited from

`React.HTMLAttributes.aria-valuetext`

***

### defaultChecked?

> `optional` **defaultChecked**: `boolean`

#### Inherited from

`React.HTMLAttributes.defaultChecked`

***

### defaultValue?

> `optional` **defaultValue**: `string` | `number` | readonly `string`\[]

#### Inherited from

`React.HTMLAttributes.defaultValue`

***

### suppressContentEditableWarning?

> `optional` **suppressContentEditableWarning**: `boolean`

#### Inherited from

`React.HTMLAttributes.suppressContentEditableWarning`

***

### suppressHydrationWarning?

> `optional` **suppressHydrationWarning**: `boolean`

#### Inherited from

`React.HTMLAttributes.suppressHydrationWarning`

***

### accessKey?

> `optional` **accessKey**: `string`

#### Inherited from

`React.HTMLAttributes.accessKey`

***

### autoCapitalize?

> `optional` **autoCapitalize**: `"off"` | `"none"` | `"on"` | `"sentences"` | `"words"` | `"characters"` | `string` & `object`

#### Inherited from

`React.HTMLAttributes.autoCapitalize`

***

### autoFocus?

> `optional` **autoFocus**: `boolean`

#### Inherited from

`React.HTMLAttributes.autoFocus`

***

### className?

> `optional` **className**: `string`

#### Inherited from

`React.HTMLAttributes.className`

***

### contentEditable?

> `optional` **contentEditable**: `Booleanish` | `"inherit"` | `"plaintext-only"`

#### Inherited from

`React.HTMLAttributes.contentEditable`

***

### contextMenu?

> `optional` **contextMenu**: `string`

#### Inherited from

`React.HTMLAttributes.contextMenu`

***

### dir?

> `optional` **dir**: `string`

#### Inherited from

`React.HTMLAttributes.dir`

***

### draggable?

> `optional` **draggable**: `Booleanish`

#### Inherited from

`React.HTMLAttributes.draggable`

***

### enterKeyHint?

> `optional` **enterKeyHint**: `"search"` | `"enter"` | `"done"` | `"go"` | `"next"` | `"previous"` | `"send"`

#### Inherited from

`React.HTMLAttributes.enterKeyHint`

***

### hidden?

> `optional` **hidden**: `boolean`

#### Inherited from

`React.HTMLAttributes.hidden`

***

### id?

> `optional` **id**: `string`

#### Inherited from

`React.HTMLAttributes.id`

***

### lang?

> `optional` **lang**: `string`

#### Inherited from

`React.HTMLAttributes.lang`

***

### nonce?

> `optional` **nonce**: `string`

#### Inherited from

`React.HTMLAttributes.nonce`

***

### slot?

> `optional` **slot**: `string`

#### Inherited from

`React.HTMLAttributes.slot`

***

### spellCheck?

> `optional` **spellCheck**: `Booleanish`

#### Inherited from

`React.HTMLAttributes.spellCheck`

***

### style?

> `optional` **style**: `CSSProperties`

#### Inherited from

`React.HTMLAttributes.style`

***

### tabIndex?

> `optional` **tabIndex**: `number`

#### Inherited from

`React.HTMLAttributes.tabIndex`

***

### title?

> `optional` **title**: `string`

#### Inherited from

`React.HTMLAttributes.title`

***

### translate?

> `optional` **translate**: `"yes"` | `"no"`

#### Inherited from

`React.HTMLAttributes.translate`

***

### radioGroup?

> `optional` **radioGroup**: `string`

#### Inherited from

`React.HTMLAttributes.radioGroup`

***

### role?

> `optional` **role**: `AriaRole`

#### Inherited from

`React.HTMLAttributes.role`

***

### about?

> `optional` **about**: `string`

#### Inherited from

`React.HTMLAttributes.about`

***

### content?

> `optional` **content**: `string`

#### Inherited from

`React.HTMLAttributes.content`

***

### datatype?

> `optional` **datatype**: `string`

#### Inherited from

`React.HTMLAttributes.datatype`

***

### inlist?

> `optional` **inlist**: `any`

#### Inherited from

`React.HTMLAttributes.inlist`

***

### prefix?

> `optional` **prefix**: `string`

#### Inherited from

`React.HTMLAttributes.prefix`

***

### property?

> `optional` **property**: `string`

#### Inherited from

`React.HTMLAttributes.property`

***

### rel?

> `optional` **rel**: `string`

#### Inherited from

`React.HTMLAttributes.rel`

***

### resource?

> `optional` **resource**: `string`

#### Inherited from

`React.HTMLAttributes.resource`

***

### rev?

> `optional` **rev**: `string`

#### Inherited from

`React.HTMLAttributes.rev`

***

### typeof?

> `optional` **typeof**: `string`

#### Inherited from

`React.HTMLAttributes.typeof`

***

### vocab?

> `optional` **vocab**: `string`

#### Inherited from

`React.HTMLAttributes.vocab`

***

### autoCorrect?

> `optional` **autoCorrect**: `string`

#### Inherited from

`React.HTMLAttributes.autoCorrect`

***

### autoSave?

> `optional` **autoSave**: `string`

#### Inherited from

`React.HTMLAttributes.autoSave`

***

### color?

> `optional` **color**: `string`

#### Inherited from

`React.HTMLAttributes.color`

***

### itemProp?

> `optional` **itemProp**: `string`

#### Inherited from

`React.HTMLAttributes.itemProp`

***

### itemScope?

> `optional` **itemScope**: `boolean`

#### Inherited from

`React.HTMLAttributes.itemScope`

***

### itemType?

> `optional` **itemType**: `string`

#### Inherited from

`React.HTMLAttributes.itemType`

***

### itemID?

> `optional` **itemID**: `string`

#### Inherited from

`React.HTMLAttributes.itemID`

***

### itemRef?

> `optional` **itemRef**: `string`

#### Inherited from

`React.HTMLAttributes.itemRef`

***

### results?

> `optional` **results**: `number`

#### Inherited from

`React.HTMLAttributes.results`

***

### security?

> `optional` **security**: `string`

#### Inherited from

`React.HTMLAttributes.security`

***

### unselectable?

> `optional` **unselectable**: `"off"` | `"on"`

#### Inherited from

`React.HTMLAttributes.unselectable`

***

### popover?

> `optional` **popover**: `""` | `"auto"` | `"manual"`

#### Inherited from

`React.HTMLAttributes.popover`

***

### popoverTargetAction?

> `optional` **popoverTargetAction**: `"toggle"` | `"show"` | `"hide"`

#### Inherited from

`React.HTMLAttributes.popoverTargetAction`

***

### popoverTarget?

> `optional` **popoverTarget**: `string`

#### Inherited from

`React.HTMLAttributes.popoverTarget`

***

### inert?

> `optional` **inert**: `boolean`

#### See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

#### Inherited from

`React.HTMLAttributes.inert`

***

### inputMode?

> `optional` **inputMode**: `"search"` | `"text"` | `"none"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"`

Hints at the type of data that might be entered by the user while editing the element or its contents

#### See

<https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute>

#### Inherited from

`React.HTMLAttributes.inputMode`

***

### is?

> `optional` **is**: `string`

Specify that a standard HTML element should behave like a defined custom built-in element

#### See

<https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is>

#### Inherited from

`React.HTMLAttributes.is`

***

### exportparts?

> `optional` **exportparts**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts>

#### Inherited from

`React.HTMLAttributes.exportparts`

***

### part?

> `optional` **part**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part>

#### Inherited from

`React.HTMLAttributes.part`

***

### variant?

> `optional` **variant**: `null` | `"default"` | `"destructive"` | `"secondary"` | `"outline"`

#### Inherited from

`VariantProps.variant`

---

---
url: /api/duckdb/interfaces/BaseDuckDbConnectorImpl.md
---
[@sqlrooms/duckdb](../index.md) / BaseDuckDbConnectorImpl

# Interface: BaseDuckDbConnectorImpl

## Methods

### initializeInternal()?

> `optional` **initializeInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### destroyInternal()?

> `optional` **destroyInternal**(): `Promise`<`void`>

#### Returns

`Promise`<`void`>

***

### executeQueryInternal()

> **executeQueryInternal**<`T`>(`query`, `signal`, `queryId`?): `Promise`<`Table`<`T`>>

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |
| `signal` | `AbortSignal` |
| `queryId`? | `string` |

#### Returns

`Promise`<`Table`<`T`>>

***

### cancelQueryInternal()?

> `optional` **cancelQueryInternal**(`queryId`): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `queryId` | `string` |

#### Returns

`Promise`<`void`>

***

### loadArrowInternal()?

> `optional` **loadArrowInternal**(`file`, `tableName`, `opts`?): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> |
| `tableName` | `string` |
| `opts`? | { `schema`: `string`; } |
| `opts.schema`? | `string` |

#### Returns

`Promise`<`void`>

***

### loadObjectsInternal()?

> `optional` **loadObjectsInternal**(`file`, `tableName`, `opts`?): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `Record`<`string`, `unknown`>\[] |
| `tableName` | `string` |
| `opts`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> |

#### Returns

`Promise`<`void`>

***

### loadFileInternal()?

> `optional` **loadFileInternal**(`file`, `tableName`, `opts`?): `Promise`<`void`>

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `file` | `string` | `File` |
| `tableName` | `string` |
| `opts`? | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> |

#### Returns

`Promise`<`void`>

---

---
url: /api/duckdb/interfaces/BaseDuckDbConnectorOptions.md
---
[@sqlrooms/duckdb](../index.md) / BaseDuckDbConnectorOptions

# Interface: BaseDuckDbConnectorOptions

## Properties

### dbPath?

> `optional` **dbPath**: `string`

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

---

---
url: /api/ui/interfaces/ButtonProps.md
---
[@sqlrooms/ui](../index.md) / ButtonProps

# Interface: ButtonProps

## Extends

* `ButtonHTMLAttributes`<`HTMLButtonElement`>.`VariantProps`<*typeof* [`buttonVariants`](../functions/buttonVariants.md)>

## Properties

### children?

> `optional` **children**: `ReactNode`

#### Inherited from

`React.ButtonHTMLAttributes.children`

***

### dangerouslySetInnerHTML?

> `optional` **dangerouslySetInnerHTML**: `object`

| Name | Type |
| ------ | ------ |
| `__html` | `string` | `TrustedHTML` |

#### Inherited from

`React.ButtonHTMLAttributes.dangerouslySetInnerHTML`

***

### onCopy?

> `optional` **onCopy**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCopy`

***

### onCopyCapture?

> `optional` **onCopyCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCopyCapture`

***

### onCut?

> `optional` **onCut**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCut`

***

### onCutCapture?

> `optional` **onCutCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCutCapture`

***

### onPaste?

> `optional` **onPaste**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPaste`

***

### onPasteCapture?

> `optional` **onPasteCapture**: `ClipboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPasteCapture`

***

### onCompositionEnd?

> `optional` **onCompositionEnd**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionEnd`

***

### onCompositionEndCapture?

> `optional` **onCompositionEndCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionEndCapture`

***

### onCompositionStart?

> `optional` **onCompositionStart**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionStart`

***

### onCompositionStartCapture?

> `optional` **onCompositionStartCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionStartCapture`

***

### onCompositionUpdate?

> `optional` **onCompositionUpdate**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionUpdate`

***

### onCompositionUpdateCapture?

> `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCompositionUpdateCapture`

***

### onFocus?

> `optional` **onFocus**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onFocus`

***

### onFocusCapture?

> `optional` **onFocusCapture**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onFocusCapture`

***

### onBlur?

> `optional` **onBlur**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBlur`

***

### onBlurCapture?

> `optional` **onBlurCapture**: `FocusEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBlurCapture`

***

### onChange?

> `optional` **onChange**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onChange`

***

### onChangeCapture?

> `optional` **onChangeCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onChangeCapture`

***

### onBeforeInput?

> `optional` **onBeforeInput**: `InputEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeInput`

***

### onBeforeInputCapture?

> `optional` **onBeforeInputCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeInputCapture`

***

### onInput?

> `optional` **onInput**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInput`

***

### onInputCapture?

> `optional` **onInputCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInputCapture`

***

### onReset?

> `optional` **onReset**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onReset`

***

### onResetCapture?

> `optional` **onResetCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onResetCapture`

***

### onSubmit?

> `optional` **onSubmit**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSubmit`

***

### onSubmitCapture?

> `optional` **onSubmitCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSubmitCapture`

***

### onInvalid?

> `optional` **onInvalid**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInvalid`

***

### onInvalidCapture?

> `optional` **onInvalidCapture**: `FormEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onInvalidCapture`

***

### onLoad?

> `optional` **onLoad**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoad`

***

### onLoadCapture?

> `optional` **onLoadCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadCapture`

***

### onError?

> `optional` **onError**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onError`

***

### onErrorCapture?

> `optional` **onErrorCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onErrorCapture`

***

### onKeyDown?

> `optional` **onKeyDown**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyDown`

***

### onKeyDownCapture?

> `optional` **onKeyDownCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyDownCapture`

***

### ~~onKeyPress?~~

> `optional` **onKeyPress**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Deprecated

Use `onKeyUp` or `onKeyDown` instead

#### Inherited from

`React.ButtonHTMLAttributes.onKeyPress`

***

### ~~onKeyPressCapture?~~

> `optional` **onKeyPressCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Deprecated

Use `onKeyUpCapture` or `onKeyDownCapture` instead

#### Inherited from

`React.ButtonHTMLAttributes.onKeyPressCapture`

***

### onKeyUp?

> `optional` **onKeyUp**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyUp`

***

### onKeyUpCapture?

> `optional` **onKeyUpCapture**: `KeyboardEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onKeyUpCapture`

***

### onAbort?

> `optional` **onAbort**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAbort`

***

### onAbortCapture?

> `optional` **onAbortCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAbortCapture`

***

### onCanPlay?

> `optional` **onCanPlay**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlay`

***

### onCanPlayCapture?

> `optional` **onCanPlayCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayCapture`

***

### onCanPlayThrough?

> `optional` **onCanPlayThrough**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayThrough`

***

### onCanPlayThroughCapture?

> `optional` **onCanPlayThroughCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onCanPlayThroughCapture`

***

### onDurationChange?

> `optional` **onDurationChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDurationChange`

***

### onDurationChangeCapture?

> `optional` **onDurationChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDurationChangeCapture`

***

### onEmptied?

> `optional` **onEmptied**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEmptied`

***

### onEmptiedCapture?

> `optional` **onEmptiedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEmptiedCapture`

***

### onEncrypted?

> `optional` **onEncrypted**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEncrypted`

***

### onEncryptedCapture?

> `optional` **onEncryptedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEncryptedCapture`

***

### onEnded?

> `optional` **onEnded**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEnded`

***

### onEndedCapture?

> `optional` **onEndedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onEndedCapture`

***

### onLoadedData?

> `optional` **onLoadedData**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedData`

***

### onLoadedDataCapture?

> `optional` **onLoadedDataCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedDataCapture`

***

### onLoadedMetadata?

> `optional` **onLoadedMetadata**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedMetadata`

***

### onLoadedMetadataCapture?

> `optional` **onLoadedMetadataCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadedMetadataCapture`

***

### onLoadStart?

> `optional` **onLoadStart**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadStart`

***

### onLoadStartCapture?

> `optional` **onLoadStartCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLoadStartCapture`

***

### onPause?

> `optional` **onPause**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPause`

***

### onPauseCapture?

> `optional` **onPauseCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPauseCapture`

***

### onPlay?

> `optional` **onPlay**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlay`

***

### onPlayCapture?

> `optional` **onPlayCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlayCapture`

***

### onPlaying?

> `optional` **onPlaying**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlaying`

***

### onPlayingCapture?

> `optional` **onPlayingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPlayingCapture`

***

### onProgress?

> `optional` **onProgress**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onProgress`

***

### onProgressCapture?

> `optional` **onProgressCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onProgressCapture`

***

### onRateChange?

> `optional` **onRateChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onRateChange`

***

### onRateChangeCapture?

> `optional` **onRateChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onRateChangeCapture`

***

### onSeeked?

> `optional` **onSeeked**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeeked`

***

### onSeekedCapture?

> `optional` **onSeekedCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeekedCapture`

***

### onSeeking?

> `optional` **onSeeking**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeeking`

***

### onSeekingCapture?

> `optional` **onSeekingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSeekingCapture`

***

### onStalled?

> `optional` **onStalled**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onStalled`

***

### onStalledCapture?

> `optional` **onStalledCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onStalledCapture`

***

### onSuspend?

> `optional` **onSuspend**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSuspend`

***

### onSuspendCapture?

> `optional` **onSuspendCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSuspendCapture`

***

### onTimeUpdate?

> `optional` **onTimeUpdate**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTimeUpdate`

***

### onTimeUpdateCapture?

> `optional` **onTimeUpdateCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTimeUpdateCapture`

***

### onVolumeChange?

> `optional` **onVolumeChange**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onVolumeChange`

***

### onVolumeChangeCapture?

> `optional` **onVolumeChangeCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onVolumeChangeCapture`

***

### onWaiting?

> `optional` **onWaiting**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWaiting`

***

### onWaitingCapture?

> `optional` **onWaitingCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWaitingCapture`

***

### onAuxClick?

> `optional` **onAuxClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAuxClick`

***

### onAuxClickCapture?

> `optional` **onAuxClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAuxClickCapture`

***

### onClick?

> `optional` **onClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onClick`

***

### onClickCapture?

> `optional` **onClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onClickCapture`

***

### onContextMenu?

> `optional` **onContextMenu**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onContextMenu`

***

### onContextMenuCapture?

> `optional` **onContextMenuCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onContextMenuCapture`

***

### onDoubleClick?

> `optional` **onDoubleClick**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDoubleClick`

***

### onDoubleClickCapture?

> `optional` **onDoubleClickCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDoubleClickCapture`

***

### onDrag?

> `optional` **onDrag**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDrag`

***

### onDragCapture?

> `optional` **onDragCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragCapture`

***

### onDragEnd?

> `optional` **onDragEnd**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnd`

***

### onDragEndCapture?

> `optional` **onDragEndCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEndCapture`

***

### onDragEnter?

> `optional` **onDragEnter**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnter`

***

### onDragEnterCapture?

> `optional` **onDragEnterCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragEnterCapture`

***

### onDragExit?

> `optional` **onDragExit**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragExit`

***

### onDragExitCapture?

> `optional` **onDragExitCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragExitCapture`

***

### onDragLeave?

> `optional` **onDragLeave**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragLeave`

***

### onDragLeaveCapture?

> `optional` **onDragLeaveCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragLeaveCapture`

***

### onDragOver?

> `optional` **onDragOver**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragOver`

***

### onDragOverCapture?

> `optional` **onDragOverCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragOverCapture`

***

### onDragStart?

> `optional` **onDragStart**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragStart`

***

### onDragStartCapture?

> `optional` **onDragStartCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDragStartCapture`

***

### onDrop?

> `optional` **onDrop**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDrop`

***

### onDropCapture?

> `optional` **onDropCapture**: `DragEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onDropCapture`

***

### onMouseDown?

> `optional` **onMouseDown**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseDown`

***

### onMouseDownCapture?

> `optional` **onMouseDownCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseDownCapture`

***

### onMouseEnter?

> `optional` **onMouseEnter**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseEnter`

***

### onMouseLeave?

> `optional` **onMouseLeave**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseLeave`

***

### onMouseMove?

> `optional` **onMouseMove**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseMove`

***

### onMouseMoveCapture?

> `optional` **onMouseMoveCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseMoveCapture`

***

### onMouseOut?

> `optional` **onMouseOut**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOut`

***

### onMouseOutCapture?

> `optional` **onMouseOutCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOutCapture`

***

### onMouseOver?

> `optional` **onMouseOver**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOver`

***

### onMouseOverCapture?

> `optional` **onMouseOverCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseOverCapture`

***

### onMouseUp?

> `optional` **onMouseUp**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseUp`

***

### onMouseUpCapture?

> `optional` **onMouseUpCapture**: `MouseEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onMouseUpCapture`

***

### onSelect?

> `optional` **onSelect**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSelect`

***

### onSelectCapture?

> `optional` **onSelectCapture**: `ReactEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onSelectCapture`

***

### onTouchCancel?

> `optional` **onTouchCancel**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchCancel`

***

### onTouchCancelCapture?

> `optional` **onTouchCancelCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchCancelCapture`

***

### onTouchEnd?

> `optional` **onTouchEnd**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchEnd`

***

### onTouchEndCapture?

> `optional` **onTouchEndCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchEndCapture`

***

### onTouchMove?

> `optional` **onTouchMove**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchMove`

***

### onTouchMoveCapture?

> `optional` **onTouchMoveCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchMoveCapture`

***

### onTouchStart?

> `optional` **onTouchStart**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchStart`

***

### onTouchStartCapture?

> `optional` **onTouchStartCapture**: `TouchEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTouchStartCapture`

***

### onPointerDown?

> `optional` **onPointerDown**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerDown`

***

### onPointerDownCapture?

> `optional` **onPointerDownCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerDownCapture`

***

### onPointerMove?

> `optional` **onPointerMove**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerMove`

***

### onPointerMoveCapture?

> `optional` **onPointerMoveCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerMoveCapture`

***

### onPointerUp?

> `optional` **onPointerUp**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerUp`

***

### onPointerUpCapture?

> `optional` **onPointerUpCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerUpCapture`

***

### onPointerCancel?

> `optional` **onPointerCancel**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerCancel`

***

### onPointerCancelCapture?

> `optional` **onPointerCancelCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerCancelCapture`

***

### onPointerEnter?

> `optional` **onPointerEnter**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerEnter`

***

### onPointerLeave?

> `optional` **onPointerLeave**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerLeave`

***

### onPointerOver?

> `optional` **onPointerOver**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOver`

***

### onPointerOverCapture?

> `optional` **onPointerOverCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOverCapture`

***

### onPointerOut?

> `optional` **onPointerOut**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOut`

***

### onPointerOutCapture?

> `optional` **onPointerOutCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onPointerOutCapture`

***

### onGotPointerCapture?

> `optional` **onGotPointerCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onGotPointerCapture`

***

### onGotPointerCaptureCapture?

> `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onGotPointerCaptureCapture`

***

### onLostPointerCapture?

> `optional` **onLostPointerCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLostPointerCapture`

***

### onLostPointerCaptureCapture?

> `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onLostPointerCaptureCapture`

***

### onScroll?

> `optional` **onScroll**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScroll`

***

### onScrollCapture?

> `optional` **onScrollCapture**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollCapture`

***

### onScrollEnd?

> `optional` **onScrollEnd**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollEnd`

***

### onScrollEndCapture?

> `optional` **onScrollEndCapture**: `UIEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onScrollEndCapture`

***

### onWheel?

> `optional` **onWheel**: `WheelEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWheel`

***

### onWheelCapture?

> `optional` **onWheelCapture**: `WheelEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onWheelCapture`

***

### onAnimationStart?

> `optional` **onAnimationStart**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationStart`

***

### onAnimationStartCapture?

> `optional` **onAnimationStartCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationStartCapture`

***

### onAnimationEnd?

> `optional` **onAnimationEnd**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationEnd`

***

### onAnimationEndCapture?

> `optional` **onAnimationEndCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationEndCapture`

***

### onAnimationIteration?

> `optional` **onAnimationIteration**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationIteration`

***

### onAnimationIterationCapture?

> `optional` **onAnimationIterationCapture**: `AnimationEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onAnimationIterationCapture`

***

### onToggle?

> `optional` **onToggle**: `ToggleEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onToggle`

***

### onBeforeToggle?

> `optional` **onBeforeToggle**: `ToggleEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onBeforeToggle`

***

### onTransitionCancel?

> `optional` **onTransitionCancel**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionCancel`

***

### onTransitionCancelCapture?

> `optional` **onTransitionCancelCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionCancelCapture`

***

### onTransitionEnd?

> `optional` **onTransitionEnd**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionEnd`

***

### onTransitionEndCapture?

> `optional` **onTransitionEndCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionEndCapture`

***

### onTransitionRun?

> `optional` **onTransitionRun**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionRun`

***

### onTransitionRunCapture?

> `optional` **onTransitionRunCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionRunCapture`

***

### onTransitionStart?

> `optional` **onTransitionStart**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionStart`

***

### onTransitionStartCapture?

> `optional` **onTransitionStartCapture**: `TransitionEventHandler`<`HTMLButtonElement`>

#### Inherited from

`React.ButtonHTMLAttributes.onTransitionStartCapture`

***

### aria-activedescendant?

> `optional` **aria-activedescendant**: `string`

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

#### Inherited from

`React.ButtonHTMLAttributes.aria-activedescendant`

***

### aria-atomic?

> `optional` **aria-atomic**: `Booleanish`

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

#### Inherited from

`React.ButtonHTMLAttributes.aria-atomic`

***

### aria-autocomplete?

> `optional` **aria-autocomplete**: `"none"` | `"list"` | `"inline"` | `"both"`

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.

#### Inherited from

`React.ButtonHTMLAttributes.aria-autocomplete`

***

### aria-braillelabel?

> `optional` **aria-braillelabel**: `string`

Defines a string value that labels the current element, which is intended to be converted into Braille.

#### See

aria-label.

#### Inherited from

`React.ButtonHTMLAttributes.aria-braillelabel`

***

### aria-brailleroledescription?

> `optional` **aria-brailleroledescription**: `string`

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

#### See

aria-roledescription.

#### Inherited from

`React.ButtonHTMLAttributes.aria-brailleroledescription`

***

### aria-busy?

> `optional` **aria-busy**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.aria-busy`

***

### aria-checked?

> `optional` **aria-checked**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

#### See

* aria-pressed
* aria-selected.

#### Inherited from

`React.ButtonHTMLAttributes.aria-checked`

***

### aria-colcount?

> `optional` **aria-colcount**: `number`

Defines the total number of columns in a table, grid, or treegrid.

#### See

aria-colindex.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colcount`

***

### aria-colindex?

> `optional` **aria-colindex**: `number`

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

#### See

* aria-colcount
* aria-colspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colindex`

***

### aria-colindextext?

> `optional` **aria-colindextext**: `string`

Defines a human readable text alternative of aria-colindex.

#### See

aria-rowindextext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colindextext`

***

### aria-colspan?

> `optional` **aria-colspan**: `number`

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-colindex
* aria-rowspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-colspan`

***

### aria-controls?

> `optional` **aria-controls**: `string`

Identifies the element (or elements) whose contents or presence are controlled by the current element.

#### See

aria-owns.

#### Inherited from

`React.ButtonHTMLAttributes.aria-controls`

***

### aria-current?

> `optional` **aria-current**: `boolean` | `"time"` | `"true"` | `"false"` | `"page"` | `"step"` | `"location"` | `"date"`

Indicates the element that represents the current item within a container or set of related elements.

#### Inherited from

`React.ButtonHTMLAttributes.aria-current`

***

### aria-describedby?

> `optional` **aria-describedby**: `string`

Identifies the element (or elements) that describes the object.

#### See

aria-labelledby

#### Inherited from

`React.ButtonHTMLAttributes.aria-describedby`

***

### aria-description?

> `optional` **aria-description**: `string`

Defines a string value that describes or annotates the current element.

#### See

related aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-description`

***

### aria-details?

> `optional` **aria-details**: `string`

Identifies the element that provides a detailed, extended description for the object.

#### See

aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-details`

***

### aria-disabled?

> `optional` **aria-disabled**: `Booleanish`

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

#### See

* aria-hidden
* aria-readonly.

#### Inherited from

`React.ButtonHTMLAttributes.aria-disabled`

***

### ~~aria-dropeffect?~~

> `optional` **aria-dropeffect**: `"link"` | `"none"` | `"copy"` | `"execute"` | `"move"` | `"popup"`

Indicates what functions can be performed when a dragged object is released on the drop target.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.ButtonHTMLAttributes.aria-dropeffect`

***

### aria-errormessage?

> `optional` **aria-errormessage**: `string`

Identifies the element that provides an error message for the object.

#### See

* aria-invalid
* aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-errormessage`

***

### aria-expanded?

> `optional` **aria-expanded**: `Booleanish`

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-expanded`

***

### aria-flowto?

> `optional` **aria-flowto**: `string`

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
allows assistive technology to override the general default of reading in document source order.

#### Inherited from

`React.ButtonHTMLAttributes.aria-flowto`

***

### ~~aria-grabbed?~~

> `optional` **aria-grabbed**: `Booleanish`

Indicates an element's "grabbed" state in a drag-and-drop operation.

#### Deprecated

in ARIA 1.1

#### Inherited from

`React.ButtonHTMLAttributes.aria-grabbed`

***

### aria-haspopup?

> `optional` **aria-haspopup**: `boolean` | `"dialog"` | `"menu"` | `"true"` | `"false"` | `"grid"` | `"listbox"` | `"tree"`

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-haspopup`

***

### aria-hidden?

> `optional` **aria-hidden**: `Booleanish`

Indicates whether the element is exposed to an accessibility API.

#### See

aria-disabled.

#### Inherited from

`React.ButtonHTMLAttributes.aria-hidden`

***

### aria-invalid?

> `optional` **aria-invalid**: `boolean` | `"true"` | `"false"` | `"grammar"` | `"spelling"`

Indicates the entered value does not conform to the format expected by the application.

#### See

aria-errormessage.

#### Inherited from

`React.ButtonHTMLAttributes.aria-invalid`

***

### aria-keyshortcuts?

> `optional` **aria-keyshortcuts**: `string`

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-keyshortcuts`

***

### aria-label?

> `optional` **aria-label**: `string`

Defines a string value that labels the current element.

#### See

aria-labelledby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-label`

***

### aria-labelledby?

> `optional` **aria-labelledby**: `string`

Identifies the element (or elements) that labels the current element.

#### See

aria-describedby.

#### Inherited from

`React.ButtonHTMLAttributes.aria-labelledby`

***

### aria-level?

> `optional` **aria-level**: `number`

Defines the hierarchical level of an element within a structure.

#### Inherited from

`React.ButtonHTMLAttributes.aria-level`

***

### aria-live?

> `optional` **aria-live**: `"off"` | `"assertive"` | `"polite"`

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

#### Inherited from

`React.ButtonHTMLAttributes.aria-live`

***

### aria-modal?

> `optional` **aria-modal**: `Booleanish`

Indicates whether an element is modal when displayed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-modal`

***

### aria-multiline?

> `optional` **aria-multiline**: `Booleanish`

Indicates whether a text box accepts multiple lines of input or only a single line.

#### Inherited from

`React.ButtonHTMLAttributes.aria-multiline`

***

### aria-multiselectable?

> `optional` **aria-multiselectable**: `Booleanish`

Indicates that the user may select more than one item from the current selectable descendants.

#### Inherited from

`React.ButtonHTMLAttributes.aria-multiselectable`

***

### aria-orientation?

> `optional` **aria-orientation**: `"horizontal"` | `"vertical"`

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

#### Inherited from

`React.ButtonHTMLAttributes.aria-orientation`

***

### aria-owns?

> `optional` **aria-owns**: `string`

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

#### See

aria-controls.

#### Inherited from

`React.ButtonHTMLAttributes.aria-owns`

***

### aria-placeholder?

> `optional` **aria-placeholder**: `string`

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
A hint could be a sample value or a brief description of the expected format.

#### Inherited from

`React.ButtonHTMLAttributes.aria-placeholder`

***

### aria-posinset?

> `optional` **aria-posinset**: `number`

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-setsize.

#### Inherited from

`React.ButtonHTMLAttributes.aria-posinset`

***

### aria-pressed?

> `optional` **aria-pressed**: `boolean` | `"true"` | `"false"` | `"mixed"`

Indicates the current "pressed" state of toggle buttons.

#### See

* aria-checked
* aria-selected.

#### Inherited from

`React.ButtonHTMLAttributes.aria-pressed`

***

### aria-readonly?

> `optional` **aria-readonly**: `Booleanish`

Indicates that the element is not editable, but is otherwise operable.

#### See

aria-disabled.

#### Inherited from

`React.ButtonHTMLAttributes.aria-readonly`

***

### aria-relevant?

> `optional` **aria-relevant**: `"text"` | `"additions"` | `"additions removals"` | `"additions text"` | `"all"` | `"removals"` | `"removals additions"` | `"removals text"` | `"text additions"` | `"text removals"`

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

#### See

aria-atomic.

#### Inherited from

`React.ButtonHTMLAttributes.aria-relevant`

***

### aria-required?

> `optional` **aria-required**: `Booleanish`

Indicates that user input is required on the element before a form may be submitted.

#### Inherited from

`React.ButtonHTMLAttributes.aria-required`

***

### aria-roledescription?

> `optional` **aria-roledescription**: `string`

Defines a human-readable, author-localized description for the role of an element.

#### Inherited from

`React.ButtonHTMLAttributes.aria-roledescription`

***

### aria-rowcount?

> `optional` **aria-rowcount**: `number`

Defines the total number of rows in a table, grid, or treegrid.

#### See

aria-rowindex.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowcount`

***

### aria-rowindex?

> `optional` **aria-rowindex**: `number`

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

#### See

* aria-rowcount
* aria-rowspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowindex`

***

### aria-rowindextext?

> `optional` **aria-rowindextext**: `string`

Defines a human readable text alternative of aria-rowindex.

#### See

aria-colindextext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowindextext`

***

### aria-rowspan?

> `optional` **aria-rowspan**: `number`

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

#### See

* aria-rowindex
* aria-colspan.

#### Inherited from

`React.ButtonHTMLAttributes.aria-rowspan`

***

### aria-selected?

> `optional` **aria-selected**: `Booleanish`

Indicates the current "selected" state of various widgets.

#### See

* aria-checked
* aria-pressed.

#### Inherited from

`React.ButtonHTMLAttributes.aria-selected`

***

### aria-setsize?

> `optional` **aria-setsize**: `number`

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

#### See

aria-posinset.

#### Inherited from

`React.ButtonHTMLAttributes.aria-setsize`

***

### aria-sort?

> `optional` **aria-sort**: `"none"` | `"ascending"` | `"descending"` | `"other"`

Indicates if items in a table or grid are sorted in ascending or descending order.

#### Inherited from

`React.ButtonHTMLAttributes.aria-sort`

***

### aria-valuemax?

> `optional` **aria-valuemax**: `number`

Defines the maximum allowed value for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuemax`

***

### aria-valuemin?

> `optional` **aria-valuemin**: `number`

Defines the minimum allowed value for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuemin`

***

### aria-valuenow?

> `optional` **aria-valuenow**: `number`

Defines the current value for a range widget.

#### See

aria-valuetext.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuenow`

***

### aria-valuetext?

> `optional` **aria-valuetext**: `string`

Defines the human readable text alternative of aria-valuenow for a range widget.

#### Inherited from

`React.ButtonHTMLAttributes.aria-valuetext`

***

### defaultChecked?

> `optional` **defaultChecked**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.defaultChecked`

***

### defaultValue?

> `optional` **defaultValue**: `string` | `number` | readonly `string`\[]

#### Inherited from

`React.ButtonHTMLAttributes.defaultValue`

***

### suppressContentEditableWarning?

> `optional` **suppressContentEditableWarning**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.suppressContentEditableWarning`

***

### suppressHydrationWarning?

> `optional` **suppressHydrationWarning**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.suppressHydrationWarning`

***

### accessKey?

> `optional` **accessKey**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.accessKey`

***

### autoCapitalize?

> `optional` **autoCapitalize**: `"off"` | `"none"` | `"on"` | `"sentences"` | `"words"` | `"characters"` | `string` & `object`

#### Inherited from

`React.ButtonHTMLAttributes.autoCapitalize`

***

### autoFocus?

> `optional` **autoFocus**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.autoFocus`

***

### className?

> `optional` **className**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.className`

***

### contentEditable?

> `optional` **contentEditable**: `Booleanish` | `"inherit"` | `"plaintext-only"`

#### Inherited from

`React.ButtonHTMLAttributes.contentEditable`

***

### contextMenu?

> `optional` **contextMenu**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.contextMenu`

***

### dir?

> `optional` **dir**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.dir`

***

### draggable?

> `optional` **draggable**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.draggable`

***

### enterKeyHint?

> `optional` **enterKeyHint**: `"search"` | `"enter"` | `"done"` | `"go"` | `"next"` | `"previous"` | `"send"`

#### Inherited from

`React.ButtonHTMLAttributes.enterKeyHint`

***

### hidden?

> `optional` **hidden**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.hidden`

***

### id?

> `optional` **id**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.id`

***

### lang?

> `optional` **lang**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.lang`

***

### nonce?

> `optional` **nonce**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.nonce`

***

### slot?

> `optional` **slot**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.slot`

***

### spellCheck?

> `optional` **spellCheck**: `Booleanish`

#### Inherited from

`React.ButtonHTMLAttributes.spellCheck`

***

### style?

> `optional` **style**: `CSSProperties`

#### Inherited from

`React.ButtonHTMLAttributes.style`

***

### tabIndex?

> `optional` **tabIndex**: `number`

#### Inherited from

`React.ButtonHTMLAttributes.tabIndex`

***

### title?

> `optional` **title**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.title`

***

### translate?

> `optional` **translate**: `"yes"` | `"no"`

#### Inherited from

`React.ButtonHTMLAttributes.translate`

***

### radioGroup?

> `optional` **radioGroup**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.radioGroup`

***

### role?

> `optional` **role**: `AriaRole`

#### Inherited from

`React.ButtonHTMLAttributes.role`

***

### about?

> `optional` **about**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.about`

***

### content?

> `optional` **content**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.content`

***

### datatype?

> `optional` **datatype**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.datatype`

***

### inlist?

> `optional` **inlist**: `any`

#### Inherited from

`React.ButtonHTMLAttributes.inlist`

***

### prefix?

> `optional` **prefix**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.prefix`

***

### property?

> `optional` **property**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.property`

***

### rel?

> `optional` **rel**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.rel`

***

### resource?

> `optional` **resource**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.resource`

***

### rev?

> `optional` **rev**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.rev`

***

### typeof?

> `optional` **typeof**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.typeof`

***

### vocab?

> `optional` **vocab**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.vocab`

***

### autoCorrect?

> `optional` **autoCorrect**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.autoCorrect`

***

### autoSave?

> `optional` **autoSave**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.autoSave`

***

### color?

> `optional` **color**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.color`

***

### itemProp?

> `optional` **itemProp**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemProp`

***

### itemScope?

> `optional` **itemScope**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.itemScope`

***

### itemType?

> `optional` **itemType**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemType`

***

### itemID?

> `optional` **itemID**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemID`

***

### itemRef?

> `optional` **itemRef**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.itemRef`

***

### results?

> `optional` **results**: `number`

#### Inherited from

`React.ButtonHTMLAttributes.results`

***

### security?

> `optional` **security**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.security`

***

### unselectable?

> `optional` **unselectable**: `"off"` | `"on"`

#### Inherited from

`React.ButtonHTMLAttributes.unselectable`

***

### popover?

> `optional` **popover**: `""` | `"auto"` | `"manual"`

#### Inherited from

`React.ButtonHTMLAttributes.popover`

***

### popoverTargetAction?

> `optional` **popoverTargetAction**: `"toggle"` | `"show"` | `"hide"`

#### Inherited from

`React.ButtonHTMLAttributes.popoverTargetAction`

***

### popoverTarget?

> `optional` **popoverTarget**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.popoverTarget`

***

### inert?

> `optional` **inert**: `boolean`

#### See

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

#### Inherited from

`React.ButtonHTMLAttributes.inert`

***

### inputMode?

> `optional` **inputMode**: `"search"` | `"text"` | `"none"` | `"tel"` | `"url"` | `"email"` | `"numeric"` | `"decimal"`

Hints at the type of data that might be entered by the user while editing the element or its contents

#### See

<https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute>

#### Inherited from

`React.ButtonHTMLAttributes.inputMode`

***

### is?

> `optional` **is**: `string`

Specify that a standard HTML element should behave like a defined custom built-in element

#### See

<https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is>

#### Inherited from

`React.ButtonHTMLAttributes.is`

***

### exportparts?

> `optional` **exportparts**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts>

#### Inherited from

`React.ButtonHTMLAttributes.exportparts`

***

### part?

> `optional` **part**: `string`

#### See

<https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part>

#### Inherited from

`React.ButtonHTMLAttributes.part`

***

### disabled?

> `optional` **disabled**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.disabled`

***

### form?

> `optional` **form**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.form`

***

### formAction?

> `optional` **formAction**: `string` | (`formData`) => `void` | `Promise`<`void`>

#### Inherited from

`React.ButtonHTMLAttributes.formAction`

***

### formEncType?

> `optional` **formEncType**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.formEncType`

***

### formMethod?

> `optional` **formMethod**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.formMethod`

***

### formNoValidate?

> `optional` **formNoValidate**: `boolean`

#### Inherited from

`React.ButtonHTMLAttributes.formNoValidate`

***

### formTarget?

> `optional` **formTarget**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.formTarget`

***

### name?

> `optional` **name**: `string`

#### Inherited from

`React.ButtonHTMLAttributes.name`

***

### type?

> `optional` **type**: `"button"` | `"submit"` | `"reset"`

#### Inherited from

`React.ButtonHTMLAttributes.type`

***

### value?

> `optional` **value**: `string` | `number` | readonly `string`\[]

#### Inherited from

`React.ButtonHTMLAttributes.value`

***

### variant?

> `optional` **variant**: `null` | `"link"` | `"default"` | `"destructive"` | `"secondary"` | `"outline"` | `"ghost"`

#### Inherited from

`VariantProps.variant`

***

### size?

> `optional` **size**: `null` | `"default"` | `"sm"` | `"lg"` | `"icon"` | `"xs"`

#### Inherited from

`VariantProps.size`

***

### asChild?

> `optional` **asChild**: `boolean`

---

---
url: /api/ui/interfaces/CopyButtonProps.md
---
[@sqlrooms/ui](../index.md) / CopyButtonProps

# Interface: CopyButtonProps

## Properties

### text

> **text**: `string`

***

### variant?

> `optional` **variant**: `null` | `"link"` | `"default"` | `"destructive"` | `"secondary"` | `"outline"` | `"ghost"`

***

### size?

> `optional` **size**: `null` | `"default"` | `"sm"` | `"lg"` | `"icon"` | `"xs"`

***

### className?

> `optional` **className**: `string`

***

### ariaLabel?

> `optional` **ariaLabel**: `string`

***

### durationMs?

> `optional` **durationMs**: `number`

***

### disabled?

> `optional` **disabled**: `boolean`

***

### onCopied()?

> `optional` **onCopied**: () => `void`

#### Returns

`void`

---

---
url: /api/recharts/interfaces/DefaultTooltipContentProps.md
---
[@sqlrooms/recharts](../index.md) / DefaultTooltipContentProps

# Interface: DefaultTooltipContentProps\<TValue, TName>

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

## Properties

### separator?

> `optional` **separator**: `string`

***

### wrapperClassName?

> `optional` **wrapperClassName**: `string`

***

### labelClassName?

> `optional` **labelClassName**: `string`

***

### formatter?

> `optional` **formatter**: `Formatter`<`TValue`, `TName`>

***

### contentStyle?

> `optional` **contentStyle**: `CSSProperties`

***

### itemStyle?

> `optional` **itemStyle**: `CSSProperties`

***

### labelStyle?

> `optional` **labelStyle**: `CSSProperties`

***

### labelFormatter()?

> `optional` **labelFormatter**: (`label`, `payload`) => `ReactNode`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `label` | `any` |
| `payload` | `Payload`<`TValue`, `TName`>\[] |

#### Returns

`ReactNode`

***

### label?

> `optional` **label**: `any`

***

### payload?

> `optional` **payload**: `Payload`<`TValue`, `TName`>\[]

***

### itemSorter()?

> `optional` **itemSorter**: (`item`) => `string` | `number`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `item` | `Payload`<`TValue`, `TName`> |

#### Returns

`string` | `number`

***

### accessibilityLayer?

> `optional` **accessibilityLayer**: `boolean`

---

---
url: /api/ui/interfaces/Dimensions.md
---
[@sqlrooms/ui](../index.md) / Dimensions

# Interface: Dimensions

Represents the dimensions of an element
Dimensions

## Properties

### width

> **width**: `number`

The width in pixels

***

### height

> **height**: `number`

The height in pixels

---

---
url: /api/duckdb/interfaces/DuckDBBundles.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBBundles

# Interface: DuckDBBundles

Bundles have different characteristics:

* MVP: minimum viable product (uses features from first stable version of WebAssembly standard)
* EH: exception handling
* COI: cross origin isolation

## Properties

### mvp

> **mvp**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |

***

### eh?

> `optional` **eh**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |

***

### coi?

> `optional` **coi**: `object`

| Name | Type |
| ------ | ------ |
| `mainModule` | `string` |
| `mainWorker` | `string` |
| `pthreadWorker` | `string` |

---

---
url: /api/duckdb/interfaces/DuckDBConfig.md
---
[@sqlrooms/duckdb](../index.md) / DuckDBConfig

# Interface: DuckDBConfig

## Properties

### path?

> `optional` **path**: `string`

The database path

***

### accessMode?

> `optional` **accessMode**: [`DuckDBAccessMode`](../enumerations/DuckDBAccessMode.md)

The access mode

***

### maximumThreads?

> `optional` **maximumThreads**: `number`

The maximum number of threads.
Note that this will only work with cross-origin isolated sites since it requires SharedArrayBuffers.

***

### useDirectIO?

> `optional` **useDirectIO**: `boolean`

The direct io flag

***

### query?

> `optional` **query**: `DuckDBQueryConfig`

The query config

***

### filesystem?

> `optional` **filesystem**: `DuckDBFilesystemConfig`

The filesystem config

***

### allowUnsignedExtensions?

> `optional` **allowUnsignedExtensions**: `boolean`

Whether to allow unsigned extensions

***

### arrowLosslessConversion?

> `optional` **arrowLosslessConversion**: `boolean`

Whether to use alternate Arrow conversion that preserves full range and precision of data.

***

### customUserAgent?

> `optional` **customUserAgent**: `string`

Custom user agent string

***

### opfs?

> `optional` **opfs**: `DuckDBOPFSConfig`

opfs string

---

---
url: /api/duckdb/interfaces/DuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbConnector

# Interface: DuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extended by

* [`WasmDuckDbConnector`](WasmDuckDbConnector.md)

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

***

### execute()

> **execute**(`sql`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

***

### query()

> **query**<`T`>(`query`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

***

### queryJson()

> **queryJson**<`T`>(`query`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts`?): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts`?): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | { `schema`: `string`; } | - |
| `opts.schema`? | `string` | - |

#### Returns

`Promise`<`void`>

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts`?): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

---

---
url: /api/monaco-editor/interfaces/JsonMonacoEditorProps.md
---
[@sqlrooms/monaco-editor](../index.md) / JsonMonacoEditorProps

# Interface: JsonMonacoEditorProps

## Extends

* `Omit`<[`MonacoEditorProps`](MonacoEditorProps.md), `"language"` | `"value"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### schema?

> `optional` **schema**: `object`

The JSON schema to validate against

***

### value?

> `optional` **value**: `string` | `object`

The JSON value to edit

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

#### Inherited from

`Omit.onMount`

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Inherited from

`Omit.onChange`

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Inherited from

`Omit.className`

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Inherited from

`Omit.theme`

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

#### Inherited from

`Omit.readOnly`

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Inherited from

`Omit.options`

---

---
url: /api/monaco-editor/interfaces/LoaderWorkers.md
---
[@sqlrooms/monaco-editor](../index.md) / LoaderWorkers

# Interface: LoaderWorkers

## Indexable

\[`label`: `string`]: `undefined` | () => `Worker`

## Properties

### default()?

> `optional` **default**: () => `Worker`

worker used when label does not match other workers

#### Returns

`Worker`

---

---
url: /api/ai-settings/interfaces/ModelUsageData.md
---
[@sqlrooms/ai-settings](../index.md) / ModelUsageData

# Interface: ModelUsageData

## Properties

### totalSpend

> **totalSpend**: `number`

***

### maxBudget

> **maxBudget**: `number`

***

### isLoadingSpend

> **isLoadingSpend**: `boolean`

***

### weeklySpend?

> `optional` **weeklySpend**: `object`\[]

| Name | Type |
| ------ | ------ |
| `date` | `string` |
| `spend` | `number` |

***

### isLoadingWeeklySpend?

> `optional` **isLoadingWeeklySpend**: `boolean`

---

---
url: /api/ai/interfaces/ModelUsageData.md
---
[@sqlrooms/ai](../index.md) / ModelUsageData

# Interface: ModelUsageData

## Properties

### totalSpend

> **totalSpend**: `number`

***

### maxBudget

> **maxBudget**: `number`

***

### isLoadingSpend

> **isLoadingSpend**: `boolean`

***

### weeklySpend?

> `optional` **weeklySpend**: `object`\[]

| Name | Type |
| ------ | ------ |
| `date` | `string` |
| `spend` | `number` |

***

### isLoadingWeeklySpend?

> `optional` **isLoadingWeeklySpend**: `boolean`

---

---
url: /api/monaco-editor/interfaces/MonacoEditorProps.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoEditorProps

# Interface: MonacoEditorProps

## Extends

* `Omit`<`EditorProps`, `"onMount"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Overrides

`Omit.onChange`

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Overrides

`Omit.className`

***

### language?

> `optional` **language**: `string`

The language of the editor

#### Default

```ts
'javascript'
```

#### Overrides

`Omit.language`

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Overrides

`Omit.theme`

***

### value?

> `optional` **value**: `string`

The value of the editor

#### Overrides

`Omit.value`

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Overrides

`Omit.options`

---

---
url: /api/monaco-editor/interfaces/MonacoLoaderOptions.md
---
[@sqlrooms/monaco-editor](../index.md) / MonacoLoaderOptions

# Interface: MonacoLoaderOptions

## Extends

* [`LoaderConfig`](../type-aliases/LoaderConfig.md)

## Properties

### paths?

> `optional` **paths**: `object`

| Name | Type |
| ------ | ------ |
| `vs`? | `string` |

#### Inherited from

`LoaderConfig.paths`

***

### vs/nls?

> `optional` **vs/nls**: `object`

| Name | Type |
| ------ | ------ |
| `availableLanguages`? | `object` |

#### Inherited from

`LoaderConfig.vs/nls`

***

### monaco?

> `optional` **monaco**: `any`

Pass the Monaco instance to bundle the editor instead of using a CDN

#### Overrides

`LoaderConfig.monaco`

***

### workers?

> `optional` **workers**: [`LoaderWorkers`](LoaderWorkers.md)

Provide worker constructors mapped by label to automatically set
`self.MonacoEnvironment.getWorker`

---

---
url: /api/recharts/interfaces/PieLabelRenderProps.md
---
[@sqlrooms/recharts](../index.md) / PieLabelRenderProps

# Interface: PieLabelRenderProps

## Extends

* `PieDef`

## Indexable

\[`key`: `string`]: `any`

## Properties

### cx?

> `optional` **cx**: `string` | `number`

The abscissa of pole in polar coordinate

#### Inherited from

`PieDef.cx`

***

### cy?

> `optional` **cy**: `string` | `number`

The ordinate of pole in polar coordinate

#### Inherited from

`PieDef.cy`

***

### startAngle?

> `optional` **startAngle**: `number`

The start angle of first sector

#### Inherited from

`PieDef.startAngle`

***

### endAngle?

> `optional` **endAngle**: `number`

The end angle of last sector

#### Inherited from

`PieDef.endAngle`

***

### paddingAngle?

> `optional` **paddingAngle**: `number`

#### Inherited from

`PieDef.paddingAngle`

***

### innerRadius?

> `optional` **innerRadius**: `string` | `number`

The inner radius of sectors

#### Inherited from

`PieDef.innerRadius`

***

### outerRadius?

> `optional` **outerRadius**: `string` | `number`

The outer radius of sectors

#### Inherited from

`PieDef.outerRadius`

***

### cornerRadius?

> `optional` **cornerRadius**: `string` | `number`

#### Inherited from

`PieDef.cornerRadius`

***

### name

> **name**: `string`

***

### percent?

> `optional` **percent**: `number`

***

### stroke

> **stroke**: `string`

***

### index?

> `optional` **index**: `number`

***

### textAnchor

> **textAnchor**: `string`

***

### x

> **x**: `number`

***

### y

> **y**: `number`

---

---
url: /api/sql-editor/interfaces/QueryEditorPanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / QueryEditorPanelProps

# Interface: QueryEditorPanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

---

---
url: /api/duckdb/interfaces/QueryOptions.md
---
[@sqlrooms/duckdb](../index.md) / QueryOptions

# Interface: QueryOptions

Options for query execution

## Properties

### signal?

> `optional` **signal**: `AbortSignal`

Optional external abort signal for coordinated cancellation.
When provided, the query will be cancelled if this signal is aborted.
This enables powerful composition patterns like cancelling multiple
queries together or integrating with other cancellable operations.

---

---
url: /api/sql-editor/interfaces/QueryResultPanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResultPanelProps

# Interface: QueryResultPanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

***

### renderActions()?

> `optional` **renderActions**: (`query`) => `ReactNode`

Custom actions to render in the query result panel

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `query` | `string` |

#### Returns

`ReactNode`

***

### fontSize?

> `optional` **fontSize**: `string`

Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base

***

### onRowClick()?

> `optional` **onRowClick**: (`args`) => `void`

Called when a row in the results table is clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`any`>; `event`: `MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`any`> |
| `args.event` | `MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

***

### onRowDoubleClick()?

> `optional` **onRowDoubleClick**: (`args`) => `void`

Called when a row in the results table is double-clicked.

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `args` | { `row`: `Row`<`any`>; `event`: `MouseEvent`<`HTMLTableRowElement`>; } |
| `args.row` | `Row`<`any`> |
| `args.event` | `MouseEvent`<`HTMLTableRowElement`> |

#### Returns

`void`

---

---
url: /api/recharts/interfaces/ResponsiveContainerProps.md
---
[@sqlrooms/recharts](../index.md) / ResponsiveContainerProps

# Interface: ResponsiveContainerProps

## Properties

### aspect?

> `optional` **aspect**: `number`

***

### width?

> `optional` **width**: `string` | `number`

***

### height?

> `optional` **height**: `string` | `number`

***

### minWidth?

> `optional` **minWidth**: `string` | `number`

***

### minHeight?

> `optional` **minHeight**: `string` | `number`

***

### initialDimension?

> `optional` **initialDimension**: `object`

| Name | Type |
| ------ | ------ |
| `width` | `number` |
| `height` | `number` |

***

### maxHeight?

> `optional` **maxHeight**: `number`

***

### children

> **children**: `ReactElement`

***

### debounce?

> `optional` **debounce**: `number`

***

### id?

> `optional` **id**: `string` | `number`

***

### className?

> `optional` **className**: `string` | `number`

***

### style?

> `optional` **style**: `Omit`<`CSSProperties`, keyof [`ResponsiveContainerProps`](ResponsiveContainerProps.md)>

***

### onResize()?

> `optional` **onResize**: (`width`, `height`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `width` | `number` |
| `height` | `number` |

#### Returns

`void`

---

---
url: /api/room-shell/interfaces/RoomSlice.md
---
[@sqlrooms/room-shell](../index.md) / RoomSlice

# Interface: RoomSlice

## Properties

### initialize()?

> `optional` **initialize**: () => `Promise`<`void`>

#### Returns

`Promise`<`void`>

---

---
url: /api/room-store/interfaces/RoomSlice.md
---
[@sqlrooms/room-store](../index.md) / RoomSlice

# Interface: RoomSlice

## Properties

### initialize()?

> `optional` **initialize**: () => `Promise`<`void`>

#### Returns

`Promise`<`void`>

---

---
url: /api/sql-editor/interfaces/SqlMonacoEditorProps.md
---
[@sqlrooms/sql-editor](../index.md) / SqlMonacoEditorProps

# Interface: SqlMonacoEditorProps

## Extends

* `Omit`<`MonacoEditorProps`, `"language"`>

## Properties

### defaultValue?

> `optional` **defaultValue**: `string`

Default value of the current model

#### Inherited from

`Omit.defaultValue`

***

### defaultLanguage?

> `optional` **defaultLanguage**: `string`

Default language of the current model

#### Inherited from

`Omit.defaultLanguage`

***

### defaultPath?

> `optional` **defaultPath**: `string`

Default path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.defaultPath`

***

### path?

> `optional` **path**: `string`

Path of the current model
Will be passed as the third argument to `.createModel` method
`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`

#### Inherited from

`Omit.path`

***

### line?

> `optional` **line**: `number`

The line to jump on it

#### Inherited from

`Omit.line`

***

### loading?

> `optional` **loading**: `ReactNode`

The loading screen before the editor will be mounted

#### Default

```ts
"Loading..."
```

#### Inherited from

`Omit.loading`

***

### overrideServices?

> `optional` **overrideServices**: `IEditorOverrideServices`

IEditorOverrideServices

#### Inherited from

`Omit.overrideServices`

***

### saveViewState?

> `optional` **saveViewState**: `boolean`

Indicator whether to save the models' view states between model changes or not
Defaults to true

#### Inherited from

`Omit.saveViewState`

***

### keepCurrentModel?

> `optional` **keepCurrentModel**: `boolean`

Indicator whether to dispose the current model when the Editor is unmounted or not

#### Default

```ts
false
```

#### Inherited from

`Omit.keepCurrentModel`

***

### width?

> `optional` **width**: `string` | `number`

Width of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.width`

***

### height?

> `optional` **height**: `string` | `number`

Height of the editor wrapper

#### Default

```ts
"100%"
```

#### Inherited from

`Omit.height`

***

### wrapperProps?

> `optional` **wrapperProps**: `object`

Props applied to the wrapper element

#### Inherited from

`Omit.wrapperProps`

***

### beforeMount?

> `optional` **beforeMount**: `BeforeMount`

Signature: function(monaco: Monaco) => void
An event is emitted before the editor is mounted
It gets the monaco instance as a first argument
Defaults to "noop"

#### Inherited from

`Omit.beforeMount`

***

### onValidate?

> `optional` **onValidate**: `OnValidate`

Signature: function(markers: monaco.editor.IMarker\[]) => void
An event is emitted when the content of the current model is changed
and the current model markers are ready
Defaults to "noop"

#### Inherited from

`Omit.onValidate`

***

### onMount?

> `optional` **onMount**: `OnMount`

Callback when the editor is mounted

#### Inherited from

`Omit.onMount`

***

### onChange?

> `optional` **onChange**: `OnChange`

Callback when the editor content changes

#### Inherited from

`Omit.onChange`

***

### className?

> `optional` **className**: `string`

CSS class name for the editor container

#### Default

```ts
''
```

#### Inherited from

`Omit.className`

***

### theme?

> `optional` **theme**: `"vs-dark"` | `"light"`

The theme of the editor
Can be explicitly set or will automatically use the app theme if not provided

#### Default

```ts
'vs-dark'
```

#### Inherited from

`Omit.theme`

***

### value?

> `optional` **value**: `string`

The value of the editor

#### Inherited from

`Omit.value`

***

### readOnly?

> `optional` **readOnly**: `boolean`

Whether the editor is read-only

#### Default

```ts
false
```

#### Inherited from

`Omit.readOnly`

***

### options?

> `optional` **options**: `IStandaloneEditorConstructionOptions`

Additional options for the editor

#### Inherited from

`Omit.options`

***

### connector?

> `optional` **connector**: `DuckDbConnector`

***

### customKeywords?

> `optional` **customKeywords**: `string`\[]

Custom SQL keywords to add to the completion provider

***

### customFunctions?

> `optional` **customFunctions**: `string`\[]

Custom SQL functions to add to the completion provider

***

### tableSchemas?

> `optional` **tableSchemas**: `DataTable`\[]

Table schemas for autocompletion

***

### getLatestSchemas()?

> `optional` **getLatestSchemas**: () => `object`

Callback to get the latest table schemas
This is called from within provideCompletionItems to ensure we have the latest data

#### Returns

`object`

| Name | Type |
| ------ | ------ |
|  `tableSchemas` | `DataTable`\[] |

---

---
url: /api/room-shell/interfaces/StoreApi.md
---
[@sqlrooms/room-shell](../index.md) / StoreApi

# Interface: StoreApi\<T>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### setState()

> **setState**: (`partial`, `replace`?) => `void`(`state`, `replace`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `partial` | `T` | `Partial`<`T`> | (`state`) => `T` | `Partial`<`T`> |
| `replace`? | `false` |

#### Returns

`void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `T` | (`state`) => `T` |
| `replace` | `true` |

#### Returns

`void`

***

### getState()

> **getState**: () => `T`

#### Returns

`T`

***

### getInitialState()

> **getInitialState**: () => `T`

#### Returns

`T`

***

### subscribe()

> **subscribe**: (`listener`) => () => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`state`, `prevState`) => `void` |

#### Returns

`Function`

##### Returns

`void`

---

---
url: /api/room-store/interfaces/StoreApi.md
---
[@sqlrooms/room-store](../index.md) / StoreApi

# Interface: StoreApi\<T>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### setState()

> **setState**: (`partial`, `replace`?) => `void`(`state`, `replace`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `partial` | `T` | `Partial`<`T`> | (`state`) => `T` | `Partial`<`T`> |
| `replace`? | `false` |

#### Returns

`void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `state` | `T` | (`state`) => `T` |
| `replace` | `true` |

#### Returns

`void`

***

### getState()

> **getState**: () => `T`

#### Returns

`T`

***

### getInitialState()

> **getInitialState**: () => `T`

#### Returns

`T`

***

### subscribe()

> **subscribe**: (`listener`) => () => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `listener` | (`state`, `prevState`) => `void` |

#### Returns

`Function`

##### Returns

`void`

---

---
url: /api/sql-editor/interfaces/TableStructurePanelProps.md
---
[@sqlrooms/sql-editor](../index.md) / TableStructurePanelProps

# Interface: TableStructurePanelProps

## Properties

### className?

> `optional` **className**: `string`

Custom class name for styling

***

### schema?

> `optional` **schema**: `string` | (`name`) => `boolean`

The database schema to use. Defaults to '*'.
If '*' is provided, all tables will be shown.
If a function is provided, it will be used to filter the tables.

***

### onTableSelect()?

> `optional` **onTableSelect**: (`table`) => `void`

Callback when a table is selected

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `table` | `undefined` | `string` |

#### Returns

`void`

---

---
url: /api/recharts/interfaces/TreemapProps.md
---
[@sqlrooms/recharts](../index.md) / TreemapProps

# Interface: TreemapProps

## Properties

### width?

> `optional` **width**: `number`

***

### height?

> `optional` **height**: `number`

***

### data?

> `optional` **data**: `any`\[]

***

### animationId?

> `optional` **animationId**: `number`

***

### style?

> `optional` **style**: `any`

***

### aspectRatio?

> `optional` **aspectRatio**: `number`

***

### content?

> `optional` **content**: `ReactElement`<`unknown`, `string` | `JSXElementConstructor`<`any`>>

***

### fill?

> `optional` **fill**: `string`

***

### stroke?

> `optional` **stroke**: `string`

***

### className?

> `optional` **className**: `string`

***

### nameKey?

> `optional` **nameKey**: `DataKey`<`any`>

***

### dataKey?

> `optional` **dataKey**: `DataKey`<`any`>

***

### children?

> `optional` **children**: `any`

***

### type?

> `optional` **type**: `"flat"` | `"nest"`

***

### colorPanel?

> `optional` **colorPanel**: \[]

***

### nestIndexContent?

> `optional` **nestIndexContent**: `ReactElement`<`unknown`, `string` | `JSXElementConstructor`<`any`>> | (`item`, `i`) => `any`

***

### onAnimationStart()?

> `optional` **onAnimationStart**: () => `void`

#### Returns

`void`

***

### onAnimationEnd()?

> `optional` **onAnimationEnd**: () => `void`

#### Returns

`void`

***

### onMouseEnter()?

> `optional` **onMouseEnter**: (`node`, `e`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### onMouseLeave()?

> `optional` **onMouseLeave**: (`node`, `e`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |
| `e` | `any` |

#### Returns

`void`

***

### onClick()?

> `optional` **onClick**: (`node`) => `void`

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `node` | `TreemapNode` |

#### Returns

`void`

***

### isAnimationActive?

> `optional` **isAnimationActive**: `boolean`

***

### isUpdateAnimationActive?

> `optional` **isUpdateAnimationActive**: `boolean`

***

### animationBegin?

> `optional` **animationBegin**: `number`

***

### animationDuration?

> `optional` **animationDuration**: `number`

***

### animationEasing?

> `optional` **animationEasing**: `AnimationTiming`

---

---
url: /api/duckdb/interfaces/TypedRowAccessor.md
---
[@sqlrooms/duckdb](../index.md) / TypedRowAccessor

# Interface: TypedRowAccessor\<T>

## Extends

* `Iterable`<`T`>

## Extended by

* [`UseSqlQueryResult`](UseSqlQueryResult.md)

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### length

> **length**: `number`

Number of rows in the table

## Methods

### \[iterator]\()

> **\[iterator]**(): `Iterator`<`T`, `any`, `any`>

#### Returns

`Iterator`<`T`, `any`, `any`>

#### Inherited from

`Iterable.[iterator]`

***

### getRow()

> **getRow**(`index`): `T`

Returns a typed row at the specified index by converting on demand

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`T`

***

### rows()

> **rows**(): `IterableIterator`<`T`>

Returns an iterator that yields each row in the table

#### Returns

`IterableIterator`<`T`>

***

### toArray()

> **toArray**(): `T`\[]

Returns an array containing all rows in the table. The array is cached and reused.

#### Returns

`T`\[]

---

---
url: /api/ui/interfaces/UseAspectRatioDimensionsProps.md
---
[@sqlrooms/ui](../index.md) / UseAspectRatioDimensionsProps

# Interface: UseAspectRatioDimensionsProps

Props for the useAspectRatioDimensions hook
UseAspectRatioDimensionsProps

## Properties

### width

> **width**: `number` | `"auto"`

The explicitly provided width, or 'auto' for container-based width

***

### height

> **height**: `number` | `"auto"`

The explicitly provided height, or 'auto' for aspect ratio-based height

***

### aspectRatio

> **aspectRatio**: `number`

The desired width-to-height ratio when dimensions are auto-calculated

***

### containerRef

> **containerRef**: `RefObject`<`null` | `HTMLElement`>

Reference to the container element

---

---
url: /api/ui/interfaces/UseDisclosureReturnValue.md
---
[@sqlrooms/ui](../index.md) / UseDisclosureReturnValue

# Interface: UseDisclosureReturnValue

## Properties

### isOpen

> **isOpen**: `boolean`

***

### onOpen()

> **onOpen**: () => `void`

#### Returns

`void`

***

### onClose()

> **onClose**: () => `void`

#### Returns

`void`

***

### onToggle()

> **onToggle**: () => `void`

#### Returns

`void`

---

---
url: /api/duckdb/interfaces/UseSqlQueryResult.md
---
[@sqlrooms/duckdb](../index.md) / UseSqlQueryResult

# Interface: UseSqlQueryResult\<T>

A wrapper interface that exposes the underlying Arrow table,
a typed row accessor, and the number of rows.

## Extends

* [`TypedRowAccessor`](TypedRowAccessor.md)<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Properties

### length

> **length**: `number`

Number of rows in the table

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`length`](TypedRowAccessor.md#length)

***

### arrowTable

> **arrowTable**: `Table`

The underlying Arrow table

## Methods

### \[iterator]\()

> **\[iterator]**(): `Iterator`<`T`, `any`, `any`>

#### Returns

`Iterator`<`T`, `any`, `any`>

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`[iterator]`](TypedRowAccessor.md#iterator)

***

### getRow()

> **getRow**(`index`): `T`

Returns a typed row at the specified index by converting on demand

#### Parameters

| Parameter | Type |
| ------ | ------ |
| `index` | `number` |

#### Returns

`T`

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`getRow`](TypedRowAccessor.md#getrow)

***

### rows()

> **rows**(): `IterableIterator`<`T`>

Returns an iterator that yields each row in the table

#### Returns

`IterableIterator`<`T`>

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`rows`](TypedRowAccessor.md#rows)

***

### toArray()

> **toArray**(): `T`\[]

Returns an array containing all rows in the table. The array is cached and reused.

#### Returns

`T`\[]

#### Inherited from

[`TypedRowAccessor`](TypedRowAccessor.md).[`toArray`](TypedRowAccessor.md#toarray)

---

---
url: /api/duckdb/interfaces/WasmDuckDbConnector.md
---
[@sqlrooms/duckdb](../index.md) / WasmDuckDbConnector

# Interface: WasmDuckDbConnector

DuckDB connector interface with advanced query cancellation support

This interface provides a hybrid approach that combines the simplicity of method-based
cancellation with the composability of Web Standards (AbortController/AbortSignal).

## Key Benefits of This Design

### 🔗 Composability

Cancel multiple queries with a single controller:

```typescript
const controller = new AbortController();
const query1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const query2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
controller.abort(); // Cancels both queries
```

### 🌐 Integration with Web APIs

Use the same signal for queries and HTTP requests:

```typescript
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', { signal: controller.signal });
const response = await fetch('/api/data', { signal: controller.signal });
// controller.abort() cancels both the query and the HTTP request
```

### 🎛️ Flexibility

Simple usage when you don't need external control, advanced when you do:

```typescript
// Simple - internal cancellation management
const handle = connector.query('SELECT * FROM table');
handle.cancel();

// Advanced - external cancellation control
const controller = new AbortController();
const handle = connector.query('SELECT * FROM table', { signal: controller.signal });
controller.abort();
```

### 📡 Event-Driven

React to cancellation events for better UX:

```typescript
handle.signal.addEventListener('abort', () => {
  showNotification('Query cancelled');
  hideLoadingSpinner();
});
```

### ⏱️ Timeout Support

Built-in timeout capability with manual override:

```typescript
const timeoutController = new AbortController();
setTimeout(() => timeoutController.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM large_table', {
  signal: timeoutController.signal
});

// User can still cancel manually
cancelButton.onclick = () => timeoutController.abort();
```

### 🏗️ Signal Composition

Combine multiple cancellation sources:

```typescript
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();
  signals.forEach(signal => {
    if (signal.aborted) controller.abort();
    else signal.addEventListener('abort', () => controller.abort());
  });
  return controller.signal;
}

const userSignal = userController.signal;
const timeoutSignal = createTimeoutSignal(30000);
const combinedSignal = combineSignals(userSignal, timeoutSignal);

const handle = connector.query('SELECT * FROM table', { signal: combinedSignal });
```

## Extends

* [`DuckDbConnector`](DuckDbConnector.md)

## Properties

### type

> `readonly` **type**: `"wasm"`

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`initialize`](DuckDbConnector.md#initialize)

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`destroy`](DuckDbConnector.md#destroy)

***

### execute()

> **execute**(`sql`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`execute`](DuckDbConnector.md#execute)

***

### query()

> **query**<`T`>(`query`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`query`](DuckDbConnector.md#query)

***

### queryJson()

> **queryJson**<`T`>(`query`, `options`?): [`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | [`QueryOptions`](QueryOptions.md) | Optional query options including abort signal for coordinated cancellation |

#### Returns

[`QueryHandle`](../type-aliases/QueryHandle.md)<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`queryJson`](DuckDbConnector.md#queryjson)

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts`?): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadFile`](DuckDbConnector.md#loadfile)

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts`?): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | { `schema`: `string`; } | - |
| `opts.schema`? | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadArrow`](DuckDbConnector.md#loadarrow)

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts`?): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

[`DuckDbConnector`](DuckDbConnector.md).[`loadObjects`](DuckDbConnector.md#loadobjects)

***

### getDb()

> **getDb**(): `AsyncDuckDB`

#### Returns

`AsyncDuckDB`

***

### getConnection()

> **getConnection**(): `AsyncDuckDBConnection`

#### Returns

`AsyncDuckDBConnection`

---

---
url: /api/motherduck/interfaces/WasmMotherDuckDbConnector.md
---
[@sqlrooms/motherduck](../index.md) / WasmMotherDuckDbConnector

# Interface: WasmMotherDuckDbConnector

## Extends

* `DuckDbConnector`

## Properties

### type

> `readonly` **type**: `"wasm-motherduck"`

## Methods

### initialize()

> **initialize**(): `Promise`<`void`>

Initialize the connector.
The function returns a promise that resolves when the connector is initialized.
Calling the initialize() function multiple times should not restart the initialization.
See BaseDuckDbConnector for an implementation example.

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.initialize`

***

### destroy()

> **destroy**(): `Promise`<`void`>

Destroy the connector and clean up resources

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.destroy`

***

### execute()

> **execute**(`sql`, `options`?): `QueryHandle`

Execute a SQL query without returning a result

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `sql` | `string` | SQL query to execute |
| `options`? | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`

QueryHandle containing:

* result: Promise that resolves when execution completes
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple execution
const handle = connector.execute('CREATE TABLE test AS SELECT * FROM source');
await handle.result;

// With external cancellation control
const controller = new AbortController();
const handle = connector.execute('DROP TABLE large_table', {
  signal: controller.signal
});

// Cancel if it takes too long
setTimeout(() => controller.abort(), 5000);
```

#### Inherited from

`DuckDbConnector.execute`

***

### query()

> **query**<`T`>(`query`, `options`?): `QueryHandle`<`Table`<`T`>>

Execute a SQL query and return the result as an Arrow table

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* `TypeMap` | `any` |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`<`Table`<`T`>>

QueryHandle containing:

* result: Promise that resolves with Arrow table
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Basic query
const handle = await connector.query('SELECT * FROM users WHERE active = true');
console.log(`Found ${table.numRows} active users`);

// Query with timeout
const controller = new AbortController();
setTimeout(() => controller.abort(), 30000); // 30s timeout

const handle = connector.query('SELECT * FROM very_large_table', {
  signal: controller.signal
});

try {
  const result = await handle;
  console.log('Query completed within timeout');
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Query timed out');
  }
}
```

#### Inherited from

`DuckDbConnector.query`

***

### queryJson()

> **queryJson**<`T`>(`query`, `options`?): `QueryHandle`<`Iterable`<`T`, `any`, `any`>>

Execute a SQL query and return the result as a JSON object

#### Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `Record`<`string`, `any`> |

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `query` | `string` | SQL query to execute |
| `options`? | `QueryOptions` | Optional query options including abort signal for coordinated cancellation |

#### Returns

`QueryHandle`<`Iterable`<`T`, `any`, `any`>>

QueryHandle containing:

* result: Promise that resolves with iterable of JSON objects
* cancel: Method to cancel the query with cleanup
* signal: AbortSignal for composability with other cancellable operations

#### Example

```typescript
// Simple JSON query
const users = await connector.queryJson('SELECT name, email FROM users LIMIT 10');
for (const user of users) {
  console.log(`${user.name}: ${user.email}`);
}

// Coordinated cancellation with multiple operations
const operationController = new AbortController();

const usersHandle = connector.queryJson('SELECT * FROM users', {
  signal: operationController.signal
});

const ordersHandle = connector.queryJson('SELECT * FROM orders', {
  signal: operationController.signal
});

// Cancel both queries if user navigates away
window.addEventListener('beforeunload', () => {
  operationController.abort();
});
```

#### Inherited from

`DuckDbConnector.queryJson`

***

### loadFile()

> **loadFile**(`fileName`, `tableName`, `opts`?): `Promise`<`void`>

Load a file into DuckDB and create a table

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `fileName` | `string` | `File` | Path to the file to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadFile`

***

### loadArrow()

> **loadArrow**(`table`, `tableName`, `opts`?): `Promise`<`void`>

Load an arrow table or an arrow IPC stream into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `table` | `Table`<`any`> | `Uint8Array`<`ArrayBufferLike`> | Arrow table or arrow IPC stream to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | { `schema`: `string`; } | - |
| `opts.schema`? | `string` | - |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadArrow`

***

### loadObjects()

> **loadObjects**(`data`, `tableName`, `opts`?): `Promise`<`void`>

Load JavaScript objects into DuckDB

#### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data` | `Record`<`string`, `unknown`>\[] | Array of objects to load |
| `tableName` | `string` | Name of the table to create |
| `opts`? | `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`> | Load options |

#### Returns

`Promise`<`void`>

#### Inherited from

`DuckDbConnector.loadObjects`

***

### getConnection()

> **getConnection**(): `MDConnection`

#### Returns

`MDConnection`

---

---
url: /api/motherduck/interfaces/WasmMotherDuckDbConnectorOptions.md
---
[@sqlrooms/motherduck](../index.md) / WasmMotherDuckDbConnectorOptions

# Interface: WasmMotherDuckDbConnectorOptions

## Extends

* `MDConnectionParams`

## Properties

### mdToken

> **mdToken**: `string`

#### Inherited from

`MDConnectionParams.mdToken`

***

### mdServerURL?

> `optional` **mdServerURL**: `string`

#### Inherited from

`MDConnectionParams.mdServerURL`

***

### duckDBAssetsURLPrefix?

> `optional` **duckDBAssetsURLPrefix**: `string`

#### Inherited from

`MDConnectionParams.duckDBAssetsURLPrefix`

***

### useDuckDBWasmCOI?

> `optional` **useDuckDBWasmCOI**: `boolean`

#### Inherited from

`MDConnectionParams.useDuckDBWasmCOI`

***

### logger?

> `optional` **logger**: `any`

#### Inherited from

`MDConnectionParams.logger`

***

### version?

> `optional` **version**: `string`

#### Inherited from

`MDConnectionParams.version`

***

### enableDebugLogging?

> `optional` **enableDebugLogging**: `boolean`

#### Inherited from

`MDConnectionParams.enableDebugLogging`

***

### customUserAgent?

> `optional` **customUserAgent**: `string`

#### Inherited from

`MDConnectionParams.customUserAgent`

***

### initializationQuery?

> `optional` **initializationQuery**: `string`

---

---
url: /api/recharts/interfaces/ZAxisProps.md
---
[@sqlrooms/recharts](../index.md) / ZAxisProps

# Interface: ZAxisProps

## Properties

### type?

> `optional` **type**: `"number"` | `"category"`

***

### name?

> `optional` **name**: `string` | `number`

The name of data displayed in the axis

***

### unit?

> `optional` **unit**: `string` | `number`

The unit of data displayed in the axis

***

### zAxisId?

> `optional` **zAxisId**: `string` | `number`

The unique id of z-axis

***

### dataKey?

> `optional` **dataKey**: `DataKey`<`any`>

The key of data displayed in the axis

***

### range?

> `optional` **range**: `number`\[]

The range of axis

***

### scale?

> `optional` **scale**: `Function` | `ScaleType`

***

### domain?

> `optional` **domain**: `AxisDomain`

The domain of scale in this axis

---

---
url: /join-slack.md
description: Join the SQLRooms community on the OpenVis Slack.
---

# Join Slack

Join the `#sqlrooms` channel in the Slack workspace, hosted by the [OpenJS Foundation](https://www.openvisualization.org/), to discuss SQLRooms development, share examples, get help with integration questions, and connect with the community.

Follow these steps:

1. Join the OpenJS Foundation Slack workspace: https://slack-invite.openjsf.org/
2. In Slack, search and join the `#sqlrooms` channel

See you there!

---

---
url: /key-concepts.md
---
# Key Concepts

## What's a Room?

A **Room** is a self-contained workspace where users can explore datasets, run queries, and view results. The term comes from [collaborative tools](https://en.wikipedia.org/wiki/Collaborative_software)—where users work in shared spaces—and SQLRooms is built with future real-time collaboration in mind.

A Room consists of:

* `<RoomShell>`: a React component that renders the Room UI
* `roomStore`: a Zustand-based state store for the Room

***

![SQLRooms example RoomShell diagram](/assets/room-shell.DC43Wwic.png)

***

## Room Store

The `roomStore` is a [composable](#composing-store-from-slices) [`Zustand`](/state-management#why-zustand) store created by calling `createRoomStore()`. The store holds:

* `config`: the persistable part of the state that captures a Room's saveable settings and can be serialized to JSON for storage or sharing including:
  * the view configuration and the layout state
  * the user preferences
* `room`: non-persistable state that holds runtime information like:
  * loaded DuckDB tables
  * transient UI state (like "query running")

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice<RoomConfig>({
      config: {
        dataSources: [
          {
            type: 'url',
            url: 'https://.../earthquakes.parquet',
            tableName: 'earthquakes',
          },
        ],
      },
      room: {
        // Runtime state initialization…
      },
    })(set, get, store),
  }),
);
```

Check the [minimal example](https://github.com/sqlrooms/examples/blob/main/minimal/src/app.tsx) for the complete implementation.

***

## RoomShell

`<RoomShell>` is a React component that wraps your Room UI

* It injects the `roomStore` into React context, accessible via the `useRoomStore()` hook
* It sets up essential UI infrastructure including error boundaries, toast notifications, and tooltips, making it easy to use components from `@sqlrooms/ui` out of the box
* It provides slots for the optional `LayoutComposer` (see [Layout](#layout-optional) section below), `Sidebar`, and `LoadingProgress` components

```tsx
const App = () => (
  <RoomShell roomStore={roomStore}>
    <MyComponent />
  </RoomShell>
);
```

***

## SQL and DuckDB Access

SQLRooms includes a built-in DuckDB integration via the [`DuckDbSlice`](/api/duckdb/).
The `DuckDbSlice` provides helper functions for managing and querying tables:

* `findTableByName()` - Look up a table by name in the current schema
* `addTable()` - Add a new table from Arrow data or records
* `dropTable()` - Remove a table from the database
* `refreshTableSchemas()` - Update the cached table schemas
* `tables` - The cached list of tables from the last refreshTableSchemas() call
* `getConnector()` - Access the underlying DuckDB connector

You can query your datasets using the `useSql(query)` hook and work directly with Arrow tables in React.

```tsx
function MyComponent() {
  const isTableReady = useRoomStore((state) =>
    Boolean(state.db.findTableByName('earthquakes')),
  );
  const queryResult = useSql<{maxMagnitude: number}>({
    query: `SELECT max(Magnitude) AS maxMagnitude FROM earthquakes`,
    enabled: isTableReady,
  });
  const row = queryResult.data?.toArray()[0];
  return row ? `Max earthquake magnitude: ${row.maxMagnitude}` : <Spinner />;
}
```

For more details on DuckDB integration and available methods, see the [DuckDB API Reference](/api/duckdb/).

***

## Composing Store from Slices

The store can be enhanced with **slices**—modular pieces of state and logic that can be added to your Room. You can use slices from the `@sqlrooms/*` packages or create your own custom slices. Each slice is a function that returns a partial state object along with methods to modify that state.

Here's an example showing how to combine the default room shell with SQL editor functionality:

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>({
  // Default slice
  ...createRoomShellSlice<RoomConfig>({
    config: {
      // Add SQL editor slice persistable config
      ...createDefaultSqlEditorConfig(),
    },
    room: {},
  })(set, get, store),

  // Mix in sql editor slice
  ...createSqlEditorSlice()(set, get, store),
});
```

You can access slices' namespaced config, state and functions in the store using selectors, for example:

```tsx
const queries = useRoomStore((state) => state.config.sqlEditor.queries);
const runQuery = useRoomStore((state) => state.sqlEditor.parseAndRunQuery);
```

Learn more about store and slices in [State Management](/state-management).

***

## Layout (Optional)

The `LayoutComposer` provides a flexible panel layout for your Room's UI.

* Panels are React components that can be plugged into the layout. They include metadata (`id`, `title`, `icon`) and a `component` to render.
* Panels can be moved, resized, or hidden
* Developers can add panels by registering them in the `roomStore`.
* Layout state is persisted in the `roomStore`

Configure the room layout and panels during store initialization:

```tsx
const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    ...createRoomShellSlice<RoomConfig>({
      config: {
        layout: {
          type: LayoutTypes.enum.mosaic,
          nodes: {
            // Data panel on left (30%) and main view on right
            direction: 'row',
            first: 'data-panel',
            second: MAIN_VIEW,
            splitPercentage: 30,
          },
        },
      },
      room: {
        // Define the available panels in the room layout
        panels: {
          'data-panel': {
            title: 'Data Sources',
            icon: DatabaseIcon,
            component: DataSourcesPanel,
            placement: 'sidebar',
          },
          main: {
            title: 'Main view',
            icon: () => null,
            component: MainView,
            placement: 'main',
          },
        },
      },
    })(set, get, store),
  }),
);
```

Layout composer renders the mosaic layout with panels:

```tsx
function App() {
  return (
    <RoomShell className="h-screen" roomStore={roomStore}>
      <RoomShell.Sidebar />
      <RoomShell.LayoutComposer />
    </RoomShell>
  );
}
```

For more details on layout configuration and customization, see the [Layout API Reference](/api/layout/).

---

---
url: /api/recharts/namespaces/Label.md
---
[@sqlrooms/recharts](../../index.md) / Label

# Label

## Variables

* [displayName](variables/displayName.md)

## Functions

* [parseViewBox](functions/parseViewBox.md)
* [renderCallByParent](functions/renderCallByParent.md)

---

---
url: /api/recharts/namespaces/LabelList.md
---
[@sqlrooms/recharts](../../index.md) / LabelList

# LabelList

## Variables

* [displayName](variables/displayName.md)

## Functions

* [renderCallByParent](functions/renderCallByParent.md)

---

---
url: /modular-architecture.md
---
# Modular Architecture

SQLRooms is designed with a modular architecture that allows developers to pick and choose exactly the functionality they need for their data analytics applications. This approach enables you to build custom solutions tailored to your specific requirements.

![SQLRooms Architecture](/assets/architecture.C4KQpP4R.svg)

The diagram above illustrates how SQLRooms is structured for composability and extensibility:

* **Core packages** (green) provide the foundation: `roomShellStore` manages configuration and data sources, while `<RoomShell>` offers a flexible UI shell and panel layout. DuckDB-WASM and utilities enable fast, in-browser analytics.
* **Feature packages** (purple) are plug-and-play modules you can add as needed—such as DataTable views, SQL query editors, AI integration, Vega charts, S3 browser, and more. These integrate seamlessly with the core, letting you extend your app with popular data visualization and analytics tools.
* **Custom App Code** (blue) is where you bring it all together: use `roomStore` to compose base and custom store logic, and build your own custom views and panels. You can mix and match core and feature packages, or add your own, to create a tailored analytics experience.

A key part of SQLRooms' modularity is **store composability via slices**. Slices are modular pieces of state and logic that can be added to your Room. You can use slices from the `@sqlrooms/*` packages or create your own custom slices. Each slice is a function that returns a partial state object along with methods to modify that state. This makes it easy to extend and customize your Room's behavior.

Learn more and see an example in [Composing Store from Slices](/key-concepts#composing-store-from-slices).

This modular approach means you can start simple and grow your app as your needs evolve—adding only the components you want, and integrating with the libraries and tools your users need.

---

---
url: /offline-use.md
---

# Offline Use with SQLRooms

SQLRooms can be integrated into a [Progressive Web App (PWA)](https://web.dev/progressive-web-apps/) capable of working offline:

![SQLRooms Query Workbench progressive web app](/assets/sqlrooms-query-pwa.CQpq4wOb.png)

All computation happens on your device, whether in the browser or a desktop app, with no backend required. This enables privacy, speed, and user control, even when you're completely offline.

Here's how you can implement an offline-first experience with SQLRooms:

## 1. Persisting State in localStorage

SQLRooms uses [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) for state management. You can persist your app's state in the browser's `localStorage` using the `persist` middleware. This ensures user settings, layouts, and other state survive reloads and work offline.

**Example:**

```ts
import {persist} from 'zustand/middleware';

const {roomStore, useRoomStore} = createRoomStore(
  persist(
    (set, get, store) => ({
      // ...slices and state
    }),
    {
      name: 'sql-editor-example-app-state-storage', // localStorage key
      partialize: (state) => ({
        config: RoomConfig.parse(state.config),
      }),
    },
  ),
);
```

See [`examples/query/src/store.ts`](https://github.com/sqlrooms/examples/blob/main/query/src/store.ts) for a full example.

## 2. Using OPFS for DuckDB Storage

SQLRooms leverages [DuckDB-Wasm](https://duckdb.org/docs/wasm/overview.html) for in-browser SQL analytics. To persist your database between sessions, use the `opfs://` path, which stores the DuckDB database in the browser's [Origin Private File System (OPFS)](https://web.dev/origin-private-file-system/).

**Example:**

```ts
import {createWasmDuckDbConnector, DuckDBAccessMode} from '@sqlrooms/duckdb';

const connector = createWasmDuckDbConnector({
  path: 'opfs://database.db',
  accessMode: DuckDBAccessMode.READ_WRITE,
});
```

This allows users to keep their data local, persistent, and private.

## 3. Enabling Offline Support with PWA

To make your app work offline and provide a native-like experience, enable PWA support using [`vite-plugin-pwa`](https://vite-pwa-org.netlify.app/).

**Example vite.config.ts:**

```ts
import {VitePWA} from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'SQLRooms Query Workbench',
        short_name: 'SQLRooms',
        start_url: '.',
        display: 'standalone',
        background_color: '#ffffff',
        description: 'Query Workbench example for SQLRooms',
        icons: [
          {src: 'icon.png', sizes: '192x192', type: 'image/png'},
          {src: 'icon.png', sizes: '512x512', type: 'image/png'},
        ],
      },
    }),
  ],
});
```

See [`examples/query/vite.config.ts`](https://github.com/sqlrooms/examples/blob/main/query/vite.config.ts) for a real-world config.

## 4. Example: SQL Query Editor

The [PWA SQL Query Editor example](https://github.com/sqlrooms/examples/tree/main/query-pwa) demonstrates all of these offline techniques in a real app. It persists state, stores data in OPFS, and works offline as a PWA.

***

By combining these techniques, you can build analytics applications with SQLRooms that are fast, private, and fully offline—empowering your users to own their data and work anywhere, anytime.

---

---
url: /overview.md
---

# Overview

SQLRooms provides a comprehensive foundation and rich set of building blocks for creating modern, interactive data-analytics applications that can run entirely in the browser.
At its core is the concept of a ***Room*** — a self‑contained workspace where data lives, analysis happens, and (soon) collaborators meet. It combines essential components like a SQL query engine (DuckDB), data visualization tools, state management, and UI components into a cohesive toolkit, making it significantly easier to create powerful analytics tools with or without a backend.

![SQLRooms example apps](/assets/collage.DKGrBvB9.webp)

## Why SQLRooms?

SQLRooms is designed to empower developers and users with a modern, modular analytics toolkit that runs entirely in the browser. Here's what sets it apart:

* **Performance & Scale:** Every user gets a dedicated in-browser DuckDB instance, delivering columnar analytics speed with zero backend load.
* **Modular Architecture:** Mix and match packages, and combine state *slices* to include only the features you need—no bloat, just what your app requires.
* **AI‑Powered Analytics:** Built-in support for agents that can write and execute SQL queries, and generate insights directly in your browser—no server roundtrips required.
* **Developer Experience:** A composable, React-based framework with ready-to-use components, state management, and visualization tools, making it easy to build custom analytics solutions.

## Why Single-Node?

SQLRooms is designed for single-node analytics: all computation happens on your device, whether in the browser or a desktop app (e.g. via [Electron](https://www.electronjs.org/)), with no backend required. Data can remain local if you choose, or be loaded from external sources like S3—always giving you full control over how and where your data is processed.

* **Privacy:** All data remains on your device for simplified compliance and peace of mind—nothing leaves your browser unless you choose.
* **Own Your Data:** You control your files and data, with no vendor lock-in or forced cloud storage. Your work is portable and future-proof.
* **Offline Use:** SQLRooms [supports offline work](/offline-use)—query, analyze, and visualize your data even without an internet connection.
* **Fast Local Querying:** Queries run instantly in your browser, with no network roundtrip or server lag—results are available as soon as you ask.
* **Private AI Insights:** AI agents generate insights and run queries locally, so your data is never shared with external model providers. You get the power of AI-driven analytics without sacrificing privacy.

## Local-First Foundations

This approach draws on [Local-First principles](https://www.inkandswitch.com/essay/local-first), which emphasize user ownership and seamless collaboration. In Local-First apps, users retain full control of their data — it lives on their device, remains accessible offline, and isn’t locked behind a remote server. By contrast, traditional cloud apps centralize both computation and storage, often reducing user agency. If the service goes down or is discontinued, the app may stop working entirely, and user data can become inaccessible.

While SQLRooms does not yet implement sync or collaboration, it is already capable of delivering some of the key benefits of local-first software — your data and computation can stay private and accessible on your device.

## Next Steps

* **Review the [Key Concepts](/key-concepts)** to understand the core ideas and architecture.

* **Explore the [Modular Architecture](/modular-architecture)** to see how you can compose and extend your app.

* **Check the [Example Applications](/examples)** to see what can be built with the framework.

---

---
url: /query-cancellation.md
---
# Query Cancellation in DuckDbConnector

The DuckDbConnector now supports query cancellation through a unified `QueryHandle` interface with full composability support. All query methods (`execute`, `query`, `queryJson`) now return a `QueryHandle` that provides immediate access to cancellation functionality and signal composability.

## QueryHandle Interface

```typescript
interface QueryOptions {
  signal?: AbortSignal; // Optional external abort signal
}

// Promise-like intersection – can be awaited directly *or* via .result
type QueryHandle<T = any> = PromiseLike<T> & {
  result: Promise<T>; // Underlying promise (kept for backwards-compatibility)
  cancel: () => Promise<void>; // Method to cancel the query
  signal: AbortSignal; // Read-only abort signal for composability
};
```

## Usage Examples

### Basic Query with Cancellation

```typescript
import {createWasmDuckDbConnector} from './connectors/createDuckDbConnector';

const connector = createWasmDuckDbConnector();
await connector.initialize();

// Start a query and get immediate access to cancellation
const queryHandle = connector.query('SELECT * FROM large_table');
console.log('Query started');

// Cancel the query if needed (e.g., user clicks cancel button)
setTimeout(() => {
  queryHandle.cancel();
}, 5000);

try {
  const result = await queryHandle;
  console.log('Query completed:', result.numRows);
} catch (error) {
  console.log('Query was cancelled or failed:', error.message);
}
```

### Composable Cancellation - Multiple Queries with Shared Controller

```typescript
// Create a master abort controller for a series of operations
const masterController = new AbortController();

// Start multiple queries that can all be cancelled together
const query1 = connector.query('SELECT COUNT(*) FROM table1', {
  signal: masterController.signal,
});
const query2 = connector.query('SELECT AVG(price) FROM products', {
  signal: masterController.signal,
});
const query3 = connector.queryJson('SELECT * FROM users LIMIT 100', {
  signal: masterController.signal,
});

// Cancel all queries at once
setTimeout(() => {
  console.log('Cancelling all queries...');
  masterController.abort(); // This cancels all three queries
}, 3000);

try {
  const results = await Promise.allSettled([query1, query2, query3]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`Query ${index + 1} completed`);
    } else {
      console.log(`Query ${index + 1} failed:`, result.reason.message);
    }
  });
} catch (error) {
  console.log('Error in query execution:', error.message);
}
```

### Integration with Other Cancellable Operations

```typescript
// Create a shared abort controller for the entire operation
const operationController = new AbortController();

async function performComplexOperation() {
  try {
    // Step 1: Run a query
    const queryHandle = connector.query(
      'SELECT id, data FROM source_table WHERE condition = ?',
      {signal: operationController.signal},
    );

    const queryResult = await queryHandle;

    // Step 2: Make HTTP requests using the same signal
    const response = await fetch('/api/process-data', {
      method: 'POST',
      body: JSON.stringify(queryResult),
      signal: operationController.signal, // Same signal!
    });

    // Step 3: Another query with the same cancellation
    const finalQuery = connector.execute(
      'INSERT INTO results SELECT * FROM processed_data',
      {signal: operationController.signal},
    );

    await finalQuery;
    console.log('Complex operation completed');
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Operation was cancelled');
    } else {
      console.log('Operation failed:', error.message);
    }
  }
}

// Start the operation
performComplexOperation();

// Cancel the entire operation (queries + HTTP requests) after 10 seconds
setTimeout(() => {
  operationController.abort();
}, 10000);
```

### Advanced Signal Composition

```typescript
// Create timeout-based cancellation
function createTimeoutSignal(ms: number): AbortSignal {
  const controller = new AbortController();
  setTimeout(() => controller.abort(), ms);
  return controller.signal;
}

// Combine multiple signals
function combineSignals(...signals: AbortSignal[]): AbortSignal {
  const controller = new AbortController();

  signals.forEach((signal) => {
    if (signal.aborted) {
      controller.abort();
    } else {
      signal.addEventListener('abort', () => controller.abort());
    }
  });

  return controller.signal;
}

// Usage: Query with both user cancellation and timeout
const userController = new AbortController();
const timeoutSignal = createTimeoutSignal(30000); // 30 second timeout
const combinedSignal = combineSignals(userController.signal, timeoutSignal);

const queryHandle = connector.query('SELECT * FROM very_large_table', {
  signal: combinedSignal,
});

// User can still cancel manually
document.getElementById('cancel-btn').onclick = () => {
  userController.abort();
};

try {
  const result = await queryHandle;
  console.log('Query completed within timeout');
} catch (error) {
  console.log('Query cancelled or timed out:', error.message);
}
```

### Listening to Cancellation Events

```typescript
const queryHandle = connector.query('SELECT * FROM table');

// Listen for cancellation
queryHandle.signal.addEventListener('abort', () => {
  console.log('Query was cancelled');
  // Update UI, clean up resources, etc.
});

// Check if already cancelled
if (queryHandle.signal.aborted) {
  console.log('Query was already cancelled');
}

// Cancel after some condition
if (someCondition) {
  await queryHandle.cancel();
}
```

## Migration from Old API

### Before (Old API)

```typescript
const {data, qid} = await connector.query('SELECT * FROM table');
console.log('Query ID:', qid);
console.log('Results:', data.numRows);
```

### After (New API)

```typescript
// Simple usage (no external signal)
const queryHandle = connector.query('SELECT * FROM table');
console.log('Query started');
const data = await queryHandle;
console.log('Results:', data.numRows);

// With external cancellation control
const controller = new AbortController();
const queryHandle = connector.query('SELECT * FROM table', {
  signal: controller.signal,
});
// controller.abort() to cancel
const data = await queryHandle;
```

## Implementation Notes

* **Hybrid Approach**: Combines the simplicity of `.cancel()` with the composability of `AbortSignal`
* **Optional External Control**: Pass your own `AbortSignal` for coordinated cancellation across multiple operations
* **Automatic Internal Management**: If no signal is provided, one is created internally
* **Signal Chaining**: External signals are chained to internal controllers for proper cleanup
* **Web Standards Compliant**: Uses standard `AbortController`/`AbortSignal` APIs
* **Composable**: Signals can be shared across queries, HTTP requests, and other cancellable operations
* **Event-Driven**: Listen for abort events to update UI or perform cleanup

---

---
url: /state-management.md
---
# State Management

SQLRooms uses a slice-based architecture powered by [Zustand](http://zustand.docs.pmnd.rs/) for state management. This approach allows you to compose different functionality slices into a unified application state.

## Why Zustand?

[Zustand](https://zustand.docs.pmnd.rs/) is a small, fast, and scalable state management solution for React applications. SQLRooms chose Zustand for several key reasons:

* **Simplicity**: Zustand has a minimal API that's easy to learn and use, with no boilerplate code.
* **Performance**: It uses the React concurrent renderer and only re-renders components when their specific slice of state changes.
* **Flexibility**: Zustand works well with TypeScript, supports middleware, and can be used outside of React components.
* **Composability**: The slices pattern allows for modular state management that scales with application complexity.

Unlike other state management libraries, Zustand doesn't require providers or context wrappers, making it lightweight and straightforward to integrate into any component.

## Understanding Slices

A [slice](https://zustand.docs.pmnd.rs/guides/slices-pattern) is a modular piece of state and associated actions that can be combined with other slices to form a complete application state. Feature packages which manage their own state typically provide a slice that can be integrated into your application store.

### How to Combine Slices

Slices are combined in the store creation process. Here's an example from the AI example application:

```typescript
import {AiSliceState} from '@sqlrooms/ai';
import {RoomShellSliceState} from '@sqlrooms/room-shell';
import {SqlEditorSliceState} from '@sqlrooms/sql-editor';

// Combining multiple slices into a unified application state type
export type RoomState = RoomShellSliceState<RoomConfig> &
  AiSliceState &
  SqlEditorSliceState &
  CustomRoomState;

// Creating a store with multiple slices
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
  (set, get, store) => ({
    // Base room state
    ...createRoomShellSlice<RoomConfig>({
      // Room configuration
      // ...
    })(set, get, store),

    // SQL editor slice
    ...createSqlEditorSlice()(set, get, store),

    // AI slice with custom configuration
    ...createAiSlice({
      // AI slice configuration
    })(set, get, store),

    // Custom application state
    // ...
  }),
);
```

This approach allows you to:

1. Include only the slices you need
2. Customize each slice with your own configuration
3. Extend slices with additional functionality
4. Create custom slices for application-specific features

### How to Access Store Data

Once you've combined slices into a unified store, you can access different parts of the store using selectors. Here's an example:

```typescript
// Import the store hook (returned from `createRoomStore`)
import {useRoomStore} from '../store';

export const MyCustomView: React.FC = () => {
  // Access room slice data
  const isDataAvailable = useRoomStore((state) => state.room.isDataAvailable);

  // Access AI slice config (persistable state)
  const currentSessionId = useRoomStore((s) => s.ai.config.currentSessionId);

  // Access custom app state
  const apiKey = useRoomStore((s) => s.apiKey);
  // Access actions from custom app state
  const setApiKey = useRoomStore((s) => s.setApiKey);

  // Rest of component...
};
```

Each selector function receives the entire store state and returns only the specific piece of data needed, which helps optimize rendering performance by preventing unnecessary re-renders.

### Defining Configuration Types with Zod

SQLRooms uses [Zod](https://zod.dev/) for runtime type validation. When combining slices, you'll often need to combine their configuration types as well. The `.merge` method from Zod makes this process straightforward.

Here's an example from the AI example application showing how to combine configuration types:

```typescript
import {BaseRoomConfig} from '@sqlrooms/room-config';
import {SqlEditorSliceConfig} from '@sqlrooms/sql-editor';
import {z} from 'zod';

/**
 * Room config for saving - combining multiple slice configs
 */
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig).merge(
  z.object({
    // Custom app config
  }),
);
export type RoomConfig = z.infer<typeof RoomConfig>;
```

This approach offers several benefits:

1. **Type Safety**: The combined type is fully type-safe, with TypeScript inferring the correct type from the Zod schema.
2. **Runtime Validation**: The schema can validate data at runtime, ensuring configuration objects match the expected structure.
3. **Modularity**: Each slice provides its own configuration schema that can be combined with others.
4. **Documentation**: The schema serves as self-documenting code, clearly showing what configuration options are available.

When using the combined configuration type in your store, you can ensure that all required configuration properties from each slice are properly included:

```typescript
// Using the combined RoomConfig in the store
...createRoomShellSlice<RoomConfig>({
  config: {
    // SQL Editor slice configuration
    ...createDefaultSqlEditorConfig(),
    // Other configuration properties...
  },
  // Rest of room configuration...
})(set, get, store)
```

This pattern ensures that your application's configuration is both type-safe at compile time and validated at runtime.

---

---
url: /theming.md
---
# Theming

SQLRooms uses [shadcn's](https://ui.shadcn.com/) CSS variables approach for theming, providing a flexible and maintainable way to manage color schemes and design tokens across the application.

## Theme Provider

The application uses `ThemeProvider` to manage theme state:

```tsx
<ThemeProvider defaultTheme="dark" storageKey="sqlrooms-ui-theme">
  <App />
</ThemeProvider>
```

### Props

* `defaultTheme`: Initial theme ("light" or "dark")
* `storageKey`: localStorage key for persisting theme preference

## Using Themes in Components

You can either use the pre-built `ThemeSwitch` component or implement one yourself like here:

```tsx
import {ThemeSwitch} from '@sqlrooms/ui';

function MyNavBarComponent() {
  return (
    <div>
      ...
      <ThemeSwitch />
    </div>
  );
}
```

Or with a custom implementation using `Button` and `useTheme`:

```tsx
import {useTheme, Button} from '@sqlrooms/ui';

function ThemeToggle() {
  const {theme, setTheme} = useTheme();

  return (
    <Button
      variant="outline"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      Toggle theme
    </Button>
  );
}
```

## CSS Variables

The theming system uses CSS custom properties in HSL format. These variables are defined in the global CSS:

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}
```

### Variable Categories

* **Base Colors**

  * `--background` / `--foreground`: Main background and text colors
  * `--card` / `--card-foreground`: Card component colors
  * `--popover` / `--popover-foreground`: Popover/dropdown colors

* **Semantic Colors**

  * `--primary` / `--primary-foreground`: Primary action colors
  * `--secondary` / `--secondary-foreground`: Secondary action colors
  * `--muted` / `--muted-foreground`: Subdued UI elements
  * `--accent` / `--accent-foreground`: Emphasis and highlights
  * `--destructive` / `--destructive-foreground`: Error and deletion actions

* **UI Elements**

  * `--border`: Border colors
  * `--input`: Form input borders
  * `--ring`: Focus ring color
  * `--radius`: Border radius for components

* **Chart Colors**
  * `--chart-1` through `--chart-5`: Data visualization colors

### Using Variables in CSS

To use these variables in your components:

```css
.my-component {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
```

#### Using with Tailwind Classes

The theme variables are mapped to Tailwind's color system, allowing you to use them directly in className props:

```tsx
import { Button, Input } from '@sqlrooms/ui';

// Basic usage
<div className="bg-background text-foreground">
  <Button className="bg-primary text-primary-foreground">
    Click me
  </Button>
</div>

// With hover states
<Button
  variant="secondary"
  className="hover:bg-secondary/90 text-secondary-foreground"
>
  Hover me
</Button>

// With opacity modifiers
<div className="bg-muted/50 text-muted-foreground">
  Semi-transparent background
</div>

// Border and ring utilities
<Input className="focus:ring-2 ring-ring" />

// Destructive actions
<Button
  variant="destructive"
  className="hover:bg-destructive/90"
>
  Delete
</Button>
```

These class names automatically adapt to the current theme, switching between light and dark mode values as appropriate.

#### Dark Mode Variants

You can explicitly specify different styles for light and dark modes using Tailwind's `dark:` modifier:

```tsx
import { Button } from '@sqlrooms/ui';

// Basic dark mode override
<div className="bg-white dark:bg-slate-950">
  Light and dark specific background
</div>

// Combining with theme variables
<div className="bg-background text-foreground">
  <div className="bg-card dark:bg-card/90 dark:text-card-foreground/90">
    Card with dark mode opacity
  </div>
</div>

// Complex component example
<Button
  variant="primary"
  className="
    hover:bg-primary/90
    dark:bg-primary/80
    dark:text-primary-foreground/90
    dark:hover:bg-primary/70
  "
>
  Adaptive Button
</Button>

// Multiple dark mode modifiers
<div className="
  bg-background
  text-foreground/80 dark:text-foreground/70
  border-border dark:border-border/50
  shadow-md dark:shadow-xl
">
  Complex Container
</div>
```

Note: The `dark:` modifier works automatically with our theme system - it will apply when the theme is set to "dark" through the ThemeProvider.

## Customizing Themes

To create or modify themes:

1. Visit the [shadcn theme generator](https://ui.shadcn.com/themes)
2. Customize colors interactively
3. Copy the generated CSS
4. Update your global CSS file with the new variables

## API Reference

For detailed API documentation, refer to:

* [ThemeProvider API](/api/ui/functions/ThemeProvider)
* [ThemeSwitch API](/api/ui/functions/ThemeSwitch)
* [useTheme Hook API](/api/ui/functions/useTheme)

---

---
url: /api/duckdb/type-aliases/DuckConn.md
---
[@sqlrooms/duckdb](../index.md) / DuckConn

# Type Alias: ~~DuckConn~~

> **DuckConn**: [`DuckDb`](DuckDb.md)

## Deprecated

---

---
url: /api/duckdb/type-aliases/DuckDb.md
---
[@sqlrooms/duckdb](../index.md) / DuckDb

# Type Alias: ~~DuckDb~~

> **DuckDb**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `db` | `duckdb.AsyncDuckDB` |
|  `conn` | `duckdb.AsyncDuckDBConnection` |
|  `worker` | `Worker` |

## Deprecated

---

---
url: /api/duckdb/type-aliases/DuckDbQueryResult.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbQueryResult

# Type Alias: ~~DuckDbQueryResult\<T>~~

> **DuckDbQueryResult**<`T`>: [`UseSqlQueryResult`](../interfaces/UseSqlQueryResult.md)<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Deprecated

Use UseSqlQueryResult instead

---

---
url: /api/ai-config/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai-settings/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai/type-aliases/AiSettingsSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceConfig

# Type Alias: AiSettingsSliceConfig

> **AiSettingsSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `providers` | `Record`<`string`, { `baseUrl`: `string`; `apiKey`: `string`; `models`: `object`\[]; }> |
|  `customModels` | `object`\[] |
|  `modelParameters` | { `maxSteps`: `number`; `additionalInstruction`: `string`; } |

---

---
url: /api/ai-settings/type-aliases/AiSettingsSliceState.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceState

# Type Alias: AiSettingsSliceState

> **AiSettingsSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `aiSettings` | { `config`: [`AiSettingsSliceConfig`](AiSettingsSliceConfig.md); `setMaxSteps`: (`maxSteps`) => `void`; `setAdditionalInstruction`: (`additionalInstruction`) => `void`; `updateProvider`: (`provider`, `updates`) => `void`; `addProvider`: (`provider`, `baseUrl`, `apiKey`) => `void`; `addModelToProvider`: (`provider`, `modelName`) => `void`; `removeModelFromProvider`: (`provider`, `modelName`) => `void`; `removeProvider`: (`provider`) => `void`; `addCustomModel`: (`baseUrl`, `apiKey`, `modelName`) => `void`; `updateCustomModel`: (`oldModelName`, `baseUrl`, `apiKey`, `newModelName`) => `void`; `removeCustomModel`: (`modelName`) => `void`; } |

---

---
url: /api/ai/type-aliases/AiSettingsSliceState.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceState

# Type Alias: AiSettingsSliceState

> **AiSettingsSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `aiSettings` | { `config`: [`AiSettingsSliceConfig`](AiSettingsSliceConfig.md); `setMaxSteps`: (`maxSteps`) => `void`; `setAdditionalInstruction`: (`additionalInstruction`) => `void`; `updateProvider`: (`provider`, `updates`) => `void`; `addProvider`: (`provider`, `baseUrl`, `apiKey`) => `void`; `addModelToProvider`: (`provider`, `modelName`) => `void`; `removeModelFromProvider`: (`provider`, `modelName`) => `void`; `removeProvider`: (`provider`) => `void`; `addCustomModel`: (`baseUrl`, `apiKey`, `modelName`) => `void`; `updateCustomModel`: (`oldModelName`, `baseUrl`, `apiKey`, `newModelName`) => `void`; `removeCustomModel`: (`modelName`) => `void`; } |

---

---
url: /api/ai-config/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai-core/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai/type-aliases/AiSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSliceConfig

# Type Alias: AiSliceConfig

> **AiSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sessions` | `object`\[] |
|  `currentSessionId`? | `string` |

---

---
url: /api/ai-core/type-aliases/AiSliceState.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceState

# Type Alias: AiSliceState

> **AiSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `ai` | { `config`: [`AiSliceConfig`](AiSliceConfig.md); `analysisPrompt`: `string`; `isRunningAnalysis`: `boolean`; `tools`: `Record`<`string`, [`AiSliceTool`](AiSliceTool.md)>; `analysisAbortController`: `AbortController`; `setAnalysisPrompt`: (`prompt`) => `void`; `startAnalysis`: () => `Promise`<`void`>; `cancelAnalysis`: () => `void`; `setAiModel`: (`modelProvider`, `model`) => `void`; `createSession`: (`name`?, `modelProvider`?, `model`?) => `void`; `switchSession`: (`sessionId`) => `void`; `renameSession`: (`sessionId`, `name`) => `void`; `deleteSession`: (`sessionId`) => `void`; `getCurrentSession`: () => `AnalysisSessionSchema` | `undefined`; `deleteAnalysisResult`: (`sessionId`, `resultId`) => `void`; `findToolComponent`: (`toolName`) => `React.ComponentType` | `undefined`; `getApiKeyFromSettings`: () => `string`; `getBaseUrlFromSettings`: () => `string` | `undefined`; `getMaxStepsFromSettings`: () => `number`; `getFullInstructions`: () => `string`; } |

---

---
url: /api/ai/type-aliases/AiSliceState.md
---
[@sqlrooms/ai](../index.md) / AiSliceState

# Type Alias: AiSliceState

> **AiSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `ai` | { `config`: [`AiSliceConfig`](AiSliceConfig.md); `analysisPrompt`: `string`; `isRunningAnalysis`: `boolean`; `tools`: `Record`<`string`, [`AiSliceTool`](AiSliceTool.md)>; `analysisAbortController`: `AbortController`; `setAnalysisPrompt`: (`prompt`) => `void`; `startAnalysis`: () => `Promise`<`void`>; `cancelAnalysis`: () => `void`; `setAiModel`: (`modelProvider`, `model`) => `void`; `createSession`: (`name`?, `modelProvider`?, `model`?) => `void`; `switchSession`: (`sessionId`) => `void`; `renameSession`: (`sessionId`, `name`) => `void`; `deleteSession`: (`sessionId`) => `void`; `getCurrentSession`: () => [`AnalysisSessionSchema`](AnalysisSessionSchema.md) | `undefined`; `deleteAnalysisResult`: (`sessionId`, `resultId`) => `void`; `findToolComponent`: (`toolName`) => `React.ComponentType` | `undefined`; `getApiKeyFromSettings`: () => `string`; `getBaseUrlFromSettings`: () => `string` | `undefined`; `getMaxStepsFromSettings`: () => `number`; `getFullInstructions`: () => `string`; } |

---

---
url: /api/ai-core/type-aliases/AiSliceTool.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceTool

# Type Alias: AiSliceTool

> **AiSliceTool**: `ExtendedTool`<`z.ZodTypeAny`, `unknown`, `unknown`, `unknown`>

---

---
url: /api/ai/type-aliases/AiSliceTool.md
---
[@sqlrooms/ai](../index.md) / AiSliceTool

# Type Alias: AiSliceTool

> **AiSliceTool**: `ExtendedTool`<`z.ZodTypeAny`, `unknown`, `unknown`, `unknown`>

---

---
url: /api/ai-config/type-aliases/AnalysisResultSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisResultSchema

# Type Alias: AnalysisResultSchema

> **AnalysisResultSchema**: `object`

## Type declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
|  `id` | `string` | - |
|  `prompt` | `string` | - |
|  `streamMessage` | { `parts`: ({ `type`: `"text"`; `text`: `string`; `isCompleted`: `boolean`; `additionalData`: `any`; } | { `type`: `"tool-invocation"`; `toolInvocation`: { `toolName`: `string`; `toolCallId`: `string`; `state`: `string`; `args`: `any`; `result`: `any`; }; `isCompleted`: `boolean`; `additionalData`: `any`; } | `objectOutputType`<{ `type`: `ZodString`; `additionalData`: `ZodOptional`<`ZodAny`>; `isCompleted`: `ZodOptional`<`ZodBoolean`>; }, `ZodTypeAny`, `"passthrough"`>)\[]; } | migrateStreamMessage |
|  `errorMessage`? | { `error`: `string`; } | - |
|  `isCompleted` | `boolean` | - |

---

---
url: /api/ai/type-aliases/AnalysisResultSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultSchema

# Type Alias: AnalysisResultSchema

> **AnalysisResultSchema**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `isCompleted` | `boolean` |
|  `id` | `string` |
|  `prompt` | `string` |
|  `streamMessage` | { `parts`: ({ `type`: `"text"`; `text`: `string`; `isCompleted`: `boolean`; `additionalData`: `any`; } | { `type`: `"tool-invocation"`; `toolInvocation`: { `toolName`: `string`; `toolCallId`: `string`; `state`: `string`; `args`: `any`; `result`: `any`; }; `isCompleted`: `boolean`; `additionalData`: `any`; } | `objectOutputType`<{ `type`: `ZodString`; `additionalData`: `ZodOptional`<`ZodAny`>; `isCompleted`: `ZodOptional`<`ZodBoolean`>; }, `ZodTypeAny`, `"passthrough"`>)\[]; } |
|  `errorMessage`? | { `error`: `string`; } |

---

---
url: /api/ai-config/type-aliases/AnalysisSessionSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisSessionSchema

# Type Alias: AnalysisSessionSchema

> **AnalysisSessionSchema**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `name` | `string` |
|  `modelProvider` | `string` |
|  `model` | `string` |
|  `customModelName`? | `string` |
|  `baseUrl`? | `string` |
|  `analysisResults` | `object`\[] |
|  `createdAt`? | `Date` |

---

---
url: /api/ai/type-aliases/AnalysisSessionSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisSessionSchema

# Type Alias: AnalysisSessionSchema

> **AnalysisSessionSchema**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `name` | `string` |
|  `modelProvider` | `string` |
|  `model` | `string` |
|  `analysisResults` | `object`\[] |
|  `baseUrl`? | `string` |
|  `customModelName`? | `string` |
|  `createdAt`? | `Date` |

---

---
url: /api/recharts/type-aliases/AreaProps.md
---
[@sqlrooms/recharts](../index.md) / AreaProps

# Type Alias: AreaProps

> **AreaProps**: `Omit`<`SVGProps`<`SVGElement`>, `"type"` | `"points"`> & `AreaProps`

---

---
url: /api/recharts/type-aliases/BarProps.md
---
[@sqlrooms/recharts](../index.md) / BarProps

# Type Alias: BarProps

> **BarProps**: `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGPathElement`>, `"radius"` | `"name"`> & `BarProps`

---

---
url: /api/room-config/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-config](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource**: `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type declaration

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` | DataSourceTypes | Type of the data source |
|  `tableName` | `string` | - | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |

---

---
url: /api/room-shell/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-shell](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource**: `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` |
|  `tableName` | `string` |

---

---
url: /api/room-store/type-aliases/BaseDataSource.md
---
[@sqlrooms/room-store](../index.md) / BaseDataSource

# Type Alias: BaseDataSource

> **BaseDataSource**: `object`

**`Interface`**

Base interface for all data source configurations
BaseDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` | `"url"` | `"sql"` |
|  `tableName` | `string` |

---

---
url: /api/room-config/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `description`? | `null` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; })\[] |

---

---
url: /api/room-shell/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; })\[] |
|  `description`? | `null` | `string` |

---

---
url: /api/room-store/type-aliases/BaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomConfig

# Type Alias: BaseRoomConfig

> **BaseRoomConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `title` | `string` |
|  `layout` | { `type`: `"mosaic"`; `nodes`: `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md); `pinned`: `string`\[]; `fixed`: `string`\[]; } |
|  `dataSources` | ({ `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; })\[] |
|  `description`? | `null` | `string` |

---

---
url: /api/recharts/type-aliases/BrushProps.md
---
[@sqlrooms/recharts](../index.md) / BrushProps

# Type Alias: BrushProps

> **BrushProps**: `Omit`<`SVGProps`<`SVGElement`>, `"onChange"`> & `BrushProps`

---

---
url: /api/ui/type-aliases/CalendarProps.md
---
[@sqlrooms/ui](../index.md) / CalendarProps

# Type Alias: CalendarProps

> **CalendarProps**: `React.ComponentProps`<*typeof* `DayPicker`>

---

---
url: /api/canvas/type-aliases/CanvasSliceConfig.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceConfig

# Type Alias: CanvasSliceConfig

> **CanvasSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `viewport` | { `x`: `number`; `y`: `number`; `zoom`: `number`; } |
|  `nodes` | `object`\[] |
|  `edges` | `object`\[] |

---

---
url: /api/canvas/type-aliases/CanvasSliceState.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceState

# Type Alias: CanvasSliceState

> **CanvasSliceState**: `AiSliceState` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `canvas` | { `config`: [`CanvasSliceConfig`](CanvasSliceConfig.md); `isAssistantOpen`: `boolean`; `sqlResults`: `Record`<`string`, `SqlNodeQueryResult`>; `initialize`: () => `Promise`<`void`>; `setViewport`: (`viewport`) => `void`; `setAssistantOpen`: (`isAssistantOpen`) => `void`; `addNode`: (`params`) => `string`; `executeDownstreamFrom`: (`nodeId`) => `Promise`<`void`>; `renameNode`: (`nodeId`, `newTitle`) => `Promise`<`void`>; `updateNode`: (`nodeId`, `updater`) => `void`; `deleteNode`: (`nodeId`) => `void`; `applyNodeChanges`: (`changes`) => `void`; `applyEdgeChanges`: (`changes`) => `void`; `addEdge`: (`edge`) => `void`; `executeSqlNodeQuery`: (`nodeId`, `opts`?) => `Promise`<`void`>; } |

---

---
url: /api/recharts/type-aliases/CartesianAxisProps.md
---
[@sqlrooms/recharts](../index.md) / CartesianAxisProps

# Type Alias: CartesianAxisProps

> **CartesianAxisProps**: `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"viewBox"`> & `CartesianAxisProps`

---

---
url: /api/recharts/type-aliases/CartesianGridProps.md
---
[@sqlrooms/recharts](../index.md) / CartesianGridProps

# Type Alias: CartesianGridProps

> **CartesianGridProps**: `AcceptedSvgProps` & `CartesianGridProps`

---

---
url: /api/recharts/type-aliases/CellProps.md
---
[@sqlrooms/recharts](../index.md) / CellProps

# Type Alias: CellProps

> **CellProps**: `SVGProps`<`SVGElement`>

---

---
url: /api/recharts/type-aliases/ChartConfig.md
---
[@sqlrooms/recharts](../index.md) / ChartConfig

# Type Alias: ChartConfig

> **ChartConfig**: { \[k in string]: { label?: React.ReactNode; icon?: React.ComponentType } & ({ color?: string; theme?: never } | { color?: never; theme: Record\<keyof typeof THEMES, string> }) }

---

---
url: /api/duckdb/type-aliases/ColumnNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / ColumnNodeObject

# Type Alias: ColumnNodeObject

> **ColumnNodeObject**: `BaseNodeObject` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `type` | `"column"` |
| `columnType` | `string` |
| `columnTypeCategory`? | [`ColumnTypeCategory`](ColumnTypeCategory.md) |

---

---
url: /api/duckdb/type-aliases/ColumnTypeCategory.md
---
[@sqlrooms/duckdb](../index.md) / ColumnTypeCategory

# Type Alias: ColumnTypeCategory

> **ColumnTypeCategory**: `"number"` | `"string"` | `"datetime"` | `"boolean"` | `"binary"` | `"json"` | `"struct"` | `"geometry"`

---

---
url: /api/discuss/type-aliases/Comment.md
---
[@sqlrooms/discuss](../index.md) / Comment

# Type Alias: Comment

> **Comment**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `id` | `string` |
|  `userId` | `string` |
|  `text` | `string` |
|  `timestamp` | `Date` |
|  `parentId`? | `string` |

---

---
url: /api/cosmos/type-aliases/CosmosGraphProps.md
---
[@sqlrooms/cosmos](../index.md) / CosmosGraphProps

# Type Alias: CosmosGraphProps

> **CosmosGraphProps**: `object`

Props for the CosmosGraph component.

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `config` | `GraphConfigInterface` | Configuration object for the graph's visual and behavioral properties |
|  `pointPositions` | `Float32Array` | Float32Array containing x,y coordinates for each point (2 values per point) |
|  `pointSizes` | `Float32Array` | Float32Array containing size values for each point (1 value per point) |
|  `pointColors` | `Float32Array` | Float32Array containing RGBA values for each point (4 values per point) |
|  `linkIndexes`? | `Float32Array` | Optional Float32Array containing pairs of point indices defining links |
|  `linkColors`? | `Float32Array` | Optional Float32Array containing RGBA values for each link (4 values per link) |
|  `focusedPointIndex`? | `number` | Optional index of the point to focus on |
|  `renderPointTooltip`? | (`index`) => `React.ReactNode` | Optional function to render custom tooltip content for a point |
|  `children`? | `React.ReactNode` | Optional child elements to render inside the graph container |

---

---
url: /api/cosmos/type-aliases/CosmosSliceConfig.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceConfig

# Type Alias: CosmosSliceConfig

> **CosmosSliceConfig**: `object`

Zod schema for validating and configuring the Cosmos graph visualization.
This schema defines all available configuration options and their types.

The configuration is divided into several categories:

Node Appearance:

* `pointSizeScale`: Controls the size of nodes
* `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level

Link Appearance:

* `renderLinks`: Toggles link visibility
* `linkWidthScale`: Controls link thickness
* `linkArrows`: Toggles directional arrows
* `linkArrowsSizeScale`: Controls arrow size
* `curvedLinks`: Toggles curved/straight links

Physics Simulation:

* `simulationGravity`: Central gravitational force (0.25)
* `simulationRepulsion`: Node repulsion force (1.0)
* `simulationLinkSpring`: Link spring force (1.0)
* `simulationLinkDistance`: Natural link length (10)
* `simulationFriction`: Movement damping (0.85)
* `simulationDecay`: Simulation cooling rate (1000)

## Type declaration

| Name | Type |
| ------ | ------ |
|  `cosmos` | { `pointSizeScale`: `number`; `scalePointsOnZoom`: `boolean`; `renderLinks`: `boolean`; `linkWidthScale`: `number`; `linkArrowsSizeScale`: `number`; `linkArrows`: `boolean`; `curvedLinks`: `boolean`; `simulationGravity`: `number`; `simulationRepulsion`: `number`; `simulationLinkSpring`: `number`; `simulationLinkDistance`: `number`; `simulationFriction`: `number`; `simulationDecay`: `number`; } |

## Examples

```typescript
const config: CosmosSliceConfig = {
  cosmos: {
    pointSizeScale: 1.2,
    scalePointsOnZoom: true,
    renderLinks: true,
    linkWidthScale: 1.5,
    simulationGravity: 0.25
  }
};
```

```typescript
const directedGraphConfig: CosmosSliceConfig = {
  cosmos: {
    linkArrows: true,
    linkArrowsSizeScale: 1.2,
    curvedLinks: true,
    simulationLinkDistance: 15,
    simulationLinkSpring: 1.2
  }
};
```

```typescript
const largeGraphConfig: CosmosSliceConfig = {
  cosmos: {
    simulationGravity: 0.1,
    simulationRepulsion: 0.8,
    simulationFriction: 0.9,
    simulationDecay: 2000,
    scalePointsOnZoom: false
  }
};
```

---

---
url: /api/cosmos/type-aliases/CosmosSliceState.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceState

# Type Alias: CosmosSliceState

> **CosmosSliceState**: `object`

Core state interface for the Cosmos graph visualization.
Contains the graph instance, simulation state, and all control functions.

## Type declaration

| Name | Type |
| ------ | ------ |
|  `cosmos` | { `graph`: `Graph` | `null`; `isSimulationRunning`: `boolean`; `createGraph`: (`container`) => `void`; `toggleSimulation`: () => `void`; `fitView`: () => `void`; `startWithEnergy`: () => `void`; `destroyGraph`: () => `void`; `updateSimulationConfig`: (`config`) => `void`; `updateGraphConfig`: (`config`) => `void`; `updateGraphData`: (`data`) => `void`; `setFocusedPoint`: (`index`) => `void`; `setZoomLevel`: (`level`) => `void`; } |

---

---
url: /api/sql-editor/type-aliases/CreateTableModalProps.md
---
[@sqlrooms/sql-editor](../index.md) / CreateTableModalProps

# Type Alias: CreateTableModalProps

> **CreateTableModalProps**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `query` | `string` |
|  `isOpen` | `boolean` |
|  `onClose` | () => `void` |
|  `editDataSource`? | `SqlQueryDataSource` |
|  `onAddOrUpdateSqlQuery` | (`tableName`, `query`, `oldTableName`?) => `Promise`<`void`> |

---

---
url: /api/recharts/type-aliases/CrossProps.md
---
[@sqlrooms/recharts](../index.md) / CrossProps

# Type Alias: CrossProps

> **CrossProps**: `SVGProps`<`SVGPathElement`> & `CrossProps`

---

---
url: /api/recharts/type-aliases/CurveProps.md
---
[@sqlrooms/recharts](../index.md) / CurveProps

# Type Alias: CurveProps

> **CurveProps**: `Omit`<`PresentationAttributesWithProps`<`CurveProps`, `SVGPathElement`>, `"type"` | `"points"`> & `CurveProps`

---

---
url: /api/recharts/type-aliases/CustomizedProps.md
---
[@sqlrooms/recharts](../index.md) / CustomizedProps

# Type Alias: CustomizedProps\<P, C>

> **CustomizedProps**<`P`, `C`>: `P` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `component` | `C` |

## Type Parameters

| Type Parameter |
| ------ |
| `P` |
| `C` *extends* `Comp`<`P`> |

---

---
url: /api/duckdb/type-aliases/DatabaseNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / DatabaseNodeObject

# Type Alias: DatabaseNodeObject

> **DatabaseNodeObject**: `BaseNodeObject` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `type` | `"database"` |

---

---
url: /api/room-config/type-aliases/DataSource.md
---
[@sqlrooms/room-config](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource**: { `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

## Type declaration

{ `tableName`: `string`; `type`: `"file"`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"file"` | - |
| `fileName` | `string` | Path to the data file |
| `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | Optional configuration for file loading |

{ `tableName`: `string`; `type`: `"url"`; `url`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"url"` | - |
| `url` | `string` | URL from which to fetch the data |
| `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | Optional configuration for file loading |
| `httpMethod`? | `string` | Optional HTTP method to use for the request |
| `headers`? | `Record`<`string`, `string`> | Optional headers to include in the request |

{ `tableName`: `string`; `type`: `"sql"`; `sqlQuery`: `string`; }

| Name | Type | Description |
| ------ | ------ | ------ |
| `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
| `type` | `"sql"` | - |
| `sqlQuery` | `string` | SQL query to execute for data retrieval |

---

---
url: /api/room-shell/type-aliases/DataSource.md
---
[@sqlrooms/room-shell](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource**: { `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-store/type-aliases/DataSource.md
---
[@sqlrooms/room-store](../index.md) / DataSource

# Type Alias: DataSource

> **DataSource**: { `type`: `"file"`; `tableName`: `string`; `fileName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; } | { `type`: `"url"`; `url`: `string`; `tableName`: `string`; `loadOptions`: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>; `httpMethod`: `string`; `headers`: `Record`<`string`, `string`>; } | { `type`: `"sql"`; `tableName`: `string`; `sqlQuery`: `string`; }

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-shell/type-aliases/DataSourceState.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceState

# Type Alias: DataSourceState

> **DataSourceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `status` | [`DataSourceStatus`](../enumerations/DataSourceStatus.md) |
|  `message`? | `string` |

---

---
url: /api/room-config/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-config](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes**: `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/room-shell/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes**: `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/room-store/type-aliases/DataSourceTypes.md
---
[@sqlrooms/room-store](../index.md) / DataSourceTypes

# Type Alias: DataSourceTypes

> **DataSourceTypes**: `"file"` | `"url"` | `"sql"`

Enum representing the supported types of data sources

---

---
url: /api/duckdb/type-aliases/DataTable.md
---
[@sqlrooms/duckdb](../index.md) / DataTable

# Type Alias: DataTable

> **DataTable**: `object`

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `table` | [`QualifiedTableName`](QualifiedTableName.md) | - |
|  `isView` | `boolean` | - |
|  `database`? | `string` | **Deprecated** Use table.database instead |
|  `schema` | `string` | **Deprecated** Use table.schema instead |
|  `tableName` | `string` | **Deprecated** Use table.table instead |
|  `columns` | [`TableColumn`](TableColumn.md)\[] | - |
|  `rowCount`? | `number` | - |
|  `inputFileName`? | `string` | - |
|  `sql`? | `string` | - |
|  `comment`? | `string` | - |

---

---
url: /api/data-table/type-aliases/DataTablePaginatedProps.md
---
[@sqlrooms/data-table](../index.md) / DataTablePaginatedProps

# Type Alias: DataTablePaginatedProps\<Data>

> **DataTablePaginatedProps**<`Data`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `Data` *extends* `object` |

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `className`? | `string` | - |
|  `fontSize`? | `string` | Custom font size for the table e.g. text-xs, text-sm, text-md, text-lg, text-base |
|  `data`? | `ArrayLike`<`Data`> | - |
|  `columns`? | `ColumnDef`<`Data`, `any`>\[] | - |
|  `pageCount`? | `number` | - |
|  `numRows`? | `number` | - |
|  `isFetching`? | `boolean` | - |
|  `pagination`? | `PaginationState` | - |
|  `sorting`? | `SortingState` | - |
|  `footerActions`? | `React.ReactNode` | - |
|  `onPaginationChange`? | (`pagination`) => `void` | - |
|  `onSortingChange`? | (`sorting`) => `void` | - |
|  `onRowClick`? | (`args`) => `void` | Called when a row is clicked. |
|  `onRowDoubleClick`? | (`args`) => `void` | Called when a row is double-clicked. |

---

---
url: /api/duckdb/type-aliases/DbSchemaNode.md
---
[@sqlrooms/duckdb](../index.md) / DbSchemaNode

# Type Alias: DbSchemaNode\<T>

> **DbSchemaNode**<`T`>: `object`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` *extends* [`NodeObject`](NodeObject.md) | [`NodeObject`](NodeObject.md) |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `key` | `string` |
|  `object` | `T` |
|  `children`? | [`DbSchemaNode`](DbSchemaNode.md)\[] |
|  `isInitialOpen`? | `boolean` |

---

---
url: /api/recharts/type-aliases/DefaultLegendContentProps.md
---
[@sqlrooms/recharts](../index.md) / DefaultLegendContentProps

# Type Alias: DefaultLegendContentProps

> **DefaultLegendContentProps**: `InternalProps` & `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `ReactElement`>, keyof `InternalProps`>

---

---
url: /api/ai/type-aliases/DefaultToolsOptions.md
---
[@sqlrooms/ai](../index.md) / DefaultToolsOptions

# Type Alias: DefaultToolsOptions

> **DefaultToolsOptions**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `query`? | `QueryToolOptions` |

---

---
url: /api/discuss/type-aliases/Discussion.md
---
[@sqlrooms/discuss](../index.md) / Discussion

# Type Alias: Discussion

> **Discussion**: `object`

## Type declaration

| Name | Type | Default value |
| ------ | ------ | ------ |
|  `id` | `string` | - |
|  `anchorId`? | `string` | - |
|  `rootComment` | { `id`: `string`; `userId`: `string`; `text`: `string`; `timestamp`: `Date`; `parentId`: `string`; } | Comment |
|  `comments` | `object`\[] | - |

---

---
url: /api/discuss/type-aliases/DiscussSliceConfig.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceConfig

# Type Alias: DiscussSliceConfig

> **DiscussSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `discussions` | `object`\[] |

---

---
url: /api/discuss/type-aliases/DiscussSliceState.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceState

# Type Alias: DiscussSliceState

> **DiscussSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `discuss` | { `userId`: `string`; `config`: [`DiscussSliceConfig`](DiscussSliceConfig.md); `submitEdit`: (`text`) => `void`; `replyToItem`: `ReplyToItem` | `undefined`; `setReplyToItem`: (`replyToItem`) => `void`; `editingItem`: `EditingItem` | `undefined`; `setEditingItem`: (`editingItem`) => `void`; `itemToDelete`: `DeleteItem` | `undefined`; `setItemToDelete`: (`item`) => `void`; `highlightedDiscussionId`: `string` | `undefined`; `setHighlightedDiscussionId`: (`discussionId`) => `void`; `handleDeleteConfirm`: () => `void`; `setConfig`: (`config`) => `void`; `getReplyToUserId`: () => `string`; `getEditingItemText`: () => `string`; `addDiscussion`: (`text`, `anchorId`?) => `void`; `editDiscussion`: (`id`, `text`) => `void`; `removeDiscussion`: (`id`) => `void`; `addComment`: (`discussionId`, `text`, `parentId`?) => `void`; `editComment`: (`discussionId`, `commentId`, `text`) => `void`; `removeComment`: (`discussionId`, `commentId`) => `void`; } |

---

---
url: /api/recharts/type-aliases/DotProps.md
---
[@sqlrooms/recharts](../index.md) / DotProps

# Type Alias: DotProps

> **DotProps**: `PresentationAttributesWithProps`<`DotProps`, `SVGCircleElement`> & `DotProps`

---

---
url: /api/duckdb-config/type-aliases/DuckDbSliceConfig.md
---
[@sqlrooms/duckdb-config](../index.md) / DuckDbSliceConfig

# Type Alias: DuckDbSliceConfig

> **DuckDbSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `db`? | {} |

---

---
url: /api/duckdb/type-aliases/DuckDbSliceConfig.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbSliceConfig

# Type Alias: DuckDbSliceConfig

> **DuckDbSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `db`? | {} |

---

---
url: /api/duckdb/type-aliases/DuckDbSliceState.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbSliceState

# Type Alias: DuckDbSliceState

> **DuckDbSliceState**: `object`

State and actions for the DuckDB slice

## Type declaration

| Name | Type |
| ------ | ------ |
|  `db` | { `connector`: [`DuckDbConnector`](../interfaces/DuckDbConnector.md); `schema`: `string`; `currentSchema`: `string` | `undefined`; `currentDatabase`: `string` | `undefined`; `tables`: [`DataTable`](DataTable.md)\[]; `tableRowCounts`: {}; `schemaTrees`: [`DbSchemaNode`](DbSchemaNode.md)\[]; `queryCache`: {}; `isRefreshingTableSchemas`: `boolean`; `setConnector`: (`connector`) => `void`; `initialize`: () => `Promise`<`void`>; `destroy`: () => `Promise`<`void`>; `addTable`: `Promise`<[`DataTable`](DataTable.md)>; `loadTableSchemas`: `Promise`<[`DataTable`](DataTable.md)\[]>; `getTable`: `undefined` | [`DataTable`](DataTable.md); `setTableRowCount`: `void`; `findTableByName`: `undefined` | [`DataTable`](DataTable.md); `refreshTableSchemas`: `Promise`<[`DataTable`](DataTable.md)\[]>; `getConnector`: () => `Promise`<[`DuckDbConnector`](../interfaces/DuckDbConnector.md)>; `getTableRowCount`: (`table`, `schema`?) => `Promise`<`number`>; `loadTableRowCount`: (`tableName`) => `Promise`<`number`>; `executeSql`: (`query`) => `Promise`<[`QueryHandle`](QueryHandle.md) | `null`>; `getTables`: (`schema`?) => `Promise`<`string`\[]>; `getTableSchema`: (`tableName`, `schema`?) => `Promise`<[`DataTable`](DataTable.md) | `undefined`>; `getTableSchemas`: (`schema`?) => `Promise`<[`DataTable`](DataTable.md)\[]>; `checkTableExists`: (`tableName`) => `Promise`<`boolean`>; `dropTable`: (`tableName`) => `Promise`<`void`>; `createTableFromQuery`: (`tableName`, `query`) => `Promise`<{ `tableName`: `string` | [`QualifiedTableName`](QualifiedTableName.md); `rowCount`: `number`; }>; `sqlSelectToJson`: (`sql`) => `Promise`<{ `error`: `true`; `error_type`: `string`; `error_message`: `string`; `error_subtype`: `string`; `position`: `string`; } | { `error`: `false`; `statements`: `object`\[]; }>; } |

---

---
url: /api/recharts/type-aliases/ErrorBarProps.md
---
[@sqlrooms/recharts](../index.md) / ErrorBarProps

# Type Alias: ErrorBarProps

> **ErrorBarProps**: `SVGProps`<`SVGLineElement`> & `ErrorBarProps`

---

---
url: /api/ai-config/type-aliases/ErrorMessageSchema.md
---
[@sqlrooms/ai-config](../index.md) / ErrorMessageSchema

# Type Alias: ErrorMessageSchema

> **ErrorMessageSchema**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `error` | `string` |

---

---
url: /api/ai/type-aliases/ErrorMessageSchema.md
---
[@sqlrooms/ai](../index.md) / ErrorMessageSchema

# Type Alias: ErrorMessageSchema

> **ErrorMessageSchema**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `error` | `string` |

---

---
url: /api/room-config/type-aliases/FileDataSource.md
---
[@sqlrooms/room-config](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource**: `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"file"` | - |
|  `fileName` | `string` | Path to the data file |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | Optional configuration for file loading |

---

---
url: /api/room-shell/type-aliases/FileDataSource.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource**: `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` |
|  `tableName` | `string` |
|  `fileName` | `string` |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> |

---

---
url: /api/room-store/type-aliases/FileDataSource.md
---
[@sqlrooms/room-store](../index.md) / FileDataSource

# Type Alias: FileDataSource

> **FileDataSource**: `object`

**`Interface`**

Configuration for file-based data sources
FileDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"file"` |
|  `tableName` | `string` |
|  `fileName` | `string` |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> |

---

---
url: /api/recharts/type-aliases/FunnelProps.md
---
[@sqlrooms/recharts](../index.md) / FunnelProps

# Type Alias: FunnelProps

> **FunnelProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & [`TrapezoidProps`](TrapezoidProps.md) & `InternalFunnelProps`

---

---
url: /api/recharts/type-aliases/LabelListProps.md
---
[@sqlrooms/recharts](../index.md) / LabelListProps

# Type Alias: LabelListProps\<T>

> **LabelListProps**<`T`>: `SVGProps`<`SVGTextElement`> & `LabelListProps`<`T`>

## Type Parameters

| Type Parameter |
| ------ |
| `T` *extends* `Data` |

---

---
url: /api/recharts/type-aliases/LabelProps.md
---
[@sqlrooms/recharts](../index.md) / LabelProps

# Type Alias: LabelProps

> **LabelProps**: `Omit`<`SVGProps`<`SVGTextElement`>, `"viewBox"`> & `LabelProps`

---

---
url: /api/recharts/type-aliases/LayerProps.md
---
[@sqlrooms/recharts](../index.md) / LayerProps

# Type Alias: LayerProps

> **LayerProps**: `SVGAttributes`<`SVGGElement`> & `LayerProps`

---

---
url: /api/layout-config/type-aliases/LayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/layout/type-aliases/LayoutConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-config/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-shell/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-store/type-aliases/LayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / LayoutConfig

# Type Alias: LayoutConfig

> **LayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/layout/type-aliases/LayoutSliceConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceConfig

# Type Alias: LayoutSliceConfig

> **LayoutSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `layout`? | `any` |

---

---
url: /api/layout/type-aliases/LayoutSliceState.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceState

# Type Alias: LayoutSliceState

> **LayoutSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `layout` | { `panels`: `Record`<`string`, [`RoomPanelInfo`](RoomPanelInfo.md)>; `setLayout`: `void`; `togglePanel`: (`panel`, `show`?) => `void`; `togglePanelPin`: (`panel`) => `void`; } |

---

---
url: /api/layout-config/type-aliases/LayoutTypes.md
---
[@sqlrooms/layout-config](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes**: `"row"` | `"column"`

---

---
url: /api/layout/type-aliases/LayoutTypes.md
---
[@sqlrooms/layout](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes**: `"row"` | `"column"`

---

---
url: /api/room-config/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-config](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes**: `"row"` | `"column"`

---

---
url: /api/room-shell/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-shell](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes**: `"row"` | `"column"`

---

---
url: /api/room-store/type-aliases/LayoutTypes.md
---
[@sqlrooms/room-store](../index.md) / LayoutTypes

# Type Alias: LayoutTypes

> **LayoutTypes**: `"row"` | `"column"`

---

---
url: /api/recharts/type-aliases/LegendProps.md
---
[@sqlrooms/recharts](../index.md) / LegendProps

# Type Alias: LegendProps

> **LegendProps**: [`DefaultLegendContentProps`](DefaultLegendContentProps.md) & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `wrapperStyle`? | `CSSProperties` |
| `chartWidth`? | `number` |
| `chartHeight`? | `number` |
| `width`? | `number` |
| `height`? | `number` |
| `margin`? | { `top`: `number`; `left`: `number`; `bottom`: `number`; `right`: `number`; } |
| `payloadUniqBy`? | `UniqueOption`<`Payload`> |
| `onBBoxUpdate`? | (`box`) => `void` |

---

---
url: /api/recharts/type-aliases/LegendType.md
---
[@sqlrooms/recharts](../index.md) / LegendType

# Type Alias: LegendType

> **LegendType**: `"plainline"` | `"line"` | `"square"` | `"rect"` | `"circle"` | `"cross"` | `"diamond"` | `"star"` | `"triangle"` | `"wye"` | `"none"`

---

---
url: /api/recharts/type-aliases/LineProps.md
---
[@sqlrooms/recharts](../index.md) / LineProps

# Type Alias: LineProps

> **LineProps**: `Omit`<[`CurveProps`](CurveProps.md), `"points"` | `"pathRef"`> & `LineProps`

---

---
url: /api/monaco-editor/type-aliases/LoaderConfig.md
---
[@sqlrooms/monaco-editor](../index.md) / LoaderConfig

# Type Alias: LoaderConfig

> **LoaderConfig**: `Parameters`<*typeof* `loader.config`>\[`0`]

---

---
url: /api/room-config/type-aliases/LoadFile.md
---
[@sqlrooms/room-config](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile**: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"`

Enum representing supported file loading methods

---

---
url: /api/room-shell/type-aliases/LoadFile.md
---
[@sqlrooms/room-shell](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile**: `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"` | `"st_read"`

Enum representing supported file loading methods

---

---
url: /api/room-store/type-aliases/LoadFile.md
---
[@sqlrooms/room-store](../index.md) / LoadFile

# Type Alias: LoadFile

> **LoadFile**: `"st_read"` | `"read_json"` | `"read_ndjson"` | `"read_parquet"` | `"read_csv"` | `"auto"`

Enum representing supported file loading methods

---

---
url: /api/duckdb/type-aliases/LoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-config/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions**: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-shell/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-store/type-aliases/LoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / LoadFileOptions

# Type Alias: LoadFileOptions

> **LoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/layout-config/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/layout/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-config/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-shell/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/room-store/type-aliases/MosaicLayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutConfig

# Type Alias: MosaicLayoutConfig

> **MosaicLayoutConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"mosaic"` |
|  `nodes` | `null` | `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md) |
|  `pinned`? | `string`\[] |
|  `fixed`? | `string`\[] |

---

---
url: /api/layout-config/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection**: `"row"` | `"column"`

---

---
url: /api/layout/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection**: `"row"` | `"column"`

---

---
url: /api/room-config/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection**: `"row"` | `"column"`

---

---
url: /api/room-shell/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection**: `"row"` | `"column"`

---

---
url: /api/room-store/type-aliases/MosaicLayoutDirection.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutDirection

# Type Alias: MosaicLayoutDirection

> **MosaicLayoutDirection**: `"row"` | `"column"`

---

---
url: /api/layout-config/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode**: `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/layout/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode**: `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-config/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode**: `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-shell/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode**: `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/room-store/type-aliases/MosaicLayoutNode.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNode

# Type Alias: MosaicLayoutNode

> **MosaicLayoutNode**: `string` | [`MosaicLayoutParent`](MosaicLayoutParent.md)

---

---
url: /api/layout-config/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey**: `string`

---

---
url: /api/layout/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey**: `string`

---

---
url: /api/room-config/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey**: `string`

---

---
url: /api/room-shell/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey**: `string`

---

---
url: /api/room-store/type-aliases/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNodeKey

# Type Alias: MosaicLayoutNodeKey

> **MosaicLayoutNodeKey**: `string`

---

---
url: /api/layout-config/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent**: `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/layout/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent**: `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-config/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent**: `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-shell/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent**: `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/room-store/type-aliases/MosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutParent

# Type Alias: MosaicLayoutParent

> **MosaicLayoutParent**: `z.infer`<*typeof* `BaseMosaicLayoutParent`> & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `first` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |
| `second` | [`MosaicLayoutNode`](MosaicLayoutNode.md) |

---

---
url: /api/duckdb/type-aliases/NodeObject.md
---
[@sqlrooms/duckdb](../index.md) / NodeObject

# Type Alias: NodeObject

> **NodeObject**: [`ColumnNodeObject`](ColumnNodeObject.md) | [`TableNodeObject`](TableNodeObject.md) | [`SchemaNodeObject`](SchemaNodeObject.md) | [`DatabaseNodeObject`](DatabaseNodeObject.md)

---

---
url: /api/recharts/type-aliases/PieLabel.md
---
[@sqlrooms/recharts](../index.md) / PieLabel

# Type Alias: PieLabel\<P>

> **PieLabel**<`P`>: `ReactElement`<`SVGElement`> | (`props`) => `ReactNode` | `ReactElement`<`SVGElement`> | `SVGProps`<`SVGTextElement`> & `object` | `boolean`

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `P` | `any` |

---

---
url: /api/recharts/type-aliases/PieProps.md
---
[@sqlrooms/recharts](../index.md) / PieProps

# Type Alias: PieProps

> **PieProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `PieProps`

---

---
url: /api/recharts/type-aliases/PolarAngleAxisProps.md
---
[@sqlrooms/recharts](../index.md) / PolarAngleAxisProps

# Type Alias: PolarAngleAxisProps

> **PolarAngleAxisProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGTextElement`> & `PolarAngleAxisProps`

---

---
url: /api/recharts/type-aliases/PolarGridProps.md
---
[@sqlrooms/recharts](../index.md) / PolarGridProps

# Type Alias: PolarGridProps

> **PolarGridProps**: `SVGProps`<`SVGPathElement`> & `PolarGridProps`

---

---
url: /api/recharts/type-aliases/PolarRadiusAxisProps.md
---
[@sqlrooms/recharts](../index.md) / PolarRadiusAxisProps

# Type Alias: PolarRadiusAxisProps

> **PolarRadiusAxisProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `PolarRadiusAxisProps`

---

---
url: /api/recharts/type-aliases/PolygonProps.md
---
[@sqlrooms/recharts](../index.md) / PolygonProps

# Type Alias: PolygonProps

> **PolygonProps**: `Omit`<`SVGProps`<`SVGPolygonElement`>, `"points"`> & `PolygonProps`

---

---
url: /api/utils/type-aliases/ProgressInfo.md
---
[@sqlrooms/utils](../index.md) / ProgressInfo

# Type Alias: ProgressInfo

> **ProgressInfo**: `object`

Represents progress information for file operations

## Type declaration

| Name | Type |
| ------ | ------ |
|  `loaded` | `number` |
|  `total` | `number` |
|  `ratio` | `number` |

---

---
url: /api/sql-editor/type-aliases/Props.md
---
[@sqlrooms/sql-editor](../index.md) / Props

# Type Alias: Props

> **Props**: `object`

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `schema`? | [`TableStructurePanelProps`](../interfaces/TableStructurePanelProps.md)\[`"schema"`] | The database schema to use. Defaults to '*'. If '*' is provided, all tables will be shown. If a function is provided, it will be used to filter the tables. |
|  `isOpen` | `boolean` | Whether the SQL editor is currently visible |
|  `documentationPanel`? | `React.ReactNode` | Optional component to render SQL documentation in the side panel |
|  `queryResultProps`? | `Pick`<`React.ComponentProps`<*typeof* [`QueryResultPanel`](../functions/QueryResultPanel.md)>, `"onRowClick"` | `"onRowDoubleClick"`> | Props forwarded to `QueryResultPanel` to configure result behavior. This provides a single entry point for table interactions. |
|  `onClose` | () => `void` | Callback fired when the SQL editor should be closed |

---

---
url: /api/duckdb/type-aliases/QualifiedTableName.md
---
[@sqlrooms/duckdb](../index.md) / QualifiedTableName

# Type Alias: QualifiedTableName

> **QualifiedTableName**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `database`? | `string` |
|  `schema`? | `string` |
|  `table` | `string` |
|  `toString` | () => `string` |

---

---
url: /api/duckdb/type-aliases/QueryHandle.md
---
[@sqlrooms/duckdb](../index.md) / QueryHandle

# Type Alias: QueryHandle\<T>

> **QueryHandle**<`T`>: `PromiseLike`<`T`> & `object`

Handle for managing query execution and cancellation.

It is **Promise-like**, so you can either:

• `await handle` – the most ergonomic form, or
• `await handle.result` – kept for backwards-compatibility.

Additional capabilities:
• Standard Promise API: `.then()`, `.catch()`, `.finally()`
• `handle.cancel()` – cancel the running query.
• `handle.signal` – `AbortSignal` that fires when the query is cancelled.

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `result` | `Promise`<`T`> | Promise that resolves with query results |
| `cancel` | () => `Promise`<`void`> | Method to cancel the query with optional cleanup. This provides a clean abstraction over the underlying cancellation mechanism. |
| `signal` | `AbortSignal` | Read-only access to the abort signal for composability. Key benefits: - **Event-driven**: Listen for abort events to update UI or perform cleanup - **Integration**: Use with other Web APIs like fetch() that accept AbortSignal - **Status checking**: Check if query is already cancelled with signal.aborted **Example** `// Listen for cancellation events handle.signal.addEventListener('abort', () => { console.log('Query cancelled'); updateUI('Operation cancelled'); }); // Check cancellation status if (handle.signal.aborted) { console.log('Query was already cancelled'); } // Use with other APIs const response = await fetch('/api/data', { signal: handle.signal });` |
| `catch` | `Promise`<`T`>\[`"catch"`] | Attach a callback for only the rejection of the Promise |
| `finally` | `Promise`<`T`>\[`"finally"`] | Attach a callback that's invoked when the Promise is settled (fulfilled or rejected) |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | `any` |

## Example

```typescript
// Simple usage
const handle = connector.query('SELECT * FROM table');
const table = await handle; // no .result needed

// With cancellation
const controller = new AbortController();
const handle = connector.query('SELECT * FROM large_table', { signal: controller.signal });
setTimeout(() => controller.abort(), 5000);

// Manual cancel via the handle
const h = connector.query('SELECT * FROM table');
await someCondition;
await h.cancel();

// Composable cancellation (multiple queries, one controller)
const controller = new AbortController();
const h1 = connector.query('SELECT * FROM table1', { signal: controller.signal });
const h2 = connector.query('SELECT * FROM table2', { signal: controller.signal });
// Later...
controller.abort(); // Cancels h1 and h2 together

// Using Promise utilities
const [t1, t2] = await Promise.all([
  connector.query('select 1'),
  connector.query('select 2')
]);
```

---

---
url: /api/sql-editor/type-aliases/QueryResult.md
---
[@sqlrooms/sql-editor](../index.md) / QueryResult

# Type Alias: QueryResult

> **QueryResult**: { `status`: `"loading"`; `isBeingAborted`: `boolean`; `controller`: `AbortController`; } | { `status`: `"aborted"`; } | { `status`: `"error"`; `error`: `string`; } | { `status`: `"success"`; `type`: `"pragma"` | `"explain"` | `"select"`; `result`: `arrow.Table` | `undefined`; `lastQueryStatement`: `string`; } | { `status`: `"success"`; `type`: `"exec"`; `lastQueryStatement`: `string`; }

---

---
url: /api/ai/type-aliases/QueryToolParameters.md
---
[@sqlrooms/ai](../index.md) / QueryToolParameters

# Type Alias: QueryToolParameters

> **QueryToolParameters**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"query"` |
|  `sqlQuery` | `string` |
|  `reasoning` | `string` |

---

---
url: /api/recharts/type-aliases/RadarProps.md
---
[@sqlrooms/recharts](../index.md) / RadarProps

# Type Alias: RadarProps

> **RadarProps**: `Omit`<`SVGProps`<`SVGElement`>, `"onMouseEnter"` | `"onMouseLeave"` | `"points"`> & `RadarProps`

---

---
url: /api/recharts/type-aliases/RadialBarProps.md
---
[@sqlrooms/recharts](../index.md) / RadialBarProps

# Type Alias: RadialBarProps

> **RadialBarProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `InternalRadialBarProps`

---

---
url: /api/recharts/type-aliases/RectangleProps.md
---
[@sqlrooms/recharts](../index.md) / RectangleProps

# Type Alias: RectangleProps

> **RectangleProps**: `Omit`<`SVGProps`<`SVGPathElement`>, `"radius"`> & `RectangleProps`

---

---
url: /api/recharts/type-aliases/ReferenceAreaProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceAreaProps

# Type Alias: ReferenceAreaProps

> **ReferenceAreaProps**: [`RectangleProps`](RectangleProps.md) & `ReferenceAreaProps`

---

---
url: /api/recharts/type-aliases/ReferenceDotProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceDotProps

# Type Alias: ReferenceDotProps

> **ReferenceDotProps**: [`DotProps`](DotProps.md) & `ReferenceDotProps`

---

---
url: /api/recharts/type-aliases/ReferenceLineProps.md
---
[@sqlrooms/recharts](../index.md) / ReferenceLineProps

# Type Alias: ReferenceLineProps

> **ReferenceLineProps**: `Omit`<`SVGProps`<`SVGLineElement`>, `"viewBox"`> & `ReferenceLineProps`

This excludes `viewBox` prop from svg for two reasons:

1. The components wants viewBox of object type, and svg wants string
   * so there's a conflict, and the component will throw if it gets string
2. Internally the component calls `filterProps` which filters the viewBox away anyway

---

---
url: /api/room-shell/type-aliases/RoomFileInfo.md
---
[@sqlrooms/room-shell](../index.md) / RoomFileInfo

# Type Alias: RoomFileInfo

> **RoomFileInfo**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `pathname` | `string` |
|  `duckdbFileName`? | `string` |
|  `file`? | `File` |
|  `size`? | `number` |
|  `numRows`? | `number` |

---

---
url: /api/room-shell/type-aliases/RoomFileState.md
---
[@sqlrooms/room-shell](../index.md) / RoomFileState

# Type Alias: RoomFileState

> **RoomFileState**: { `status`: `"download"` | `"upload"` | `"done"`; `progress`: `ProgressInfo`; } | { `status`: `"error"`; `message`: `string`; }

---

---
url: /api/layout/type-aliases/RoomPanelInfo.md
---
[@sqlrooms/layout](../index.md) / RoomPanelInfo

# Type Alias: RoomPanelInfo

> **RoomPanelInfo**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `title`? | `string` |
|  `icon`? | `React.ComponentType`<{ `className`: `string`; }> |
|  `component` | `React.ComponentType` |
|  `placement` | `"sidebar"` | `"sidebar-bottom"` | `"main"` | `"top-bar"` |

---

---
url: /api/room-shell/type-aliases/RoomPanelInfo.md
---
[@sqlrooms/room-shell](../index.md) / RoomPanelInfo

# Type Alias: RoomPanelInfo

> **RoomPanelInfo**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `title`? | `string` |
|  `icon`? | `React.ComponentType`<{ `className`: `string`; }> |
|  `component` | `React.ComponentType` |
|  `placement` | `"sidebar"` | `"sidebar-bottom"` | `"main"` | `"top-bar"` |

---

---
url: /api/room-shell/type-aliases/RoomShellSliceState.md
---
[@sqlrooms/room-shell](../index.md) / RoomShellSliceState

# Type Alias: RoomShellSliceState\<PC>

> **RoomShellSliceState**<`PC`>: [`RoomState`](RoomState.md)<`PC`> & `object` & `DuckDbSliceState` & `LayoutSliceState`

## Type declaration

| Name | Type |
| ------ | ------ |
| `initialize`? | () => `Promise`<`void`> |
| `config` | `PC` |
| `room` | `RoomShellSliceStateProps`<`PC`> & `RoomShellSliceStateActions`<`PC`> |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `PC` *extends* [`BaseRoomConfig`](BaseRoomConfig.md) | [`BaseRoomConfig`](BaseRoomConfig.md) |

---

---
url: /api/room-shell/type-aliases/RoomState.md
---
[@sqlrooms/room-shell](../index.md) / RoomState

# Type Alias: RoomState\<PC>

> **RoomState**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `config` | `PC` |
|  `room` | [`RoomStateProps`](RoomStateProps.md)<`PC`> & [`RoomStateActions`](RoomStateActions.md)<`PC`> |

---

---
url: /api/room-store/type-aliases/RoomState.md
---
[@sqlrooms/room-store](../index.md) / RoomState

# Type Alias: RoomState\<PC>

> **RoomState**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `config` | `PC` |
|  `room` | [`RoomStateProps`](RoomStateProps.md)<`PC`> & [`RoomStateActions`](RoomStateActions.md)<`PC`> |

---

---
url: /api/room-shell/type-aliases/RoomStateActions.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateActions

# Type Alias: RoomStateActions\<PC>

> **RoomStateActions**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `initialize` | () => `Promise`<`void`> | - |
|  `setRoomConfig` | (`config`) => `void` | Set the room config. |
|  `setLastSavedConfig` | (`config`) => `void` | Set the last saved room config. This can be used to check if the room has unsaved changes. |
|  `hasUnsavedChanges()` |  | - |
|  `onSaveConfig`? | (`config`) => `Promise`<`void`> | `undefined` | Called when the project config gets changed. Can be used for saving. To be overridden by the custom project state. |
|  `setTaskProgress` | (`id`, `taskProgress`) => `void` | - |
|  `getLoadingProgress` | () => [`TaskProgress`](TaskProgress.md) | `undefined` | - |

---

---
url: /api/room-store/type-aliases/RoomStateActions.md
---
[@sqlrooms/room-store](../index.md) / RoomStateActions

# Type Alias: RoomStateActions\<PC>

> **RoomStateActions**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `initialize` | () => `Promise`<`void`> | - |
|  `setRoomConfig` | (`config`) => `void` | Set the room config. |
|  `setLastSavedConfig` | (`config`) => `void` | Set the last saved room config. This can be used to check if the room has unsaved changes. |
|  `hasUnsavedChanges()` |  | - |
|  `onSaveConfig`? | (`config`) => `Promise`<`void`> | `undefined` | Called when the project config gets changed. Can be used for saving. To be overridden by the custom project state. |
|  `setTaskProgress` | (`id`, `taskProgress`) => `void` | - |
|  `getLoadingProgress` | () => [`TaskProgress`](TaskProgress.md) | `undefined` | - |

---

---
url: /api/room-shell/type-aliases/RoomStateProps.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateProps

# Type Alias: RoomStateProps\<PC>

> **RoomStateProps**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `initialized` | `boolean` |
|  `lastSavedConfig` | `PC` | `undefined` |
|  `tasksProgress` | `Record`<`string`, [`TaskProgress`](TaskProgress.md)> |
|  `captureException` | (`exception`, `captureContext`?) => `void` |

---

---
url: /api/room-store/type-aliases/RoomStateProps.md
---
[@sqlrooms/room-store](../index.md) / RoomStateProps

# Type Alias: RoomStateProps\<PC>

> **RoomStateProps**<`PC`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `initialized` | `boolean` |
|  `lastSavedConfig` | `PC` | `undefined` |
|  `tasksProgress` | `Record`<`string`, [`TaskProgress`](TaskProgress.md)> |
|  `captureException` | (`exception`, `captureContext`?) => `void` |

---

---
url: /api/room-shell/type-aliases/RoomStateProviderProps.md
---
[@sqlrooms/room-shell](../index.md) / RoomStateProviderProps

# Type Alias: RoomStateProviderProps\<PC>

> **RoomStateProviderProps**<`PC`>: `React.PropsWithChildren`<{ `roomStore`: [`RoomStore`](RoomStore.md)<`PC`>; }>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

---

---
url: /api/room-store/type-aliases/RoomStateProviderProps.md
---
[@sqlrooms/room-store](../index.md) / RoomStateProviderProps

# Type Alias: RoomStateProviderProps\<PC>

> **RoomStateProviderProps**<`PC`>: `React.PropsWithChildren`<{ `roomStore`: [`RoomStore`](RoomStore.md)<`PC`>; }>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

---

---
url: /api/cosmos/type-aliases/RoomStateWithCosmos.md
---
[@sqlrooms/cosmos](../index.md) / RoomStateWithCosmos

# Type Alias: RoomStateWithCosmos

> **RoomStateWithCosmos**: `RoomShellSliceState`<`BaseRoomConfig` & [`CosmosSliceConfig`](CosmosSliceConfig.md)> & [`CosmosSliceState`](CosmosSliceState.md)

Combined type representing the full room state including Cosmos functionality.
Merges the base room state with Cosmos-specific state and configuration.

---

---
url: /api/discuss/type-aliases/RoomStateWithDiscussion.md
---
[@sqlrooms/discuss](../index.md) / RoomStateWithDiscussion

# Type Alias: RoomStateWithDiscussion

> **RoomStateWithDiscussion**: `RoomShellSliceState`<`BaseRoomConfig`> & [`DiscussSliceState`](DiscussSliceState.md)

---

---
url: /api/room-shell/type-aliases/RoomStore.md
---
[@sqlrooms/room-shell](../index.md) / RoomStore

# Type Alias: RoomStore\<PC>

> **RoomStore**<`PC`>: [`StoreApi`](../interfaces/StoreApi.md)<[`RoomState`](RoomState.md)<`PC`>>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

---

---
url: /api/room-store/type-aliases/RoomStore.md
---
[@sqlrooms/room-store](../index.md) / RoomStore

# Type Alias: RoomStore\<PC>

> **RoomStore**<`PC`>: [`StoreApi`](../interfaces/StoreApi.md)<[`RoomState`](RoomState.md)<`PC`>>

## Type Parameters

| Type Parameter |
| ------ |
| `PC` |

---

---
url: /api/s3-browser/type-aliases/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileOrDirectory

# Type Alias: S3FileOrDirectory

> **S3FileOrDirectory**: { `key`: `string`; `isDirectory`: `true`; } | { `key`: `string`; `isDirectory`: `false`; `lastModified`: `Date`; `size`: `number`; `contentType`: `string`; }

---

---
url: /api/recharts/type-aliases/ScatterProps.md
---
[@sqlrooms/recharts](../index.md) / ScatterProps

# Type Alias: ScatterProps

> **ScatterProps**: `PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`> & `ScatterProps`

---

---
url: /api/duckdb/type-aliases/SchemaAndDatabase.md
---
[@sqlrooms/duckdb](../index.md) / SchemaAndDatabase

# Type Alias: SchemaAndDatabase

> **SchemaAndDatabase**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `schema`? | `string` |
|  `database`? | `string` |

---

---
url: /api/duckdb/type-aliases/SchemaNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / SchemaNodeObject

# Type Alias: SchemaNodeObject

> **SchemaNodeObject**: `BaseNodeObject` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `type` | `"schema"` |

---

---
url: /api/recharts/type-aliases/SectorProps.md
---
[@sqlrooms/recharts](../index.md) / SectorProps

# Type Alias: SectorProps

> **SectorProps**: `SVGProps`<`SVGPathElement`> & `SectorProps`

---

---
url: /api/ai-core/type-aliases/SessionType.md
---
[@sqlrooms/ai-core](../index.md) / SessionType

# Type Alias: SessionType

> **SessionType**: `object`

Represents a session in the AI system.

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `id` | `string` | Unique identifier for the session |
|  `name` | `string` | Display name of the session |
|  `modelProvider`? | `string` | Provider of the AI model (e.g., "openai") |
|  `model`? | `string` | Name of the AI model being used (e.g., "gpt-4o-mini") |

## Example

```typescript
const session: SessionType = {
  id: "session_123",
  name: "My Analysis Session",
  modelProvider: "openai",
  model: "gpt-4o-mini"
};
```

---

---
url: /api/ai/type-aliases/SessionType.md
---
[@sqlrooms/ai](../index.md) / SessionType

# Type Alias: SessionType

> **SessionType**: `object`

Represents a session in the AI system.

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `id` | `string` | Unique identifier for the session |
|  `name` | `string` | Display name of the session |
|  `modelProvider`? | `string` | Provider of the AI model (e.g., "openai") |
|  `model`? | `string` | Name of the AI model being used (e.g., "gpt-4o-mini") |

## Example

```typescript
const session: SessionType = {
  id: "session_123",
  name: "My Analysis Session",
  modelProvider: "openai",
  model: "gpt-4o-mini"
};
```

---

---
url: /api/duckdb/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions**: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions**: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-shell/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions**: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-store/type-aliases/SpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadFileOptions

# Type Alias: SpatialLoadFileOptions

> **SpatialLoadFileOptions**: `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-shell/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-store/type-aliases/SpatialLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadOptions

# Type Alias: SpatialLoadOptions

> **SpatialLoadOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/mosaic/type-aliases/Spec.md
---
[@sqlrooms/mosaic](../index.md) / Spec

# Type Alias: Spec

> **Spec**: `Spec`

A Mosaic declarative specification.

---

---
url: /api/sql-editor/type-aliases/SqlEditorHeaderProps.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorHeaderProps

# Type Alias: SqlEditorHeaderProps

> **SqlEditorHeaderProps**: `PropsWithChildren`<{ `className`: `string`; `title`: `string`; `showDocs`: `boolean`; `documentationPanel`: `React.ReactNode`; `onToggleDocs`: (`show`) => `void`; }>

---

---
url: /api/sql-editor-config/type-aliases/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / SqlEditorSliceConfig

# Type Alias: SqlEditorSliceConfig

> **SqlEditorSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sqlEditor` | { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery`: `string`; } |

---

---
url: /api/sql-editor/type-aliases/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceConfig

# Type Alias: SqlEditorSliceConfig

> **SqlEditorSliceConfig**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sqlEditor` | { `queries`: `object`\[]; `selectedQueryId`: `string`; `lastExecutedQuery`: `string`; } |

---

---
url: /api/sql-editor/type-aliases/SqlEditorSliceState.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceState

# Type Alias: SqlEditorSliceState

> **SqlEditorSliceState**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sqlEditor` | { `queryResult`: [`QueryResult`](QueryResult.md); `selectedTable`: `string`; `isTablesLoading`: `boolean`; `tablesError`: `string`; `queryResultLimit`: `number`; `queryResultLimitOptions`: `number`\[]; `parseAndRunQuery`: `Promise`<`void`>; `parseAndRunCurrentQuery`: `Promise`<`void`>; `abortCurrentQuery`: `void`; `exportResultsToCsv`: `void`; `createQueryTab`: { `id`: `string`; `name`: `string`; `query`: `string`; }; `deleteQueryTab`: `void`; `renameQueryTab`: `void`; `updateQueryText`: `void`; `setSelectedQueryId`: `void`; `getCurrentQuery`: `string`; `selectTable`: `void`; `clearQueryResults`: `void`; `setQueryResultLimit`: `void`; } |

---

---
url: /api/room-config/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-config](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource**: `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"sql"` | - |
|  `sqlQuery` | `string` | SQL query to execute for data retrieval |

---

---
url: /api/room-shell/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-shell](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource**: `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"sql"` |
|  `tableName` | `string` |
|  `sqlQuery` | `string` |

---

---
url: /api/room-store/type-aliases/SqlQueryDataSource.md
---
[@sqlrooms/room-store](../index.md) / SqlQueryDataSource

# Type Alias: SqlQueryDataSource

> **SqlQueryDataSource**: `object`

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"sql"` |
|  `tableName` | `string` |
|  `sqlQuery` | `string` |

---

---
url: /api/room-config/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-shell/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-store/type-aliases/StandardLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadFileOptions

# Type Alias: StandardLoadFileOptions

> **StandardLoadFileOptions**: `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-config/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions**: `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-shell/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions**: `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-store/type-aliases/StandardLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadOptions

# Type Alias: StandardLoadOptions

> **StandardLoadOptions**: `objectOutputType`<{ `schema`: `ZodOptional`<`ZodString`>; `select`: `ZodOptional`<`ZodArray`<`ZodString`, `"many"`>>; `where`: `ZodOptional`<`ZodString`>; `view`: `ZodOptional`<`ZodBoolean`>; `temp`: `ZodOptional`<`ZodBoolean`>; `replace`: `ZodOptional`<`ZodBoolean`>; }, `ZodUnknown`, `"strip"`>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-shell/type-aliases/StateCreator.md
---
[@sqlrooms/room-shell](../index.md) / StateCreator

# Type Alias: StateCreator\<T, Mis, Mos, U>

> **StateCreator**<`T`, `Mis`, `Mos`, `U`>: (`setState`, `getState`, `store`) => `U` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `$$storeMutators`? | `Mos` |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | - |
| `Mis` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `Mos` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `U` | `T` |

---

---
url: /api/room-store/type-aliases/StateCreator.md
---
[@sqlrooms/room-store](../index.md) / StateCreator

# Type Alias: StateCreator\<T, Mis, Mos, U>

> **StateCreator**<`T`, `Mis`, `Mos`, `U`>: (`setState`, `getState`, `store`) => `U` & `object`

## Type declaration

| Name | Type |
| ------ | ------ |
| `$$storeMutators`? | `Mos` |

## Type Parameters

| Type Parameter | Default type |
| ------ | ------ |
| `T` | - |
| `Mis` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `Mos` *extends* \[`StoreMutatorIdentifier`, `unknown`]\[] | \[] |
| `U` | `T` |

---

---
url: /api/recharts/type-aliases/SurfaceProps.md
---
[@sqlrooms/recharts](../index.md) / SurfaceProps

# Type Alias: SurfaceProps

> **SurfaceProps**: `Omit`<`SVGProps`<`SVGSVGElement`>, `"viewBox"`> & `SurfaceProps`

---

---
url: /api/recharts/type-aliases/SymbolsProps.md
---
[@sqlrooms/recharts](../index.md) / SymbolsProps

# Type Alias: SymbolsProps

> **SymbolsProps**: `SVGProps`<`SVGPathElement`> & `InnerSymbolsProp`

---

---
url: /api/duckdb/type-aliases/TableColumn.md
---
[@sqlrooms/duckdb](../index.md) / TableColumn

# Type Alias: TableColumn

> **TableColumn**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `name` | `string` |
|  `type` | `string` |

---

---
url: /api/duckdb/type-aliases/TableNodeObject.md
---
[@sqlrooms/duckdb](../index.md) / TableNodeObject

# Type Alias: TableNodeObject

> **TableNodeObject**: `BaseNodeObject` & `object` & [`DataTable`](DataTable.md)

## Type declaration

| Name | Type |
| ------ | ------ |
| `type` | `"table"` |

---

---
url: /api/room-shell/type-aliases/TaskProgress.md
---
[@sqlrooms/room-shell](../index.md) / TaskProgress

# Type Alias: TaskProgress

> **TaskProgress**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `progress`? | `number` |
|  `message` | `string` |

---

---
url: /api/room-store/type-aliases/TaskProgress.md
---
[@sqlrooms/room-store](../index.md) / TaskProgress

# Type Alias: TaskProgress

> **TaskProgress**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `progress`? | `number` |
|  `message` | `string` |

---

---
url: /api/recharts/type-aliases/TextProps.md
---
[@sqlrooms/recharts](../index.md) / TextProps

# Type Alias: TextProps

> **TextProps**: `Omit`<`SVGProps`<`SVGTextElement`>, `"textAnchor"` | `"verticalAnchor"`> & `TextProps`

---

---
url: /api/ui/type-aliases/ToastActionElement.md
---
[@sqlrooms/ui](../index.md) / ToastActionElement

# Type Alias: ToastActionElement

> **ToastActionElement**: `React.ReactElement`<*typeof* [`ToastAction`](../functions/ToastAction.md)>

---

---
url: /api/ui/type-aliases/ToastProps.md
---
[@sqlrooms/ui](../index.md) / ToastProps

# Type Alias: ToastProps

> **ToastProps**: `React.ComponentPropsWithoutRef`<*typeof* [`Toast`](../functions/Toast.md)>

---

---
url: /api/recharts/type-aliases/TooltipProps.md
---
[@sqlrooms/recharts](../index.md) / TooltipProps

# Type Alias: TooltipProps\<TValue, TName>

> **TooltipProps**<`TValue`, `TName`>: [`DefaultTooltipContentProps`](../interfaces/DefaultTooltipContentProps.md)<`TValue`, `TName`> & `object`

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
| `accessibilityLayer`? | `boolean` | - |
| `active`? | `boolean` | If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls. |
| `includeHidden`? | `boolean` | If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter. |
| `allowEscapeViewBox`? | `AllowInDimension` | - |
| `animationDuration`? | `AnimationDuration` | - |
| `animationEasing`? | `AnimationTiming` | - |
| `content`? | `ContentType`<`TValue`, `TName`> | - |
| `coordinate`? | `Partial`<`Coordinate`> | - |
| `cursor`? | `boolean` | `ReactElement` | `SVGProps`<`SVGElement`> | - |
| `filterNull`? | `boolean` | - |
| `defaultIndex`? | `number` | - |
| `isAnimationActive`? | `boolean` | - |
| `offset`? | `number` | - |
| `payloadUniqBy`? | `UniqueOption`<`Payload`<`TValue`, `TName`>> | - |
| `position`? | `Partial`<`Coordinate`> | - |
| `reverseDirection`? | `AllowInDimension` | - |
| `shared`? | `boolean` | - |
| `trigger`? | `"hover"` | `"click"` | - |
| `useTranslate3d`? | `boolean` | - |
| `viewBox`? | `CartesianViewBox` | - |
| `wrapperStyle`? | `CSSProperties` | - |

## Type Parameters

| Type Parameter |
| ------ |
| `TValue` *extends* `ValueType` |
| `TName` *extends* `NameType` |

---

---
url: /api/recharts/type-aliases/TrapezoidProps.md
---
[@sqlrooms/recharts](../index.md) / TrapezoidProps

# Type Alias: TrapezoidProps

> **TrapezoidProps**: `SVGProps`<`SVGPathElement`> & `TrapezoidProps`

---

---
url: /api/ui/type-aliases/TreeNodeData.md
---
[@sqlrooms/ui](../index.md) / TreeNodeData

# Type Alias: TreeNodeData\<T>

> **TreeNodeData**<`T`>: `object`

## Type Parameters

| Type Parameter |
| ------ |
| `T` |

## Type declaration

| Name | Type |
| ------ | ------ |
|  `key` | `string` |
|  `object` | `T` |
|  `children`? | [`TreeNodeData`](TreeNodeData.md)<`T`>\[] |
|  `isInitialOpen`? | `boolean` |

---

---
url: /api/room-config/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-config](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource**: `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type declaration

| Name | Type | Description |
| ------ | ------ | ------ |
|  `tableName` | `string` | Unique table name used to store the data loaded from the data source. This name will be used to reference the data in SQL queries. |
|  `type` | `"url"` | - |
|  `url` | `string` | URL from which to fetch the data |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> | Optional configuration for file loading |
|  `httpMethod`? | `string` | Optional HTTP method to use for the request |
|  `headers`? | `Record`<`string`, `string`> | Optional headers to include in the request |

---

---
url: /api/room-shell/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-shell](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource**: `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"url"` |
|  `url` | `string` |
|  `tableName` | `string` |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> |
|  `httpMethod`? | `string` |
|  `headers`? | `Record`<`string`, `string`> |

---

---
url: /api/room-store/type-aliases/UrlDataSource.md
---
[@sqlrooms/room-store](../index.md) / UrlDataSource

# Type Alias: UrlDataSource

> **UrlDataSource**: `object`

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

## Type declaration

| Name | Type |
| ------ | ------ |
|  `type` | `"url"` |
|  `url` | `string` |
|  `tableName` | `string` |
|  `loadOptions`? | `objectOutputType`<`object` & `object` & `object`, `ZodUnknown`, `"strip"`> | `objectOutputType`<`object` & `object`, `ZodUnknown`, `"strip"`> |
|  `httpMethod`? | `string` |
|  `headers`? | `Record`<`string`, `string`> |

---

---
url: /api/vega/type-aliases/VegaChartToolParameters.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolParameters

# Type Alias: VegaChartToolParameters

> **VegaChartToolParameters**: `object`

Zod schema for the VegaChart tool parameters

## Type declaration

| Name | Type |
| ------ | ------ |
|  `sqlQuery` | `string` |
|  `vegaLiteSpec` | `string` |
|  `reasoning` | `string` |

---

---
url: /api/vega/type-aliases/VisualizationSpec.md
---
[@sqlrooms/vega](../index.md) / VisualizationSpec

# Type Alias: VisualizationSpec

> **VisualizationSpec**: `VlSpec` | `VgSpec`

---

---
url: /api/recharts/type-aliases/XAxisProps.md
---
[@sqlrooms/recharts](../index.md) / XAxisProps

# Type Alias: XAxisProps

> **XAxisProps**: `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"scale"` | `"ref"`> & `XAxisProps`

---

---
url: /api/recharts/type-aliases/YAxisProps.md
---
[@sqlrooms/recharts](../index.md) / YAxisProps

# Type Alias: YAxisProps

> **YAxisProps**: `Omit`<`PresentationAttributesAdaptChildEvent`<`any`, `SVGElement`>, `"scale"` | `"ref"`> & `YAxisProps`

---

---
url: /packages.md
---

## Package Structure

Below is a full breakdown of all **Core**, **Feature**, and **Utility** packages available in SQLRooms.\
Each package can be installed independently via `pnpm add @sqlrooms/<name>` and mixed‑and‑matched to suit your app's needs.

### Core Packages

* **[@sqlrooms/room-shell](/api/room-shell/)** — Central application shell and Zustand‑based state manager with panel system and DuckDB integration.
* **[@sqlrooms/room-store](/api/core/)** — Core state management utilities, RoomStore, and React context providers.
* **[@sqlrooms/duckdb](/api/duckdb/)** — WebAssembly build of DuckDB plus helper hooks for query execution and data import.
* **[@sqlrooms/ui](/api/ui/)** — Tailwind‑powered component library and theme manager used across all other packages.
* **[@sqlrooms/ai](/api/ai/)** — Natural‑language querying and AI‑assisted analytics tools.
* **[@sqlrooms/layout](/api/layout/)** — Panel layout management built on react‑mosaic.

### Feature Packages

* **[@sqlrooms/cosmos](/api/cosmos/)** — High‑performance WebGL graph visualization with Cosmos.
* **[@sqlrooms/data-table](/api/data-table/)** — Interactive data grid for SQL results with sorting and pagination.
* **[@sqlrooms/discuss](/api/discuss/)** — Threaded discussion system with anchor links to data points.
* **[@sqlrooms/dropzone](/api/dropzone/)** — Drag‑and‑drop file uploads with type validation and progress tracking.
* **[@sqlrooms/monaco-editor](/api/monaco-editor/)** — VS Code's Monaco editor with SQL‑aware autocompletion.
* **[@sqlrooms/mosaic](/api/mosaic/)** — Declarative charting powered by UW IDL's Mosaic library.
* **[@sqlrooms/motherduck](/api/motherduck/)** — MotherDuck connector using the WASM client
* **[@sqlrooms/recharts](/api/recharts/)** — Responsive charts via Recharts (line, bar, pie, etc.).
* **[@sqlrooms/s3-browser](/api/s3-browser/)** — S3‑compatible storage browser with uploads and directory management.
* **[@sqlrooms/schema-tree](/api/schema-tree/)** — Interactive database‑schema explorer.
* **[@sqlrooms/sql-editor](/api/sql-editor/)** — SQL editor with history, syntax highlighting, and result docking.
* **[@sqlrooms/vega](/api/vega/)** — Vega‑Lite visualization components for sophisticated interactive charts.

### Utility Packages

* **[@sqlrooms/utils](/api/utils/)** — Shared helper functions for colors, formatting, random IDs, and string utilities.

## Extension Points

---

---
url: /upgrade-guide.md
---

# Upgrade Guide

This document provides detailed guidance for upgrading between different versions of SQLRooms packages. Each section outlines breaking changes, required code modifications, and implementation examples to ensure a smooth upgrade process.

When upgrading, please follow the version-specific instructions below that apply to your project. If you encounter any issues during the upgrade process, please refer to our [GitHub issues](https://github.com/sqlrooms/sqlrooms/issues) or contact support.

## 0.25.0-rc.1

* createAiSlice init parameters changed:
  * Instead of customTools and toolsOptions use tools + createDefaultAiTools(store, toolsOptions)
  * getInstructions must be provided, but can use createDefaultAiInstructions(store)

## 0.24.28-rc.1

* Discuss config separated from RoomConfig to make it easier to persist separately and to simplify typing (`state.discuss.config` instead of `state.config.discuss`)

```tsx
const discussConfig = useRoomStore((state) => state.discuss.config);
```

After:

```tsx
const discussConfig = useRoomStore((state) => state.config.discuss);
```

If you were persisting this state, you will likely need a migration.

You should also remove `.merge(DiscussSliceConfig)` when defining your `RoomConfig`

## 0.19.0

We are trying to make the package structure more logical, especially, for new users of the SQLRooms framework. Sorry for the more renaming.

* Package `@sqlrooms/core` (previously, `@sqlrooms/project`) renamed to `@sqlrooms/room-store`.

* The layout-related state and functions were moved to the new `LayoutSlice` added to `@sqlrooms/layout` which is namespaced as `layout`:
  * `panels`
  * `setLayout`
  * `togglePanel`
  * `tooglePanelPin`

Before:

```tsx
const togglePanel = useRoomStore((state) => state.room.togglePanel);
```

After:

```tsx
const togglePanel = useRoomStore((state) => state.layout.togglePanel);
```

## 0.18.0

`QueryHandle` returned from `.query()` is now implementing `PromiseLike` and can be awaited. So adding `.result`, which was introduced in [0.16.0](#_0-16-0), is not necessary anymore.

### Old

```tsx
const result = await connector.query('SELECT * FROM some_table').result;
```

### New

```tsx
const result = await connector.query('SELECT * FROM some_table');
```

## 0.17.0

This release focuses on standardizing terminology across the codebase and improving the developer experience for new users. We are replacing the concept of "project" with "room" to better align with the SQLRooms name. "Room" is an established concept in collaborative apps and fits well with the overall vision of the project.

### Package name changes

* `@sqlrooms/project` renamed to `@sqlrooms/core` (renamed again to `@sqlrooms/room-store` in [0.19.0](#_0-19-0), sorry)
* `@sqlrooms/project-config` renamed to `@sqlrooms/room-config`
* `@sqlrooms/project-builder` renamed to `@sqlrooms/room-shell`

### Component name changes

* `ProjectBuilder` is replaced by `RoomShell`
* `ProjectBuilderProvider` is removed (in favor of `RoomShell`)
* `ProjectBuilderState` renamed to `RoomShellSliceState`
* `createProjectBuilderStore` renamed to `createRoomStore`
* `createProjectBuilderSlice` renamed to `createRoomShellSlice`
* `ProjectBuilderPanel` renamed to `RoomPanel`
* `ProjectBuilderPanelHeader` renamed to `RoomPanelHeader`

#### Old way to set up a project

```tsx
<ProjectBuilderProvider projectStore={projectStore}>
  <div className="flex h-full w-full">
    <div className="bg-muted/50 flex h-full flex-col px-1 py-2">
      <ProjectBuilderSidebarButtons />
    </div>
    <div className="flex h-full w-full flex-col">
      <ProjectBuilder />
    </div>
  </div>
</ProjectBuilderProvider>
```

#### New

```tsx
<RoomShell className="h-screen" roomStore={roomStore}>
  <RoomShell.Sidebar />
  <RoomShell.LayoutComposer />
  <RoomShell.LoadingProgress />
</RoomShell>
```

### State name changes

* `state.project` namespace renamed to `state.room`

#### Old

```tsx
const dataSources = useProjectStore((state) => state.project.dataSources);
```

#### New

```tsx
const dataSources = useRoomStore((state) => state.room.dataSources);
```

## 0.16.3

### @sqlrooms/duckdb

The `BaseDuckDbConnector` and `WasmDuckDbConnector` are now provided as factory functions rather than classes. Use `createWasmDuckDbConnector()` or the generic `createDuckDbConnector({type: 'wasm'})` to obtain a connector instance.

#### Before

```typescript
import {WasmDuckDbConnector} from '@sqlrooms/duckdb';

const connector = new WasmDuckDbConnector();
```

#### After

```typescript
import {createWasmDuckDbConnector} from '@sqlrooms/duckdb';

const connector = createWasmDuckDbConnector();
```

## 0.16.0

### @sqlrooms/duckdb

The DuckDbConnector now supports query cancellation through a unified `QueryHandle` interface with full composability support. All query methods (`execute`, `query`, `queryJson`) now return a `QueryHandle` that provides immediate access to cancellation functionality and signal composability. [Read more…](https://sqlrooms.org/query-cancellation)

#### Old

```tsx
const result = await connector.query('SELECT * FROM some_table');
```

#### New

::: warning
Since [0.18.0](#_0-18-0) `QueryHandle` returned from `.query()` is implementing `PromiseLike` and can be awaited. So adding `.result` is not necessary anymore.
:::

```tsx
const result = await connector.query('SELECT * FROM some_table').result;
```

## 0.14.0

### @sqlrooms/ui

* `sqlroomsTailwindPreset` prefix parameter was removed

## 0.9.0

### @sqlrooms/project-builder

* `createProjectSlice` renamed into `createProjectBuilderSlice`

* `createProjectStore` renamed into `createProjectBuilderStore`

* `ProjectState` renamed into `ProjectBuilderState`

* `projectId` and `setProjectId` removed: add custom state if necessary

* `INITIAL_BASE_PROJECT_STATE` renamed into `INITIAL_PROJECT_BUILDER_STATE`

* A number of project store props and moved from `.project` to `.db`:

  * `.tables`
  * `.addTable`
  * `.getTable`
  * `.getTables`
  * `.getTableRowCount`
  * `.getTableSchema`
  * `.getTableSchemas`
  * `.checkTableExists`
  * `.dropTable`
  * `.createTableFromQuery`
  * `.setTableRowCount`
  * `.findTableByName`
  * `.refreshTableSchemas`

* `useBaseProjectStore` was renamed into `useBaseProjectBuilderStore`, but it's better to use `useProjectStore` returned by `createProjectBuilderStore` instead

* `processDroppedFile()` is removed: Use `ProjectStore.addProjectFile` directly.

* `ProjectStore.replaceProjectFile` is removed: Use `ProjectStore.addProjectFile` instead.

* `ProjectStore.addProjectFile` parameter changes: The function now takes a File or a pathname instead of the result of `processDroppedFile()`.

* `ProjectStore.addProjectFile` behavior changes: The function will no longer attempt to create unique table names, but will overwrite the created table.

* `ProjectStore.areViewsReadyToRender` and `onDataUpdated` were removed

* `ProjectStore.setTables` removed: use `state.db.refreshTableSchemas()` instead.

* `ProjectStore.isReadOnly` was removed: pass `isReadOnly` as a prop to respective components instead

### @sqlrooms/duckdb

* `useDuckDb()` now returns an instance of [`DuckDbConnector`](api/duckdb/interfaces/DuckDbConnector) to enable support for external DuckDB

* `getDuckDb` was removed: Use `useDuckDb()` instead

* `getDuckTableSchemas` was removed: use `const getTableSchemas = useProjectStore(state => state.db.getTableSchemas)`

* `exportToCsv` was removed: Use `useExportToCsv` instead

### @sqlrooms/mosaic

* `getMosaicConnector` removed: Use `useMosaic` instead

### @sqlrooms/ai

* `TOOLS` is not exported anymore: use `useProjectStore(state => state.ai.tools)` instead

## 0.8.0

### @sqlrooms/project-builder

* `project.config` moved to top level of `ProjectStore`

This was done to simplify persistence. To migrate you need to pull it up in your slice creation code.

Before:

```typescript
const {projectStore, useProjectStore} = createProjectStore<
  RoomConfig,
  RoomState
>(
    (set, get, store) => ({
      ...createProjectSlice<RoomConfig>({
        project: {
          config: {
            ...
          },
          ...
        }
      })
    })
);
```

After:

```typescript
const {projectStore, useProjectStore} = createProjectStore<
  RoomConfig,
  RoomState
>(
    (set, get, store) => ({
      ...createProjectSlice<RoomConfig>({
        config: {
          ...
        },
        project: {
          ...
        }
      })
    })
);
```

Check the [AI example store code](https://github.com/sqlrooms/examples/blob/main/ai/src/store.ts).

### @sqlrooms/ai

* Model provider in `getApiKey`

`getApiKey` property of `createAiSlice` now takes `modelProvider`:

```typescript
...createAiSlice({
getApiKey: (modelProvider: string) => {
  return get()?.apiKeys[modelProvider] || '';
},
})(set, get, store),

```

* Combining `useScrollToBottom` and `useScrollToBottomButton`

`useScrollToBottom` is now combined with `useScrollToBottomButton`. `useScrollToBottom` now takes `dataToObserve`, `containerRef`, `endRef`. When the data changes, the hook will scroll to the bottom of the container.

* Vega Chart Tool is now a custom tool

The Vega Chart Tool is no longer included by default and must be explicitly provided as a custom tool to `createAiSlice`. You need to import it from `@sqlrooms/vega` and add it to the `customTools` object:

```typescript
import {createVegaChartTool} from '@sqlrooms/vega';

...createAiSlice({
  getApiKey: (modelProvider: string) => {
    return get()?.apiKeys[modelProvider] || '';
  },
  // Add custom tools
  customTools: {
    // Add the VegaChart tool from the vega package
    chart: createVegaChartTool(),
    // Other custom tools...
  },
})(set, get, store),
```

This change allows for more flexibility in configuring the chart tool and reduces bundle size for applications that don't need chart functionality.

---

---
url: /api/layout-config/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/layout-config](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# Variable: ~~DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/layout/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/layout](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# Variable: ~~DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-config/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-config](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# Variable: ~~DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-shell/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-shell](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# Variable: ~~DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/room-store/variables/DEFAULT_MOSAIC_LAYOUT.md
---
[@sqlrooms/room-store](../index.md) / DEFAULT\_MOSAIC\_LAYOUT

# Variable: ~~DEFAULT\_MOSAIC\_LAYOUT~~

> `const` **DEFAULT\_MOSAIC\_LAYOUT**: [`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)

## Deprecated

Use createDefaultMosaicLayout instead

---

---
url: /api/ai-config/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai-settings/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai-settings](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `z.ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai/variables/AiSettingsSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSettingsSliceConfig

# Variable: AiSettingsSliceConfig

> `const` **AiSettingsSliceConfig**: `z.ZodObject`<[`AiSettingsSliceConfig`](../type-aliases/AiSettingsSliceConfig.md)>

---

---
url: /api/ai-config/variables/AiSliceConfig.md
---
[@sqlrooms/ai-config](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai-core/variables/AiSliceConfig.md
---
[@sqlrooms/ai-core](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `z.ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai/variables/AiSliceConfig.md
---
[@sqlrooms/ai](../index.md) / AiSliceConfig

# Variable: AiSliceConfig

> `const` **AiSliceConfig**: `z.ZodObject`<[`AiSliceConfig`](../type-aliases/AiSliceConfig.md)>

---

---
url: /api/ai-config/variables/AnalysisResultSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisResultSchema

# Variable: AnalysisResultSchema

> `const` **AnalysisResultSchema**: `ZodObject`<[`AnalysisResultSchema`](../type-aliases/AnalysisResultSchema.md)>

---

---
url: /api/ai/variables/AnalysisResultSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisResultSchema

# Variable: AnalysisResultSchema

> `const` **AnalysisResultSchema**: `z.ZodObject`<[`AnalysisResultSchema`](../type-aliases/AnalysisResultSchema.md)>

---

---
url: /api/ai-config/variables/AnalysisSessionSchema.md
---
[@sqlrooms/ai-config](../index.md) / AnalysisSessionSchema

# Variable: AnalysisSessionSchema

> `const` **AnalysisSessionSchema**: `ZodEffects`<[`AnalysisSessionSchema`](../type-aliases/AnalysisSessionSchema.md)> = `migrateAnalysisSession`

---

---
url: /api/ai/variables/AnalysisSessionSchema.md
---
[@sqlrooms/ai](../index.md) / AnalysisSessionSchema

# Variable: AnalysisSessionSchema

> `const` **AnalysisSessionSchema**: `z.ZodEffects`<[`AnalysisSessionSchema`](../type-aliases/AnalysisSessionSchema.md)>

---

---
url: /api/room-config/variables/BaseDataSource.md
---
[@sqlrooms/room-config](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-shell/variables/BaseDataSource.md
---
[@sqlrooms/room-shell](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `z.ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-store/variables/BaseDataSource.md
---
[@sqlrooms/room-store](../index.md) / BaseDataSource

# Variable: BaseDataSource

> `const` **BaseDataSource**: `z.ZodObject`<[`BaseDataSource`](../type-aliases/BaseDataSource.md)>

**`Interface`**

Base interface for all data source configurations
BaseDataSource

---

---
url: /api/room-config/variables/BaseRoomConfig.md
---
[@sqlrooms/room-config](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/room-shell/variables/BaseRoomConfig.md
---
[@sqlrooms/room-shell](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `z.ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/room-store/variables/BaseRoomConfig.md
---
[@sqlrooms/room-store](../index.md) / BaseRoomConfig

# Variable: BaseRoomConfig

> `const` **BaseRoomConfig**: `z.ZodObject`<[`BaseRoomConfig`](../type-aliases/BaseRoomConfig.md)>

---

---
url: /api/canvas/variables/CanvasSliceConfig.md
---
[@sqlrooms/canvas](../index.md) / CanvasSliceConfig

# Variable: CanvasSliceConfig

> `const` **CanvasSliceConfig**: `ZodObject`<[`CanvasSliceConfig`](../type-aliases/CanvasSliceConfig.md)>

---

---
url: /api/recharts/variables/ChartLegend.md
---
[@sqlrooms/recharts](../index.md) / ChartLegend

# Variable: ChartLegend

> `const` **ChartLegend**: *typeof* [`Legend`](../classes/Legend.md) = `RechartsPrimitive.Legend`

---

---
url: /api/recharts/variables/ChartTooltip.md
---
[@sqlrooms/recharts](../index.md) / ChartTooltip

# Variable: ChartTooltip

> `const` **ChartTooltip**: *typeof* [`Tooltip`](../classes/Tooltip.md) = `RechartsPrimitive.Tooltip`

---

---
url: /api/discuss/variables/Comment.md
---
[@sqlrooms/discuss](../index.md) / Comment

# Variable: Comment

> `const` **Comment**: `ZodObject`<[`Comment`](../type-aliases/Comment.md)>

---

---
url: /api/cosmos/variables/CosmosSliceConfig.md
---
[@sqlrooms/cosmos](../index.md) / CosmosSliceConfig

# Variable: CosmosSliceConfig

> `const` **CosmosSliceConfig**: `ZodObject`<[`CosmosSliceConfig`](../type-aliases/CosmosSliceConfig.md)>

Zod schema for validating and configuring the Cosmos graph visualization.
This schema defines all available configuration options and their types.

The configuration is divided into several categories:

Node Appearance:

* `pointSizeScale`: Controls the size of nodes
* `scalePointsOnZoom`: Enables dynamic node sizing based on zoom level

Link Appearance:

* `renderLinks`: Toggles link visibility
* `linkWidthScale`: Controls link thickness
* `linkArrows`: Toggles directional arrows
* `linkArrowsSizeScale`: Controls arrow size
* `curvedLinks`: Toggles curved/straight links

Physics Simulation:

* `simulationGravity`: Central gravitational force (0.25)
* `simulationRepulsion`: Node repulsion force (1.0)
* `simulationLinkSpring`: Link spring force (1.0)
* `simulationLinkDistance`: Natural link length (10)
* `simulationFriction`: Movement damping (0.85)
* `simulationDecay`: Simulation cooling rate (1000)

## Examples

```typescript
const config: CosmosSliceConfig = {
  cosmos: {
    pointSizeScale: 1.2,
    scalePointsOnZoom: true,
    renderLinks: true,
    linkWidthScale: 1.5,
    simulationGravity: 0.25
  }
};
```

```typescript
const directedGraphConfig: CosmosSliceConfig = {
  cosmos: {
    linkArrows: true,
    linkArrowsSizeScale: 1.2,
    curvedLinks: true,
    simulationLinkDistance: 15,
    simulationLinkSpring: 1.2
  }
};
```

```typescript
const largeGraphConfig: CosmosSliceConfig = {
  cosmos: {
    simulationGravity: 0.1,
    simulationRepulsion: 0.8,
    simulationFriction: 0.9,
    simulationDecay: 2000,
    scalePointsOnZoom: false
  }
};
```

---

---
url: /api/room-config/variables/DataSource.md
---
[@sqlrooms/room-config](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-shell/variables/DataSource.md
---
[@sqlrooms/room-shell](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `z.ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-store/variables/DataSource.md
---
[@sqlrooms/room-store](../index.md) / DataSource

# Variable: DataSource

> `const` **DataSource**: `z.ZodDiscriminatedUnion`<[`DataSource`](../type-aliases/DataSource.md)>

Union type representing all possible data source configurations
Discriminated union based on the 'type' field

---

---
url: /api/room-config/variables/DataSourceTypes.md
---
[@sqlrooms/room-config](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/room-shell/variables/DataSourceTypes.md
---
[@sqlrooms/room-shell](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `z.ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/room-store/variables/DataSourceTypes.md
---
[@sqlrooms/room-store](../index.md) / DataSourceTypes

# Variable: DataSourceTypes

> `const` **DataSourceTypes**: `z.ZodEnum`<[`DataSourceTypes`](../type-aliases/DataSourceTypes.md)>

Enum representing the supported types of data sources

---

---
url: /api/monaco-editor/variables/DEFAULT_CDN_PATH.md
---
[@sqlrooms/monaco-editor](../index.md) / DEFAULT\_CDN\_PATH

# Variable: DEFAULT\_CDN\_PATH

> `const` **DEFAULT\_CDN\_PATH**: `"https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs"` = `'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs'`

---

---
url: /api/room-config/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-config](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `'Untitled room'`

---

---
url: /api/room-shell/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-shell](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `"Untitled room"`

---

---
url: /api/room-store/variables/DEFAULT_ROOM_TITLE.md
---
[@sqlrooms/room-store](../index.md) / DEFAULT\_ROOM\_TITLE

# Variable: DEFAULT\_ROOM\_TITLE

> `const` **DEFAULT\_ROOM\_TITLE**: `"Untitled room"` = `"Untitled room"`

---

---
url: /api/vega/variables/DEFAULT_VEGA_CHART_DESCRIPTION.md
---
[@sqlrooms/vega](../index.md) / DEFAULT\_VEGA\_CHART\_DESCRIPTION

# Variable: DEFAULT\_VEGA\_CHART\_DESCRIPTION

> `const` **DEFAULT\_VEGA\_CHART\_DESCRIPTION**: "A tool for creating VegaLite charts based on the schema of the SQL query result from the "query" tool.\nIn the response:\n- omit the data from the vegaLiteSpec\n- provide an sql query in sqlQuery instead."

Default description for the VegaChart tool

---

---
url: /api/discuss/variables/Discussion.md
---
[@sqlrooms/discuss](../index.md) / Discussion

# Variable: Discussion

> `const` **Discussion**: `ZodObject`<[`Discussion`](../type-aliases/Discussion.md)>

---

---
url: /api/discuss/variables/DiscussSliceConfig.md
---
[@sqlrooms/discuss](../index.md) / DiscussSliceConfig

# Variable: DiscussSliceConfig

> `const` **DiscussSliceConfig**: `ZodObject`<[`DiscussSliceConfig`](../type-aliases/DiscussSliceConfig.md)>

---

---
url: /api/recharts/namespaces/CartesianGrid/variables/displayName.md
---
[@sqlrooms/recharts](../../../index.md) / [CartesianGrid](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/namespaces/Customized/variables/displayName.md
---
[@sqlrooms/recharts](../../../index.md) / [Customized](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/namespaces/Label/variables/displayName.md
---
[@sqlrooms/recharts](../../../index.md) / [Label](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/recharts/namespaces/LabelList/variables/displayName.md
---
[@sqlrooms/recharts](../../../index.md) / [LabelList](../index.md) / displayName

# Variable: displayName

> **displayName**: `string`

---

---
url: /api/duckdb-config/variables/DuckDbSliceConfig.md
---
[@sqlrooms/duckdb-config](../index.md) / DuckDbSliceConfig

# Variable: DuckDbSliceConfig

> `const` **DuckDbSliceConfig**: `ZodObject`<[`DuckDbSliceConfig`](../type-aliases/DuckDbSliceConfig.md)>

---

---
url: /api/duckdb/variables/DuckDbSliceConfig.md
---
[@sqlrooms/duckdb](../index.md) / DuckDbSliceConfig

# Variable: DuckDbSliceConfig

> `const` **DuckDbSliceConfig**: `z.ZodObject`<[`DuckDbSliceConfig`](../type-aliases/DuckDbSliceConfig.md)>

---

---
url: /api/ai-config/variables/ErrorMessageSchema.md
---
[@sqlrooms/ai-config](../index.md) / ErrorMessageSchema

# Variable: ErrorMessageSchema

> `const` **ErrorMessageSchema**: `ZodObject`<[`ErrorMessageSchema`](../type-aliases/ErrorMessageSchema.md)>

---

---
url: /api/ai/variables/ErrorMessageSchema.md
---
[@sqlrooms/ai](../index.md) / ErrorMessageSchema

# Variable: ErrorMessageSchema

> `const` **ErrorMessageSchema**: `z.ZodObject`<[`ErrorMessageSchema`](../type-aliases/ErrorMessageSchema.md)>

---

---
url: /api/room-config/variables/FileDataSource.md
---
[@sqlrooms/room-config](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/room-shell/variables/FileDataSource.md
---
[@sqlrooms/room-shell](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `z.ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/room-store/variables/FileDataSource.md
---
[@sqlrooms/room-store](../index.md) / FileDataSource

# Variable: FileDataSource

> `const` **FileDataSource**: `z.ZodObject`<[`FileDataSource`](../type-aliases/FileDataSource.md)>

**`Interface`**

Configuration for file-based data sources
FileDataSource

---

---
url: /api/recharts/variables/Global.md
---
[@sqlrooms/recharts](../index.md) / Global

# Variable: Global

> `const` **Global**: `object`

## Type declaration

| Name | Type |
| ------ | ------ |
|  `isSsr` | `boolean` |
|  `get` | (`key`) => `boolean` |
|  `set` | (`key`, `value`?) => `void` |

---

---
url: /api/layout-config/variables/LayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/layout/variables/LayoutConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-config/variables/LayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-shell/variables/LayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/room-store/variables/LayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / LayoutConfig

# Variable: LayoutConfig

> `const` **LayoutConfig**: `z.ZodDiscriminatedUnion`<[`LayoutConfig`](../type-aliases/LayoutConfig.md)>

---

---
url: /api/layout/variables/LayoutSliceConfig.md
---
[@sqlrooms/layout](../index.md) / LayoutSliceConfig

# Variable: LayoutSliceConfig

> `const` **LayoutSliceConfig**: `ZodObject`<[`LayoutSliceConfig`](../type-aliases/LayoutSliceConfig.md)>

---

---
url: /api/layout-config/variables/LayoutTypes.md
---
[@sqlrooms/layout-config](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `ZodEnum`<\[`"mosaic"`]>

---

---
url: /api/layout/variables/LayoutTypes.md
---
[@sqlrooms/layout](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<\[`"mosaic"`]>

---

---
url: /api/room-config/variables/LayoutTypes.md
---
[@sqlrooms/room-config](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<\[`"mosaic"`]>

---

---
url: /api/room-shell/variables/LayoutTypes.md
---
[@sqlrooms/room-shell](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<\[`"mosaic"`]>

---

---
url: /api/room-store/variables/LayoutTypes.md
---
[@sqlrooms/room-store](../index.md) / LayoutTypes

# Variable: LayoutTypes

> `const` **LayoutTypes**: `z.ZodEnum`<\[`"mosaic"`]>

---

---
url: /api/room-config/variables/LoadFile.md
---
[@sqlrooms/room-config](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/room-shell/variables/LoadFile.md
---
[@sqlrooms/room-shell](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `z.ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/room-store/variables/LoadFile.md
---
[@sqlrooms/room-store](../index.md) / LoadFile

# Variable: LoadFile

> `const` **LoadFile**: `z.ZodEnum`<[`LoadFile`](../type-aliases/LoadFile.md)>

Enum representing supported file loading methods

---

---
url: /api/duckdb/variables/LoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-config/variables/LoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-shell/variables/LoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/room-store/variables/LoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / LoadFileOptions

# Variable: LoadFileOptions

> `const` **LoadFileOptions**: `z.ZodDiscriminatedUnion`<[`LoadFileOptions`](../type-aliases/LoadFileOptions.md)>

Union type of all possible file loading options
Discriminated union based on the 'method' field

---

---
url: /api/layout-config/variables/MAIN_VIEW.md
---
[@sqlrooms/layout-config](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `'main'`

Main view room panel key

---

---
url: /api/layout/variables/MAIN_VIEW.md
---
[@sqlrooms/layout](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-config/variables/MAIN_VIEW.md
---
[@sqlrooms/room-config](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-shell/variables/MAIN_VIEW.md
---
[@sqlrooms/room-shell](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/room-store/variables/MAIN_VIEW.md
---
[@sqlrooms/room-store](../index.md) / MAIN\_VIEW

# Variable: MAIN\_VIEW

> `const` **MAIN\_VIEW**: `"main"` = `"main"`

Main view room panel key

---

---
url: /api/layout-config/variables/MosaicLayoutConfig.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/layout/variables/MosaicLayoutConfig.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-config/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/room-store/variables/MosaicLayoutConfig.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutConfig

# Variable: MosaicLayoutConfig

> `const` **MosaicLayoutConfig**: `z.ZodObject`<[`MosaicLayoutConfig`](../type-aliases/MosaicLayoutConfig.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutDirection.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/layout/variables/MosaicLayoutDirection.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-config/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/room-store/variables/MosaicLayoutDirection.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutDirection

# Variable: MosaicLayoutDirection

> `const` **MosaicLayoutDirection**: `z.ZodEnum`<[`MosaicLayoutDirection`](../type-aliases/MosaicLayoutDirection.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutNode.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/layout/variables/MosaicLayoutNode.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-config/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/room-store/variables/MosaicLayoutNode.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNode

# Variable: MosaicLayoutNode

> **MosaicLayoutNode**: `ZodUnion`<[`MosaicLayoutNode`](../type-aliases/MosaicLayoutNode.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/layout/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-config/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/room-store/variables/MosaicLayoutNodeKey.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutNodeKey

# Variable: MosaicLayoutNodeKey

> `const` **MosaicLayoutNodeKey**: `z.ZodString`<[`MosaicLayoutNodeKey`](../type-aliases/MosaicLayoutNodeKey.md)>

---

---
url: /api/layout-config/variables/MosaicLayoutParent.md
---
[@sqlrooms/layout-config](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/layout/variables/MosaicLayoutParent.md
---
[@sqlrooms/layout](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-config/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-config](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-shell/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-shell](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/room-store/variables/MosaicLayoutParent.md
---
[@sqlrooms/room-store](../index.md) / MosaicLayoutParent

# Variable: MosaicLayoutParent

> `const` **MosaicLayoutParent**: `z.ZodType`<[`MosaicLayoutParent`](../type-aliases/MosaicLayoutParent.md)>

---

---
url: /api/utils/variables/NUMBER_FORMAT.md
---
[@sqlrooms/utils](../index.md) / NUMBER\_FORMAT

# Variable: NUMBER\_FORMAT

> `const` **NUMBER\_FORMAT**: `NumberFormat`

Number formatter instance configured for US locale with no minimum fraction digits

---

---
url: /api/ai/variables/QueryToolParameters.md
---
[@sqlrooms/ai](../index.md) / QueryToolParameters

# Variable: QueryToolParameters

> `const` **QueryToolParameters**: `ZodObject`<[`QueryToolParameters`](../type-aliases/QueryToolParameters.md)>

---

---
url: /api/s3-browser/variables/S3FileOrDirectory.md
---
[@sqlrooms/s3-browser](../index.md) / S3FileOrDirectory

# Variable: S3FileOrDirectory

> `const` **S3FileOrDirectory**: `ZodUnion`<[`S3FileOrDirectory`](../type-aliases/S3FileOrDirectory.md)>

---

---
url: /api/duckdb/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/duckdb](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-shell/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-store/variables/SpatialLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadFileOptions

# Variable: SpatialLoadFileOptions

> `const` **SpatialLoadFileOptions**: `z.ZodObject`<[`SpatialLoadFileOptions`](../type-aliases/SpatialLoadFileOptions.md)>

**`Interface`**

Options specific to spatial file loading with st\_read method
SpatialLoadFileOptions

---

---
url: /api/room-config/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-shell/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `z.ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/room-store/variables/SpatialLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / SpatialLoadOptions

# Variable: SpatialLoadOptions

> `const` **SpatialLoadOptions**: `z.ZodObject`<[`SpatialLoadOptions`](../type-aliases/SpatialLoadOptions.md)>

**`Interface`**

Extended options specifically for spatial data loading
Includes all standard options plus spatial-specific parameters
SpatialLoadOptions

---

---
url: /api/sql-editor-config/variables/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor-config](../index.md) / SqlEditorSliceConfig

# Variable: SqlEditorSliceConfig

> `const` **SqlEditorSliceConfig**: `ZodObject`<[`SqlEditorSliceConfig`](../type-aliases/SqlEditorSliceConfig.md)>

---

---
url: /api/sql-editor/variables/SqlEditorSliceConfig.md
---
[@sqlrooms/sql-editor](../index.md) / SqlEditorSliceConfig

# Variable: SqlEditorSliceConfig

> `const` **SqlEditorSliceConfig**: `z.ZodObject`<[`SqlEditorSliceConfig`](../type-aliases/SqlEditorSliceConfig.md)>

---

---
url: /api/room-config/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-config](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/room-shell/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-shell](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `z.ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/room-store/variables/SqlQueryDataSource.md
---
[@sqlrooms/room-store](../index.md) / SqlQueryDataSource

# Variable: SqlQueryDataSource

> `const` **SqlQueryDataSource**: `z.ZodObject`<[`SqlQueryDataSource`](../type-aliases/SqlQueryDataSource.md)>

**`Interface`**

Configuration for SQL query-based data sources
SqlQueryDataSource

---

---
url: /api/room-config/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-shell/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `z.ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-store/variables/StandardLoadFileOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadFileOptions

# Variable: StandardLoadFileOptions

> `const` **StandardLoadFileOptions**: `z.ZodObject`<[`StandardLoadFileOptions`](../type-aliases/StandardLoadFileOptions.md)>

**`Interface`**

Standard file loading options excluding spatial methods
StandardLoadFileOptions

---

---
url: /api/room-config/variables/StandardLoadOptions.md
---
[@sqlrooms/room-config](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-shell/variables/StandardLoadOptions.md
---
[@sqlrooms/room-shell](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `z.ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-store/variables/StandardLoadOptions.md
---
[@sqlrooms/room-store](../index.md) / StandardLoadOptions

# Variable: StandardLoadOptions

> `const` **StandardLoadOptions**: `z.ZodObject`<[`StandardLoadOptions`](../type-aliases/StandardLoadOptions.md)>

**`Interface`**

Standard options for loading data files
StandardLoadOptions

---

---
url: /api/room-config/variables/UrlDataSource.md
---
[@sqlrooms/room-config](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/room-shell/variables/UrlDataSource.md
---
[@sqlrooms/room-shell](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `z.ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/room-store/variables/UrlDataSource.md
---
[@sqlrooms/room-store](../index.md) / UrlDataSource

# Variable: UrlDataSource

> `const` **UrlDataSource**: `z.ZodObject`<[`UrlDataSource`](../type-aliases/UrlDataSource.md)>

**`Interface`**

Configuration for URL-based data sources
UrlDataSource

---

---
url: /api/vega/variables/VegaChartToolParameters.md
---
[@sqlrooms/vega](../index.md) / VegaChartToolParameters

# Variable: VegaChartToolParameters

> `const` **VegaChartToolParameters**: `ZodObject`<[`VegaChartToolParameters`](../type-aliases/VegaChartToolParameters.md)>

Zod schema for the VegaChart tool parameters