### Quick Start Example

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/api-summary.md

A quick start example demonstrating how to use the DataView component with pagination, sorting, and filtering.

```typescript
import React from 'react';
import {
  DataView,
  DataViewTable,
  DataViewToolbar,
  DataViewFilters,
  DataViewTextFilter,
  DataViewCheckboxFilter,
  useDataViewPagination,
  useDataViewSelection,
  useDataViewSort,
  useDataViewFilters
} from '@patternfly/react-data-view';
import { Pagination } from '@patternfly/react-core';
import { useSearchParams } from 'react-router-dom';

interface Item {
  id: string;
  name: string;
  status: 'active' | 'inactive';
}

export default function MyDataView() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  // State management hooks
  const pagination = useDataViewPagination({
    perPage: 10,
    searchParams,
    setSearchParams
  });
  
  const sort = useDataViewSort({
    searchParams,
    setSearchParams
  });
  
  const filters = useDataViewFilters({
    initialFilters: { search: '', status: [] },
    searchParams,
    setSearchParams
  });
  
  const selection = useDataViewSelection<Item>({
    matchOption: (a, b) => a.id === b.id
  });

  // Sample data
  const allItems: Item[] = [
    { id: '1', name: 'Item 1', status: 'active' },
    { id: '2', name: 'Item 2', status: 'inactive' }
  ];

  // Filter and sort data
  let displayItems = allItems.filter(item =>
    item.name.includes(filters.filters.search) &&
    (!filters.filters.status.length || filters.filters.status.includes(item.status))
  );

  if (sort.sortBy === 'name') {
    displayItems.sort((a, b) =>
      sort.direction === 'asc'
        ? a.name.localeCompare(b.name)
        : b.name.localeCompare(a.name)
    );
  }

  // Paginate
  const paginatedItems = displayItems.slice(
    (pagination.page - 1) * pagination.perPage,
    pagination.page * pagination.perPage
  );

  return (
    <DataView selection={selection}>
      <DataViewToolbar
        pagination={
          <Pagination
            itemCount={displayItems.length}
            perPage={pagination.perPage}
            page={pagination.page}
            onSetPage={pagination.onSetPage}
            onPerPageSelect={pagination.onPerPageSelect}
          />
        }
        filters={
          <DataViewFilters
            values={filters.filters}
            onChange={(id, newFilters) => filters.onSetFilters(newFilters)}
          >
            <DataViewTextFilter
              filterId="search"
              title="Search"
              value={filters.filters.search}
              onChange={(_, value) => filters.onSetFilters({ search: value })}
            />
            <DataViewCheckboxFilter
              filterId="status"
              title="Status"
              value={filters.filters.status}
              options={['active', 'inactive']}
              onChange={(_, values) => filters.onSetFilters({ status: values || [] })}
            />
          </DataViewFilters>
        }
      />
      
      <DataViewTable
        columns={[
          {
            cell: 'Name',
            resizableProps: {
              isResizable: true,
              resizeButtonAriaLabel: 'Resize Name column'
            }
          },
          'Status'
        ]}
        rows={paginatedItems.map(item => ({
          id: item.id,
          row: [item.name, item.status]
        }))}
        isResizable={true}
      />
    </DataView>
  );
}

```

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

### Provider Setup

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/context-events.md

Example of setting up the DataViewEventsProvider.

```typescript
import { DataViewEventsProvider } from '@patternfly/react-data-view';

function App() {
  return (
    <DataViewEventsProvider>
      <MyDataView />
    </DataViewEventsProvider>
  );
}
```

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

### Development

Source: https://github.com/patternfly/react-data-view/blob/main/README.md

Commands to install dependencies and start the development server.

```bash
npm install
npm run start
```

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

### All/selected data switch example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md

This example demonstrates the setup and usage of the All/selected row switch.

```typescript
import React from 'react';
import {
  DataView,
  DataViewToolbar,
  DataViewAllSelected,
  DataViewTable,
  useDataView,
  useDataViewSelection,
} from '@patternfly/react-data-view';

const AllSelectedExample = () => {
  const {
    rows,
    toolbarItems,
    toolbarActions,
    toolbarFilters,
    toolbarPagination,
  } = useDataView({
    columns: [
      { id: 'name', header: 'Name' },
      { id: 'column', header: 'Column' },
    ],
    rows: [
      { id: '1', name: 'Row 1', column: 'data 1' },
      { id: '2', name: 'Row 2', column: 'data 2' },
      { id: '3', name: 'Row 3', column: 'data 3' },
    ],
  });

  const {
    selected,
    isSelected,
    onSelect,
    setSelected,
  } = useDataViewSelection({});

  return (
    <DataView
      toolbar={(
        <DataViewToolbar
          toolbarItems={toolbarItems}
          toolbarActions={toolbarActions}
          toolbarFilters={toolbarFilters}
          toolbarPagination={toolbarPagination}
        />
      )}
    >
      <DataViewAllSelected
        selected={selected}
        onSelect={onSelect}
        setSelected={setSelected}
        rows={rows}
      />
      <DataViewTable
        columns={[
          { id: 'name', header: 'Name' },
          { id: 'column', header: 'Column' },
        ]}
        rows={rows}
        onRowSelect={onSelect}
        getRowSelectionStatus={({ id }) => (
          {
            isSelected: isSelected(id),
            disabled: false,
          }
        )}
      />
    </DataView>
  );
};

export default AllSelectedExample;

```

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

