### Initialize SVAR React DataGrid Component

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Demonstrates the basic initialization of the Grid component by providing data and column configurations. This is the fundamental setup for displaying tabular data. It requires importing the Grid component and its CSS.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const columns = [
  { id: 'id', width: 50 },
  {
    id: 'city',
    width: 100,
    header: 'City',
    footer: 'City',
  },
  {
    id: 'firstName',
    header: 'First Name',
    footer: 'First Name',
    width: 150,
  },
  {
    id: 'lastName',
    header: 'Last Name',
    footer: 'Last Name',
    width: 150,
  },
  { id: 'email', header: 'Email', footer: 'Email' },
];

const data = [
  {
    id: 1,
    city: "London",
    firstName: "Alex",
    lastName: "Smith",
    email: "alex@example.com"
  },
  {
    id: 2,
    city: "Paris",
    firstName: "John",
    lastName: "Doe",
    email: "john@example.com"
  }
];

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Grid data={data} columns={columns} />
    </div>
  );
}

export default App;
```

--------------------------------

### Auto-Generate Columns for SVAR React DataGrid

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Shows how to automatically generate column configurations directly from the data objects. This is useful when column definitions are not explicitly provided, simplifying setup for simple data structures. Requires the `autoConfig` prop to be set to true.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const data = [
  {
    id: 1,
    city: "London",
    firstName: "Alex",
    lastName: "Smith",
    email: "alex@example.com"
  },
  {
    id: 2,
    city: "Paris",
    firstName: "John",
    lastName: "Doe",
    email: "john@example.com"
  }
];

function App() {
  return (
    <div style={{ padding: '20px' }}>
      <Grid
        data={data}
        columns={[]}
        autoConfig={true}
      />
    </div>
  );
}

export default App;
```

--------------------------------

### Svar UI React Grid: Event Handling and API Access

Source: https://context7.com/svar-widgets/react-grid/llms.txt

This snippet demonstrates how to handle common grid events such as row selection, addition, updates, and deletion. It also shows how to get a reference to the grid's API using `useRef` for programmatic control, including adding and deleting rows. Dependencies include `@svar-ui/react-grid` and its CSS.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useRef, useMemo } from 'react';

