> For the complete documentation index, see [llms.txt](https://help.iviva.com/uxp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.iviva.com/uxp/types/listprops.md).

# ListProps

```tsx
interface ListProps {
    title: string | React.ReactNode,
    columns: Column[],
    defaultPageSize: number,
    data: {
        isPaginated?: boolean // getData function will return paginated data. Therefore that function will handle searching filtering and sorting etc. 
        getData: any[] | ((page?: number, pageSize?: number, query?: string, filters?: any) => Promise<{ items: any[] }>)
        getTotal?: (query?: string, filters?: any) => Promise<number>
        isLoading?: boolean
    },
    search?: {
        enabled: boolean
        fields?: string[]
    },
    filters?: any
    renderFilters?: React.ReactNode,
    onChangeFilters?: (data: any[]) => any[] // this will only be applicable to when not using the isPaginated option

    noItemsMessage?: string | React.ReactNode,
    addButton?: {
        label: string,
        icon?: string,
        backgroundColor?: string,
        color?: string
    },
    onDeleteItem?: (item: any) => Promise<ActionResponse>,
    minCellWidth?: number,
    onClickRow?: (e: React.MouseEvent<HTMLDivElement>, item: any) => void
    onClickColumn?: (e: React.MouseEvent<HTMLDivElement>, item: any, column: Column) => void
}
```

## Usage

```tsx
import {ListProps} from 'uxp/components';
```