### Index file example

Source: https://github.com/patternfly/react-data-view/blob/main/README.md

Example of an index file for exporting a component and its interfaces.

```ts
export { default } from './MyComponent';
export * from './MyComponent';
```

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

### DataViewToolbar Usage Example

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-toolbar.md

Example of how to use the DataViewToolbar component with pagination and filters.

```typescript
import { DataViewToolbar, DataViewTextFilter, DataViewCheckboxFilter } from '@patternfly/react-data-view';
import { Pagination } from '@patternfly/react-core';

function MyComponent() {
  const pagination = useDataViewPagination({ perPage: 10 });
  const filters = useDataViewFilters({
    initialFilters: { search: '', status: [] }
  });

  return (
    <DataViewToolbar
      pagination={<Pagination {...pagination} itemCount={100} />}
      filters={
        <DataViewFilters values={filters.filters} onChange={filters.onSetFilters}>
          <DataViewTextFilter
            filterId="search"
            title="Search"
            value={filters.filters.search}
            onChange={(_, value) => filters.onSetFilters({ search: value })}
          />
        </DataViewFilters>
      }
    />
  );
}
```

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

### Component usage file example

Source: https://github.com/patternfly/react-data-view/blob/main/README.md

Example of a file demonstrating component usage.

```tsx
import React from 'react';

const MyComponentExample: React.FunctionComponent = () => (
  <MyComponent customLabel="My label">
);

export default MyComponentExample;
```

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

### Usage Example - With Constraints and Callback

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-th.md

Example of using DataViewTh with resizing constraints and a resize callback.

```typescript
function MyComponent() {
  const handleResize = (event, columnId, newWidth) => {
    console.log(`Column ${columnId} resized to ${newWidth}px`);
    // Store column width preferences
  };

  const columns = [
    {
      cell: 'Name',
      resizableProps: {
        isResizable: true,
        width: 200,
        minWidth: 100,
        increment: 10,
        shiftIncrement: 50,
        resizeButtonAriaLabel: 'Resize Name column',
        onResize: handleResize,
        screenReaderText: 'Name column: {width} pixels'
      }
    }
  ];

  return <DataViewTable columns={columns} rows={rows} isResizable={true} />;
}
```

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

### Filters example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md

This example demonstrates the setup and usage of filters within the data view, including text filters and clearing all filters, with URL state persistence.

```typescript
import React from 'react';
import {
  DataView,
  DataViewToolbar,
  DataViewFilters,
  DataViewTextFilter,
  useDataView,
  useDataViewFilters,
} from '@patternfly/react-data-view';
import { useSearchParams } from 'react-router-dom';

const FiltersExample = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const {
    rows,
    toolbarItems,
    toolbarActions,
    toolbarFilters,
    toolbarPagination,
  } = useDataView({
    columns: [
      { id: 'name', header: 'Name' },
      { id: 'column', header: 'Column' },
    ],
    rows: [
      { id: '1', name: 'Row 1', column: 'data 1' },
      { id: '2', name: 'Row 2', column: 'data 2' },
      { id: '3', name: 'Row 3', column: 'data 3' },
    ],
  });

  const {
    filters,
    onSetFilters,
    clearAllFilters,
  } = useDataViewFilters({
    initialFilters: {
      name: '',
      column: '',
    },
    searchParams,
    setSearchParams,
  });

  return (
    <DataView
      toolbar={(
        <DataViewToolbar
          toolbarItems={toolbarItems}
          toolbarActions={toolbarActions}
          toolbarFilters={
            <DataViewFilters
              filters={filters}
              onSetFilters={onSetFilters}
              clearAllFilters={clearAllFilters}
            >
              <DataViewTextFilter name="name" placeholder="Filter by name..." />
              <DataViewTextFilter name="column" placeholder="Filter by column..." />
            </DataViewFilters>
          }
          toolbarPagination={toolbarPagination}
        />
      )}
    >
      <DataViewTable
        columns={[
          { id: 'name', header: 'Name' },
          { id: 'column', header: 'Column' },
        ]}
        rows={rows}
      />
    </DataView>
  );
};

export default FiltersExample;

```

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

### Usage Example - Basic Table

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table.md

Example of using the DataViewTable component as a basic table.

```typescript
import { DataViewTable } from '@patternfly/react-data-view';

function MyComponent() {
  const columns = ['Name', 'Status', 'Created'];
  const rows = [
    ['John Doe', 'Active', '2024-01-15'],
    ['Jane Smith', 'Inactive', '2024-01-10']
  ];

  return (
    <DataViewTable
      columns={columns}
      rows={rows}
      isExpandable={true}
    />
  );
}
```

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