function App() {
  const gridRef = useRef(null);

  const columns = useMemo(() => [
    { id: 'id', width: 50 },
    { id: 'firstName', header: 'First Name', width: 150, sort: true, editor: 'text' },
    { id: 'lastName', header: 'Last Name', width: 150, sort: true, editor: 'text' },
    { id: 'email', header: 'Email', sort: true, editor: 'text' }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com" }
  ];

  const handleSelectRow = (ev) => {
    console.log('Row selected:', ev);
  };

  const handleAddRow = (ev) => {
    console.log('Row added:', ev);
  };

  const handleUpdateRow = (ev) => {
    console.log('Row updated:', ev);
  };

  const handleDeleteRow = (ev) => {
    console.log('Row deleted:', ev);
  };

  const addNewRow = () => {
    gridRef.current.exec('add-row', {
      row: {
        id: Date.now(),
        firstName: 'New',
        lastName: 'User',
        email: 'new@example.com'
      }
    });
  };

  const deleteSelectedRow = () => {
    const selectedRows = gridRef.current.getState().selectedRows;
    if (selectedRows.length > 0) {
      gridRef.current.exec('delete-row', { id: selectedRows[0] });
    }
  };

  const init = (api) => {
    console.log('Grid API initialized:', api);
    gridRef.current = api;
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={addNewRow} style={{ marginRight: 10 }}>Add Row</button>
      <button onClick={deleteSelectedRow}>Delete Selected</button>
      <div style={{ height: 400, marginTop: 10 }}>
        <Grid
          data={data}
          columns={columns}
          init={init}
          onSelectRow={handleSelectRow}
          onAddRow={handleAddRow}
          onUpdateRow={handleUpdateRow}
          onDeleteRow={handleDeleteRow}
        />
      </div>
    </div>
  );
}

export default App;
```

--------------------------------

### Import and Initialize SVAR React DataGrid

Source: https://github.com/svar-widgets/react-grid/blob/main/README.md

This snippet demonstrates how to import the necessary components and CSS for the SVAR React DataGrid and how to initialize it with basic column and data configurations. It requires the '@svar-ui/react-grid' package.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const columns = [
    { id: 'id', width: 50 },
    {
      id: 'city',
      width: 100,
      header: 'City',
      footer: 'City',
    },
    {
      id: 'firstName',
      header: 'First Name',
      footer: 'First Name',
      width: 150,
    },
];

const data = [
    {
        id: 1,
        city: "London",
        firstName: "Alex"
    }
];

const myComponent => (<Grid columns={column} data={data} />);
```

--------------------------------

### Apply Predefined Themes to React Grid Component

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Demonstrates how to apply Material, Willow, and WillowDark themes to the React Grid component. This involves importing theme components and wrapping the Grid with the desired theme provider. Ensure '@svar-ui/react-grid/all.css' is imported for styles.

```jsx
import { Grid, Material, Willow, WillowDark } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useState, useMemo } from 'react';

function App() {
  const [theme, setTheme] = useState('material');

  const columns = useMemo(() => [
    { id: 'id', width: 50 },
    { id: 'firstName', header: 'First Name', width: 150 },
    { id: 'lastName', header: 'Last Name', width: 150 },
    { id: 'email', header: 'Email' }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com" }
  ];

  const renderGrid = () => (
    <div style={{ height: 400 }}>
      <Grid data={data} columns={columns} />
    </div>
  );

  const ThemeWrapper = ({ children }) => {
    switch(theme) {
      case 'material':
        return <Material fonts={true}>{children}</Material>;
      case 'willow':
        return <Willow fonts={true}>{children}</Willow>;
      case 'willowDark':
        return <WillowDark fonts={true}>{children}</WillowDark>;
      default:
        return children;
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: 20 }}>
        <button onClick={() => setTheme('material')} style={{ marginRight: 10 }}>
          Material Theme
        </button>
        <button onClick={() => setTheme('willow')} style={{ marginRight: 10 }}>
          Willow Theme
        </button>
        <button onClick={() => setTheme('willowDark')}> 
          Willow Dark Theme
        </button>
      </div>
      <ThemeWrapper>
        {renderGrid()}
      </ThemeWrapper>
    </div>
  );
}

export default App;
```

--------------------------------

### Configure Responsive Layouts for React Grid Component

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Enables the grid to adapt its columns and sizes based on viewport width using the 'responsive' prop. Define breakpoints and corresponding configurations for columns and element sizes. Requires '@svar-ui/react-grid/all.css' for styling.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useMemo } from 'react';

function App() {
  const baseColumns = useMemo(() => [
    { id: 'id', width: 50 },
    { id: 'firstName', header: 'First Name', width: 150 },
    { id: 'lastName', header: 'Last Name', width: 150 },
    { id: 'email', header: 'Email', flexgrow: 1 },
    { id: 'city', header: 'City', width: 120 },
    { id: 'companyName', header: 'Company', width: 200 }
  ], []);

  const responsiveConfig = {
    768: {
      columns: [
        { id: 'id', width: 50 },
        { id: 'firstName', header: 'First Name', flexgrow: 1 },
        { id: 'email', header: 'Email', flexgrow: 1 }
      ],
      sizes: {
        headerHeight: 40,
        rowHeight: 36
      }
    },
    480: {
      columns: [
        { id: 'firstName', header: 'Name', flexgrow: 1 },
        { id: 'email', header: 'Email', flexgrow: 1 }
      ],
      sizes: {
        headerHeight: 36,
        rowHeight: 32
      }
    }
  };

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com", city: "London", companyName: "Tech Corp" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com", city: "Paris", companyName: "Digital Solutions" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com", city: "Berlin", companyName: "Innovation Labs" }
  ];

  return (
    <div style={{ padding: '20px', height: '500px' }}>
      <Grid
        data={data}
        columns={baseColumns}
        responsive={responsiveConfig}
      />
    </div>
  );
}

export default App;
```

--------------------------------

### Enable Sorting and Resizing in SVAR React DataGrid

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Illustrates how to enable interactive column sorting and resizing within the Grid component. This enhances user experience by allowing users to reorder columns by data and adjust their widths. Requires setting `sort: true` and `resize: true` for each column definition.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const columns = [
  {
    id: 'id',
    width: 50,
    sort: true,
    resize: true
  },
  {
    id: 'firstName',
    header: 'First Name',
    width: 150,
    sort: true,
    resize: true
  },
  {
    id: 'lastName',
    header: 'Last Name',
    width: 150,
    sort: true,
    resize: true
  },
  {
    id: 'email',
    header: 'Email',
    sort: true,
    resize: true
  },
];

const data = [
  { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com" },
  { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com" },
  { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com" }
];

function App() {
  return (
    <div style={{ padding: '20px', height: '400px' }}>
      <Grid data={data} columns={columns} />
    </div>
  );
}

export default App;
```

--------------------------------

### React Grid: Flexible Columns with Flexgrow

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Configures grid columns to automatically adjust their width and fill available space using the 'flexgrow' property. This ensures responsive column sizing. Requires the '@svar-ui/react-grid' library.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const columns = [
  { id: 'id', width: 50 },
  { id: 'city', header: 'City', width: 160 },
  { id: 'firstName', header: 'First Name', flexgrow: 1 },
  { id: 'lastName', header: 'Last Name', flexgrow: 1 },
  { id: 'companyName', header: 'Company', flexgrow: 2 }
];

const data = [
  { id: 1, city: "London", firstName: "Alex", lastName: "Smith", companyName: "Tech Corp" },
  { id: 2, city: "Paris", firstName: "John", lastName: "Doe", companyName: "Digital Solutions" }
];

function App() {
  return (
    <div style={{ padding: '20px', height: '400px' }}>
      <Grid data={data} columns={columns} />
    </div>
  );
}

export default App;
```

--------------------------------

### ContextMenu Component for React Grid Rows

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Adds a customizable context menu to grid rows. It supports default actions and custom options, allowing for interactive row manipulation. Dependencies include '@svar-ui/react-grid'. Inputs are grid API, menu options, and a click handler. Outputs are contextual actions triggered by user interaction.

```jsx
import { Grid, ContextMenu, defaultMenuOptions } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useRef, useMemo } from 'react';