### Table example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

This is a basic example of the DataViewTable component.

```javascript
import { FunctionComponent, useMemo, useState } from 'react';
import { BrowserRouter, useSearchParams } from 'react-router-dom';
import {
  Button,
  EmptyState,
  EmptyStateActions,
  EmptyStateBody,
  EmptyStateFooter,
} from '@patternfly/react-core';
import {
  CubesIcon,
  FolderIcon,
  FolderOpenIcon,
  LeafIcon,
  ExclamationCircleIcon,
} from '@patternfly/react-icons';
import {
  ErrorState,
  ResponsiveAction,
  ResponsiveActions,
  SkeletonTableHead,
  SkeletonTableBody,
} from '@patternfly/react-component-groups';
import {
  DataViewToolbar,
  DataViewTable,
  useDataViewSelection,
  useDataViewSort,
  DataView,
  DataViewState,
} from '@patternfly/react-data-view/dist/dynamic';

export const DataViewTableExample: FunctionComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const dataViewState = useMemo(
    () =>
      new DataViewState({
        searchParams,
        setSearchParams,
      }),
    [searchParams, setSearchParams]
  );
  const { selected, setSelected } = useDataViewSelection(dataViewState);
  const { sorted, setSorted } = useDataViewSort(dataViewState);

  const columns = [
    {
      cell: 'Name',
      props: {
        width: 200,
        sort: {
          sortBy: sorted,
          onSort: setSorted,
        },
      },
    },
    {
      cell: 'Namespace',
      props: {
        width: 200,
      },
    },
    {
      cell: 'Type',
      props: {
        width: 100,
      },
    },
    {
      cell: 'Created',
      props: {
        width: 150,
      },
    },
  ];

  const rows = [
    {
      id: 1,
      row: ['Data 1', 'Namespace 1', 'Type 1', '2023-01-01'],
    },
    {
      id: 2,
      row: ['Data 2', 'Namespace 2', 'Type 2', '2023-01-02'],
    },
    {
      id: 3,
      row: ['Data 3', 'Namespace 3', 'Type 3', '2023-01-03'],
    },
  ];

  return (
    <DataView
      {...dataViewState}
      columns={columns}
      rows={rows}
      selection={{
        selected,
        setSelected,
      }}
      toolbar={(
        <DataViewToolbar
          {...dataViewState}
          selected={selected}
          setSelected={setSelected}
          actions={[
            {
              label: 'Action 1',
              onClick: () => alert('Action 1 clicked'),
            },
            {
              label: 'Action 2',
              onClick: () => alert('Action 2 clicked'),
            },
          ]}
        />
      )}
    >
      <DataViewTable
        {...dataViewState}
        columns={columns}
        rows={rows}
        selection={{
          selected,
          setSelected,
        }}
        toolbar={(
          <DataViewToolbar
            {...dataViewState}
            selected={selected}
            setSelected={setSelected}
            actions={[
              {
                label: 'Action 1',
                onClick: () => alert('Action 1 clicked'),
              },
              {
                label: 'Action 2',
                onClick: () => alert('Action 2 clicked'),
              },
            ]}
          />
        )}
      />
    </DataView>
  );
};

```

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

### Usage Example - Basic Table

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-basic.md

Example of using DataViewTableBasic for a basic table with selection.

```typescript
import { DataViewTable, DataViewTableBasic } from '@patternfly/react-data-view';
import { useDataViewSelection } from '@patternfly/react-data-view';

function MyComponent() {
  const selection = useDataViewSelection({
    matchOption: (a, b) => a.id === b.id
  });

  const columns = ['Name', 'Status', 'Created'];
  const rows = [
    {
      row: [
        { cell: 'John Doe' },
        { cell: 'Active' },
        { cell: '2024-01-15' }
      ],
      id: 'row-1'
    }
  ];

  return (
    <DataView selection={selection}>
      <DataViewTableBasic columns={columns} rows={rows} />
    </DataView>
  );
}
```

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

### Usage Example - Basic Resizable Column

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-th.md

Example of how to use DataViewTh with a basic resizable column.

```typescript
import { DataViewTable } from '@patternfly/react-data-view';

function MyComponent() {
  const columns = [
    {
      cell: 'Name',
      resizableProps: {
        isResizable: true,
        resizeButtonAriaLabel: 'Resize Name column'
      }
    },
    'Email',
    'Status'
  ];

  return (
    <DataViewTable
      columns={columns}
      rows={rows}
      isResizable={true}
    />
  );
}
```

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

### Usage Example - Expandable Content

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-basic.md

Example of using DataViewTableBasic with expandable content.

```typescript
function MyComponent() {
  const columns = ['Name', 'Details'];
  const rows = [
    {
      row: ['Item 1', 'Click to expand'],
      id: 0
    }
  ];

  const expandedRows = [
    {
      rowId: 0,
      columnId: 1,
      content: <div>Detailed information about Item 1</div>
    }
  ];

  return (
    <DataViewTableBasic
      columns={columns}
      rows={rows}
      expandedRows={expandedRows}
      isExpandable={true}
    />
  );
}
```

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

### Usage Example

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-filters.md

Example of how to use DataViewFilters with DataViewTextFilter and DataViewCheckboxFilter.

```typescript
import {
  DataViewFilters,
  DataViewTextFilter,
  DataViewCheckboxFilter
} from '@patternfly/react-data-view';

interface MyFilters {
  search: string;
  status: string[];
  tags: string[];
}

function MyComponent() {
  const [filters, setFilters] = React.useState<MyFilters>({
    search: '',
    status: [],
    tags: []
  });

  const handleFilterChange = (filterId: string, newValues: Partial<MyFilters>) => {
    setFilters(prev => ({ ...prev, ...newValues }));
  };

  return (
    <DataViewFilters
      values={filters}
      onChange={handleFilterChange}
    >
      <DataViewTextFilter
        filterId="search"
        title="Search"
        value={filters.search}
        onChange={(_, value) => handleFilterChange('search', { search: value })}
      />
      <DataViewCheckboxFilter
        filterId="status"
        title="Status"
        value={filters.status}
        options={['Active', 'Inactive', 'Pending']}
        onChange={(_, value) => handleFilterChange('status', { status: value || [] })}
      />
      <DataViewCheckboxFilter
        filterId="tags"
        title="Tags"
        value={filters.tags}
        options={['Important', 'Urgent', 'Review']}
        onChange={(_, value) => handleFilterChange('tags', { tags: value || [] })}
      />
    </DataViewFilters>
  );
}
```

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

### Complete Data View Example

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/patterns.md

Full example with all major features integrated, including state management with URL sync, filtering, sorting, and pagination.

```typescript
import React from 'react';
import {
  DataView,
  DataViewTable,
  DataViewToolbar,
  DataViewFilters,
  DataViewTextFilter,
  DataViewCheckboxFilter,
  DataViewTreeFilter,
  useDataViewPagination,
  useDataViewSelection,
  useDataViewSort,
  useDataViewFilters
} from '@patternfly/react-data-view';
import {
  Pagination,
  Toolbar,
  ToolbarContent,
  ToolbarItem,
  ToolbarToggleGroup
} from '@patternfly/react-core';
import { useSearchParams } from 'react-router-dom';

interface DataItem {
  id: string;
  name: string;
  status: string;
  environment: string;
  created: string;
}

interface MyFilters {
  search: string;
  status: string[];
  environment: string[];
}

export default function DataViewExample() {
  const [searchParams, setSearchParams] = useSearchParams();

  // State management with URL sync
  const pagination = useDataViewPagination({
    perPage: 20,
    searchParams,
    setSearchParams
  });

  const sort = useDataViewSort({
    searchParams,
    setSearchParams
  });

  const filters = useDataViewFilters<MyFilters>({
    initialFilters: {
      search: '',
      status: [],
      environment: []
    },
    searchParams,
    setSearchParams
  });

  const selection = useDataViewSelection<DataItem>({
    matchOption: (a, b) => a.id === b.id
  });

  // Sample data
  const allData: DataItem[] = [
    { id: '1', name: 'App 1', status: 'running', environment: 'prod', created: '2024-01-15' },
    { id: '2', name: 'App 2', status: 'stopped', environment: 'dev', created: '2024-01-14' },
    { id: '3', name: 'App 3', status: 'running', environment: 'staging', created: '2024-01-13' }
  ];

  // Filter data
  let filtered = allData.filter(item => {
    const matchesSearch = item.name.includes(filters.filters.search);
    const matchesStatus = !filters.filters.status.length || 
                         filters.filters.status.includes(item.status);
    const matchesEnv = !filters.filters.environment.length ||
                       filters.filters.environment.includes(item.environment);
    return matchesSearch && matchesStatus && matchesEnv;
  });

  // Sort data
  if (sort.sortBy === 'name') {
    filtered.sort((a, b) =>
      sort.direction === 'asc'
        ? a.name.localeCompare(b.name)
        : b.name.localeCompare(a.name)
    );
  }

  // Paginate data
  const displayData = filtered.slice(
    (pagination.page - 1) * pagination.perPage,
    pagination.page * pagination.perPage
  );

  return (
    <DataView selection={selection}>
      <DataViewToolbar
        pagination={
          <Pagination
            itemCount={filtered.length}
            page={pagination.page}
            perPage={pagination.perPage}
            onSetPage={pagination.onSetPage}
            onPerPageSelect={pagination.onPerPageSelect}
          />
        }
        filters={
          <DataViewFilters
            values={filters.filters}
            onChange={(id, newValues) => filters.onSetFilters(newValues)}
          >
            <DataViewTextFilter
              filterId="search"
              title="Name"
              value={filters.filters.search}
              onChange={(_, value) => filters.onSetFilters({ search: value })}
            />
            <DataViewCheckboxFilter
              filterId="status"
              title="Status"
              value={filters.filters.status}
              options={['running', 'stopped', 'error']}
              onChange={(_, values) => filters.onSetFilters({ status: values || [] })}
            />
            <DataViewCheckboxFilter
              filterId="environment"
              title="Environment"
              value={filters.filters.environment}
              options={['dev', 'staging', 'prod']}
              onChange={(_, values) => filters.onSetFilters({ environment: values || [] })}
            />
          </DataViewFilters>
        }
      />

      <DataViewTable
        columns={[
          { cell: 'Name', resizableProps: { isResizable: true, resizeButtonAriaLabel: 'Resize Name' } },
          { cell: 'Status', resizableProps: { isResizable: true, resizeButtonAriaLabel: 'Resize Status' } },
          'Environment',
          'Created'
        ]}
        rows={displayData.map(item => ({
          id: item.id,
          row: [item.name, item.status, item.environment, item.created]
        }))}
        isResizable={true}
      />
    </DataView>
  );
}

```

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