function App() {
  const gridRef = useRef(null);

  const columns = useMemo(() => [
    { id: 'id', width: 50 },
    { id: 'firstName', header: 'First Name', width: 150 },
    { id: 'lastName', header: 'Last Name', width: 150 },
    { id: 'email', header: 'Email' }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com" }
  ];

  const customMenuOptions = [
    ...defaultMenuOptions,
    { id: 'custom-action', text: 'Custom Action' }
  ];

  const handleMenuClick = (ev) => {
    const option = ev.action;
    if (option && option.id === 'custom-action') {
      const selectedRows = gridRef.current.getState().selectedRows;
      console.log('Custom action for row:', selectedRows[0]);
      alert(`Custom action triggered for row ${selectedRows[0]}`);
    }
  };

  const init = (api) => {
    gridRef.current = api;
  };

  return (
    <div style={{ padding: '20px', height: '400px' }}>
      <ContextMenu
        api={gridRef.current}
        options={customMenuOptions}
        onClick={handleMenuClick}
      >
        <Grid
          data={data}
          columns={columns}
          init={init}
        />
      </ContextMenu>
    </div>
  );
}

export default App;

```

--------------------------------

### Svar UI React Grid: REST API Integration

Source: https://context7.com/svar-widgets/react-grid/llms.txt

This snippet demonstrates how to integrate the Svar UI React Grid with a REST API for server-side data operations. It utilizes `RestDataProvider` to fetch data from a specified endpoint and handles grid events like adding, updating, and deleting rows locally, which can then be synchronized with the backend. Dependencies include `@svar-ui/react-grid`, `@svar-ui/grid-data-provider`, and `@svar-ui/lib-state`.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { RestDataProvider } from "@svar-ui/grid-data-provider";
import { EventResolver } from "@svar-ui/lib-state";
import { useState, useEffect, useMemo } from 'react';

function App() {
  const [data, setData] = useState([]);

  const columns = useMemo(() => [
    { id: 'name', header: 'Title', flexgrow: 1, sort: true, editor: 'text' },
    { id: 'year', header: 'Year', width: 100, sort: true, editor: 'text' },
    { id: 'votes', header: 'Votes', width: 100, sort: true, editor: 'text' }
  ], []);

  const provider = useMemo(
    () => new RestDataProvider(
      'https://master--svar-grid-go--dev.webix.io/films',
      (o) => o
    ),
    []
  );

  useEffect(() => {
    let mounted = true;
    provider.getData().then((data) => {
      if (mounted) setData(data);
    });
    return () => {
      mounted = false;
    };
  }, [provider]);

  const init = (api) => {
    api.setNext(new EventResolver('done')).setNext(provider);

    api.on('add-row', (ev) => {
      console.log('Row added locally:', ev);
    });

    api.on('update-row', (ev) => {
      console.log('Row updated locally:', ev);
    });

    api.on('delete-row', (ev) => {
      console.log('Row deleted locally:', ev);
    });
  };

  return (
    <div style={{ padding: '20px', height: '500px' }}>
      <Grid
        data={data}
        columns={columns}
        init={init}
      />
    </div>
  );
}

export default App;
```

--------------------------------

### Tooltip Component for React Grid Cells

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Enables custom tooltips to be displayed when hovering over grid cells. It supports both simple text tooltips and complex custom components for dynamic content. Dependencies include '@svar-ui/react-grid'. Input is the grid API and tooltip content configuration.

```jsx
import { Grid, Tooltip } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useRef, useMemo } from 'react';

function CustomTooltip({ data }) {
  return (
    <div style={{ padding: '8px', background: '#333', color: '#fff', borderRadius: '4px' }}>
      <div><strong>{data.firstName} {data.lastName}</strong></div>
      <div>Email: {data.email}</div>
      <div>City: {data.city}</div>
    </div>
  );
}

function App() {
  const gridRef = useRef(null);

  const columns = useMemo(() => [
    { id: 'id', width: 50, tooltip: false },
    { id: 'firstName', header: 'First Name', width: 150, tooltip: true },
    { id: 'lastName', header: 'Last Name', width: 150, tooltip: true },
    { id: 'email', header: 'Email', tooltip: (row) => `Contact: ${row.email}` },
    { id: 'city', header: 'City', width: 120 }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com", city: "London" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com", city: "Paris" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com", city: "Berlin" }
  ];

  const init = (api) => {
    gridRef.current = api;
  };

  return (
    <div style={{ padding: '20px', height: '400px' }}>
      <Tooltip api={gridRef.current} content={CustomTooltip}>
        <Grid
          data={data}
          columns={columns}
          init={init}
        />
      </Tooltip>
    </div>
  );
}

export default App;

```

--------------------------------

### Multi-Select and Row Reordering in React Grid

Source: https://context7.com/svar-widgets/react-grid/llms.txt

This snippet demonstrates how to enable multi-row selection and drag-and-drop row reordering in the SVAR React Grid. It requires importing the `Grid` component and its CSS. The `multiselect` and `reorder` props are set to `true`, and event handlers `onReorder` and `onSelectRow` are provided to manage user interactions. The component is designed for React applications.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useMemo } from 'react';

function App() {
  const columns = useMemo(() => [
    { id: 'id', width: 50 },
    { id: 'firstName', header: 'First Name', width: 150 },
    { id: 'lastName', header: 'Last Name', width: 150 },
    { id: 'email', header: 'Email' }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com" },
    { id: 4, firstName: "Bob", lastName: "Williams", email: "bob@example.com" },
    { id: 5, firstName: "Kate", lastName: "Brown", email: "kate@example.com" }
  ];

  const handleReorder = (ev) => {
    console.log('Row reordered:', {
      id: ev.id,
      before: ev.before,
      after: ev.after
    });
  };

  const handleSelectRow = (ev) => {
    console.log('Row selected:', ev);
  };

  return (
    <div style={{ padding: '20px', height: '500px' }}>
      <Grid
        data={data}
        columns={columns}
        multiselect={true}
        reorder={true}
        onReorder={handleReorder}
        onSelectRow={handleSelectRow}
      />
    </div>
  );
}

export default App;

```

--------------------------------

### React Grid: Inline Filtering with Text and RichSelect Inputs

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Enables real-time data filtering directly within column headers using text or richselect input types. Requires the '@svar-ui/react-grid' library. Accepts data and column configurations as input, and outputs filtered data.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useRef, useMemo } from 'react';

function App() {
  const gridRef = useRef(null);

  const countries = [
    { id: 1, label: 'Poland' },
    { id: 2, label: 'Brasil' },
    { id: 3, label: 'USA' },
    { id: 4, label: 'Germany' }
  ];

  const columns = useMemo(() => [
    { id: 'id', width: 50 },
    {
      id: 'firstName',
      header: { filter: 'text' },
      width: 150,
      sort: true,
      resize: true
    },
    {
      id: 'lastName',
      header: { filter: { type: 'text' } },
      width: 150,
      sort: true,
      resize: true
    },
    {
      id: 'email',
      header: { filter: 'text' },
      sort: true,
      resize: true
    },
    {
      id: 'country',
      header: {
        filter: {
          type: 'richselect',
          config: {
            options: countries,
          },
        },
      },
      options: countries,
      sort: true,
      resize: true
    }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com", country: 1 },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com", country: 2 },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com", country: 3 }
  ];

  const clearFilters = () => {
    gridRef.current.exec('filter-rows', {});
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={clearFilters}>Clear Filters</button>
      <div style={{ height: 400, marginTop: 10 }}>
        <Grid data={data} columns={columns} ref={gridRef} />
      </div>
    </div>
  );
}

export default App;
```

--------------------------------

### React Grid: Tree Structure Display

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Renders hierarchical data in an expandable and collapsible tree format. Features include treetoggle for row expansion, editors, and sorting. Requires the '@svar-ui/react-grid' library and a 'tree: true' prop.

```jsx
import { Grid } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";

const treeColumns = [
  {
    id: 'lastName',
    header: 'Last Name',
    flexgrow: 1,
    treetoggle: true,
    editor: 'text',
    sort: true,
  },
  {
    id: 'firstName',
    header: 'First Name',
    width: 150,
    sort: true,
  },
  {
    id: 'city',
    header: 'City',
    width: 100,
    sort: true,
  }
];

const treeData = [
  {
    id: 1,
    firstName: 'Ernest',
    lastName: 'Schuppe',
    city: 'Amieshire',
    open: true,
    data: [
      {
        id: 5,
        firstName: 'Janis',
        lastName: 'Vandervort',
        city: 'Gust',
      },
      {
        id: 6,
        firstName: 'Makenzie',
        lastName: 'Bode',
        city: 'Amieshire',
      }
    ]
  },
  {
    id: 2,
    firstName: 'Ciara',
    lastName: 'Towne',
    city: 'Amieshire',
    open: true,
    data: [
      {
        id: 7,
        firstName: 'Suzanne',
        lastName: 'Wolff',
        city: 'Amieshire',
      }
    ]
  }
];

function App() {
  return (
    <div style={{ padding: '20px', height: '500px' }}>
      <Grid data={treeData} columns={treeColumns} tree={true} />
    </div>
  );
}

export default App;
```

--------------------------------

### HeaderMenu Component for React Grid Column Toggling

Source: https://context7.com/svar-widgets/react-grid/llms.txt

Provides a column visibility toggle menu within the grid header. This allows users to show or hide columns dynamically. It requires the grid API and a configuration object for visible columns. Dependencies include '@svar-ui/react-grid'.

```jsx
import { Grid, HeaderMenu } from "@svar-ui/react-grid";
import "@svar-ui/react-grid/all.css";
import { useRef, useMemo } from 'react';

function App() {
  const gridRef = useRef(null);

  const columns = useMemo(() => [
    { id: 'id', width: 50, header: 'ID' },
    { id: 'firstName', header: 'First Name', width: 150 },
    { id: 'lastName', header: 'Last Name', width: 150 },
    { id: 'email', header: 'Email' },
    { id: 'city', header: 'City', width: 120 }
  ], []);

  const data = [
    { id: 1, firstName: "Alex", lastName: "Smith", email: "alex@example.com", city: "London" },
    { id: 2, firstName: "John", lastName: "Doe", email: "john@example.com", city: "Paris" },
    { id: 3, firstName: "Mary", lastName: "Johnson", email: "mary@example.com", city: "Berlin" }
  ];

  const visibleColumns = {
    firstName: true,
    lastName: true,
    email: true,
    city: true
  };

  const init = (api) => {
    gridRef.current = api;
  };

  return (
    <div style={{ padding: '20px', height: '400px' }}>
      <HeaderMenu api={gridRef.current} columns={visibleColumns}>
        <button style={{ marginBottom: 10 }}>Toggle Columns</button>
      </HeaderMenu>
      <Grid
        data={data}
        columns={columns}
        init={init}
      />
    </div>
  );
}

export default App;

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.