### Usage Example - Resizable Columns

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table.md

Example of using the DataViewTable component with resizable columns.

```typescript
function MyComponent() {
  const columns = [
    {
      cell: 'Name',
      resizableProps: {
        isResizable: true,
        onResize: (event, id, width) => console.log(`Column ${id}: ${width}px`)
      }
    }
  ];

  return (
    <DataViewTable
      columns={columns}
      rows={rows}
      isResizable={true}
    />
  );
}
```

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

### Example component

Source: https://github.com/patternfly/react-data-view/blob/main/README.md

Example of a new data view sub-component.

```tsx
import * as React from 'react';
import { Text } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';

// do not forget to export your component's interface
// always place the component's interface above the component itself in the code
export interface MyComponentProps {
  text: String;
}

const useStyles = createUseStyles({
  myText: {
    fontFamily: 'monospace',
    fontSize: 'var(--pf-v6-global--icon--FontSize--md)',
  },
})

// do not use the named export of your component, just a default one
const MyComponent: React.FunctionComponent<MyComponentProps> = () => {
  const classes = useStyles();

  return (
    <Text className={classes.myText}>
      This is my new component
    </Text>
  );
};

export default MyComponent;
```

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

### Custom Theming Example

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/architecture.md

Provides an example of how to create custom styles using createUseStyles from react-jss, leveraging PatternFly CSS variables.

```typescript
const useStyles = createUseStyles({
  myComponent: {
    backgroundColor: 'var(--pf-v6-global--BackgroundColor--primary)',
    padding: 'var(--pf-v6-global--spacer--md)'
  }
});
```

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

### Row click subscription example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/DataView/DataView.md

This example uses the `<DataViewEventsProvider>` to display details about a selected row in a [drawer component](/components/drawer).

```javascript
import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerContentBody,
  DrawerHead,
  DrawerActions, 
  DrawerCloseButton
} from '@patternfly/react-core';
import {
  CubesIcon
} from '@patternfly/react-icons';
import {
  useDataViewPagination,
  useDataViewSelection,
  useDataViewFilters,
  useDataViewSort,
} from '@patternfly/react-data-view/dist/dynamic/Hooks';
import {
  BulkSelect,
  BulkSelectValue,
  ErrorState,
  ResponsiveAction,
  ResponsiveActions,
  SkeletonTableHead,
  SkeletonTableBody,
} from '@patternfly/react-component-groups';
import {
  DataView,
  DataViewToolbar,
  DataViewTable,
  DataViewFilters,
  DataViewTextFilter,
  DataViewCheckboxFilter,
} from '@patternfly/react-data-view/dist/dynamic/DataView';
import {
  useDataViewEventsContext,
  DataViewEventsContext,
  DataViewEventsProvider,
  EventTypes,
} from '@patternfly/react-data-view/dist/dynamic/DataViewEventsContext';

const EventsExample = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [selectedRow, setSelectedRow] = useState(null);
  const {
    getToolbarKebabProps,
    getToolbarBulkSelectProps,
    getToolbarFiltersProps,
    getToolbarPaginationProps,
  } = useDataViewToolbar();
  const {
    getSelectAllCheckboxProps,
    getIsAllRowsSelected,
    getIsSomeRowsSelected,
    getIsRowSelected,
    getRowCheckboxProps,
  } = useDataViewSelection({
    rows: [],
  });
  const {
    getFiltersProps,
    getFilterValue,
    getFilterValueProps,
    getFilterValueTextProps,
    getFilterValueCheckboxProps,
  } = useDataViewFilters({
    filters: [],
  });
  const {
    getSortProps,
    getSortHeaderCellProps,
    getSortHeaderIconProps,
    getSortHeaderClearButtonProps,
  } = useDataViewSort({
    columns: [],
  });
  const {
    getPaginationProps,
    getPaginationContainerProps,
    getPaginationButtonProps,
  } = useDataViewPagination({
    page: 1,
    perPage: 10,
    totalItems: 100,
  });

  const onRowClick = useMemo(
    () =>
      (event: EventTypes['row-click'], row: any) => {
        setSelectedRow(row);
        setIsExpanded(true);
      },
    []
  );

  const onDrawerClose = () => {
    setIsExpanded(false);
  };

  return (
    <DataViewEventsProvider on={{
      'row-click': onRowClick
    }}>
      <Drawer isExpanded={isExpanded}>
        <DrawerContent
          panelContent={ (
            <DrawerContentBody>
              <DrawerHead>
                <DrawerActions>
                  <DrawerCloseButton onClick={onDrawerClose} />
                </DrawerActions>
              </DrawerHead>
              <p>Details for row: {selectedRow?.id}</p>
            </DrawerContentBody>
          )}
        >
          <DataView
            toolbar={ (
              <DataViewToolbar
                {...getToolbarKebabProps()}
                {...getToolbarBulkSelectProps()}
                {...getToolbarFiltersProps()}
                {...getToolbarPaginationProps()}
              >
                <BulkSelect
                  value={BulkSelectValue.all}
                  onChange={() => {}}
                  {...getSelectAllCheckboxProps()}
                />
                <ResponsiveActions>
                  <ResponsiveAction>
                    <DataViewFilters {...getFiltersProps()} />
                  </ResponsiveAction>
                </ResponsiveActions>
              </DataViewToolbar>
            )}
            table={ (
              <DataViewTable
                {...getSortProps()}
                {...getSelectAllCheckboxProps()}
                {...getIsAllRowsSelected()}
                {...getIsSomeRowsSelected()}
                {...getIsRowSelected()}
                {...getRowCheckboxProps()}
                {...getFilterValue()}
                {...getFilterValueProps()}
                {...getFilterValueTextProps()}
                {...getFilterValueCheckboxProps()}
                {...getSortHeaderCellProps()}
                {...getSortHeaderIconProps()}
                {...getSortHeaderClearButtonProps()}
                columns={[]}
                rows={[]}
              />
            )}
            footer={ (
              <div {...getPaginationContainerProps()}>
                <div {...getPaginationButtonProps()}>
                  <button {...getPaginationProps()}>Load more</button>
                </div>
              </div>
            )}
          />
        </DrawerContent>
      </Drawer>
    </DataViewEventsProvider>
  );
};

export default EventsExample;

```

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

### Usage Example - Simple Columns

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-head.md

Example of using DataViewTableHead with simple string column definitions.

```typescript
import { DataViewTableHead } from '@patternfly/react-data-view';

function MyComponent() {
  const columns = ['Name', 'Email', 'Status'];

  return (
    <table>
      <DataViewTableHead columns={columns} />
      <tbody>{/* table body */}</tbody>
    </table>
  );
}
```

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

### Usage Example - Conditional States

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-tree.md

An example demonstrating how to use conditional states (loading, empty) in DataViewTableTree.

```typescript
function MyComponent() {
  const [activeState, setActiveState] = React.useState('loading');

  return (
    <DataView activeState={activeState}>
      <DataViewTable
        isTreeTable={true}
        columns={columns}
        rows={rows}
        headStates={{
          loading: <Thead><Tr><Td>Loading...</Td></Tr></Thead>,
          empty: <Thead><Tr><Td>No data</Td></Tr></Thead>
        }}
        bodyStates={{
          loading: <Tbody><Tr><Td colSpan={3}>Fetching tree data...</Td></Tr></Tbody>,
          empty: <Tbody><Tr><Td colSpan={3}>Tree is empty</Td></Tr></Tbody>
        }}
      />
    </DataView>
  );
}
```

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

### Column Resizing

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/configuration.md

Example of configuring resizable columns, emphasizing the need to provide `resizeButtonAriaLabel`.

```typescript
const columns = [
  {
    cell: 'Name',
    resizableProps: {
      isResizable: true,
      resizeButtonAriaLabel: 'Resize Name column',
      width: 200,
      minWidth: 100
    }
  }
];
```

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

### Pagination example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Toolbar/Toolbar.md

This example uses the URL to persist the pagination state.

```javascript
import { useMemo, useState, useEffect } from 'react';
import { BrowserRouter, useSearchParams } from 'react-router-dom';
import { Pagination, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
import { useDataViewPagination, useDataViewSelection, useDataViewFilters } from '@patternfly/react-data-view/dist/dynamic/Hooks';
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
import { BulkSelect, BulkSelectValue, ErrorState, ResponsiveAction, ResponsiveActions, SkeletonTableHead, SkeletonTableBody } from '@patternfly/react-component-groups';
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
import { DataViewTable } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
import { DataViewCheckboxFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewCheckboxFilter';
import { DataViewTreeFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTreeFilter';

const PaginationExample = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const dataViewPagination = useDataViewPagination({
    initialPage: 1,
    initialPerPage: 10,
    searchParams: searchParams,
    setSearchParams: setSearchParams
  });

  const dataViewSelection = useDataViewSelection({});

  const toolbarItems = [
    {
      item: (
        <Pagination
          key="pagination"
          page={dataViewPagination.paginationProps.page}
          perPage={dataViewPagination.paginationProps.perPage}
          onSetPage={dataViewPagination.paginationProps.onSetPage}
          onPerPageSelect={dataViewPagination.paginationProps.onPerPageSelect}
          itemCount={100}
          widgetId="pagination-example"
        />
      )
    }
  ];

  return (
    <BrowserRouter>
      <DataViewToolbar
        id="pagination-toolbar-example"
        {...dataViewPagination.paginationProps}
        {...dataViewSelection.selectionProps}
        toolbarItems={toolbarItems}
      />
      <DataViewTable
        aria-label="Data view table"
        columns={[
          { label: 'Name', property: 'name' },
          { label: 'Namespace', property: 'namespace' },
          { label: 'Status', property: 'status' }
        ]}
        rows={[
          { name: 'Pod 1', namespace: 'Cluster 1 / Project A', status: 'Running' },
          { name: 'Pod 2', namespace: 'Cluster 1 / Project B', status: 'Stopped' },
          { name: 'Pod 3', namespace: 'Cluster 2 / Project C', status: 'Paused' },
          { name: 'Pod 4', namespace: 'Cluster 2 / Project D', status: 'Running' }
        ]}
      />
    </BrowserRouter>
  );
};

export default PaginationExample;

```

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

### Usage Example - Basic Tree

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-tree.md

A basic usage example of the DataViewTableTree component with hierarchical data.

```typescript
import { DataViewTable } from '@patternfly/react-data-view';
import { useDataViewSelection } from '@patternfly/react-data-view';

function MyComponent() {
  const selection = useDataViewSelection({
    matchOption: (a, b) => a.id === b.id
  });

  const columns = ['Name', 'Type', 'Status'];
  
  const rows = [
    {
      id: 'folder-1',
      row: ['Folder 1', 'Folder', 'Active'],
      children: [
        {
          id: 'file-1.1',
          row: ['File 1.1', 'File', 'Active']
        },
        {
          id: 'file-1.2',
          row: ['File 1.2', 'File', 'Inactive']
        }
      ]
    },
    {
      id: 'folder-2',
      row: ['Folder 2', 'Folder', 'Active'],
      children: [
        {
          id: 'file-2.1',
          row: ['File 2.1', 'File', 'Active']
        }
      ]
    }
  ];

  return (
    <DataView selection={selection}>
      <DataViewTable
        isTreeTable={true}
        columns={columns}
        rows={rows}
      />
    </DataView>
  );
}
```

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

### Sticky header and columns example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

Example demonstrating how to enable sticky headers and columns in the DataViewTable.

```typescript
const columns: DataViewTh[] = [
  { cell: 'Column Name', props: { isStickyColumn: true } }
];
```

```javascript
import React from 'react';
import {
  DataView,
  DataViewTable,
  DataViewTableProps,
  DataViewTh,
  OuterScrollContainer,
  InnerScrollContainer
} from '@patternfly/react-data-view';

const DataViewTableStickyExample: React.FunctionComponent = () => {
  const columns: DataViewTh[] = [
    { header: { title: 'Name' }, cell: { title: 'One' } },
    { header: { title: 'Namespace' }, cell: { title: 'Namespace One' } },
    { header: { title: 'Pods' }, cell: { title: '10' } },
    { header: { title: 'Services' }, cell: { title: '20' } },
    { header: { title: 'Running' }, cell: { title: '30' } },
    { header: { title: 'Pending' }, cell: { title: '40' } },
    { header: { title: 'Failed' }, cell: { title: '50' } },
    { header: { title: 'Deployments' }, cell: { title: '60' } },
    { header: { title: 'Replicas' }, cell: { title: '70' } },
    { header: { title: 'Nodes' }, cell: { title: '80' } },
    { header: { title: 'Version' }, cell: { title: '90' } },
    { header: { title: 'Updated' }, cell: { title: '100' } },
    { header: { title: 'Status' }, cell: { title: '110' } },
    { header: { title: 'Actions' }, cell: { title: '120' } }
  ];
  const rows = [
    { id: 1, cells: { 'Column Name': 'one', 'Namespace': 'Namespace One', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } },
    { id: 2, cells: { 'Column Name': 'two', 'Namespace': 'Namespace Two', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } },
    { id: 3, cells: { 'Column Name': 'three', 'Namespace': 'Namespace Three', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } }
  ];

  const dataViewTableProps: DataViewTableProps = {
    columns,
    rows,
    isSticky: true,
    stickyColumnProps: {
      isStickyColumn: true
    }
  };

  return (
    <OuterScrollContainer style={{ height: '300px', width: '500px' }}>
      <InnerScrollContainer>
        <DataViewTable {...dataViewTableProps} />
      </InnerScrollContainer>
    </OuterScrollContainer>
  );
};

export { DataViewTableStickyExample };

```

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

### Interactive example

Source: https://github.com/patternfly/react-data-view/blob/main/packages/module/patternfly-docs/content/extensions/data-view/examples/Table/Table.md

Interactive example showing how the different composable options work together.

```javascript
import React from 'react';
import {
  DataView,
  DataViewTable,
  DataViewTableProps,
  DataViewTh,
  OuterScrollContainer,
  InnerScrollContainer
} from '@patternfly/react-data-view';

const DataViewTableInteractiveExample: React.FunctionComponent = () => {
  const columns: DataViewTh[] = [
    { header: { title: 'Name' }, cell: { title: 'One' } },
    { header: { title: 'Namespace' }, cell: { title: 'Namespace One' } },
    { header: { title: 'Pods' }, cell: { title: '10' } },
    { header: { title: 'Services' }, cell: { title: '20' } },
    { header: { title: 'Running' }, cell: { title: '30' } },
    { header: { title: 'Pending' }, cell: { title: '40' } },
    { header: { title: 'Failed' }, cell: { title: '50' } },
    { header: { title: 'Deployments' }, cell: { title: '60' } },
    { header: { title: 'Replicas' }, cell: { title: '70' } },
    { header: { title: 'Nodes' }, cell: { title: '80' } },
    { header: { title: 'Version' }, cell: { title: '90' } },
    { header: { title: 'Updated' }, cell: { title: '100' } },
    { header: { title: 'Status' }, cell: { title: '110' } },
    { header: { title: 'Actions' }, cell: { title: '120' } }
  ];
  const rows = [
    { id: 1, cells: { 'Column Name': 'one', 'Namespace': 'Namespace One', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } },
    { id: 2, cells: { 'Column Name': 'two', 'Namespace': 'Namespace Two', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } },
    { id: 3, cells: { 'Column Name': 'three', 'Namespace': 'Namespace Three', 'Pods': '10', 'Services': '20', 'Running': '30', 'Pending': '40', 'Failed': '50', 'Deployments': '60', 'Replicas': '70', 'Nodes': '80', 'Version': '90', 'Updated': '100', 'Status': '110', 'Actions': '120' } }
  ];

  const dataViewTableProps: DataViewTableProps = {
    columns,
    rows,
    isSticky: true,
    stickyColumnProps: {
      isStickyColumn: true
    }
  };

  return (
    <OuterScrollContainer style={{ height: '300px', width: '500px' }}>
      <InnerScrollContainer>
        <DataViewTable {...dataViewTableProps} />
      </InnerScrollContainer>
    </OuterScrollContainer>
  );
};

export { DataViewTableInteractiveExample };

```

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

### Usage Example - Tree Table

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table.md

Example of using the DataViewTable component as a tree table.

```typescript
function MyComponent() {
  const columns = ['Name', 'Type', 'Size'];
  const rows = [
    {
      id: 'folder-1',
      row: ['Folder 1', 'Folder', '1.2 MB'],
      children: [
        {
          id: 'file-1',
          row: ['File 1.txt', 'File', '256 KB']
        }
      ]
    }
  ];

  return (
    <DataViewTable
      isTreeTable={true}
      columns={columns}
      rows={rows}
    />
  );
}
```

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

### Usage Example - Custom Column Configuration

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-table-head.md

Example of using DataViewTableHead with custom column configurations, including resizable properties.

```typescript
function MyComponent() {
  const columns = [
    'Name',
    {
      cell: 'Email',
      props: { modifier: 'truncate' }
    },
    {
      cell: 'Status',
      resizableProps: {
        isResizable: true,
        width: 150,
        minWidth: 100,
        resizeButtonAriaLabel: 'Resize Status column',
        onResize: (event, id, width) => console.log(`Resized to ${width}px`)
      }
    }
  ];

  return (
    <table>
      <DataViewTableHead
        columns={columns}
        hasResizableColumns={true}
      />
    </table>
  );
}
```

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

### Usage Example - Tracking All Selected Nodes

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/component-dataview-tree-filter.md

This example shows how to track all selected nodes, including parent folders, using the `onSelect` callback. The `value` prop still contains only leaf node IDs for filtering purposes.

```typescript
function MyComponent() {
  const [selectedTags, setSelectedTags] = React.useState<string[]>([]);
  const [selectedItems, setSelectedItems] = React.useState<TreeViewDataItem[]>([]);

  return (
    <DataViewTreeFilter
      filterId="tags"
      title="Tags"
      value={selectedTags}
      items={treeItems}
      onChange={(_, values) => setSelectedTags(values || [])}
      onSelect={(items) => {
        // items includes both parents and leaves
        console.log('Selected nodes:', items.map(item => item.name));
        setSelectedItems(items);
      }}
    />
  );
}
```

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

### Usage Example - Via DataView

Source: https://github.com/patternfly/react-data-view/blob/main/_autodocs/context-internal.md

Shows how DataView automatically provides the InternalContext.

```typescript
import { DataView, useDataViewSelection } from '@patternfly/react-data-view';

function MyComponent() {
  const selection = useDataViewSelection({
    matchOption: (a, b) => a.id === b.id
  });

  return (
    <DataView selection={selection} activeState="loading">
      {/* DataView automatically provides InternalContext */}
      <MyTable />
    </DataView>
  );
}
```