0
# Lists & Data Display
1

2
Components for displaying structured data including lists, data tables, and related display components.
3

4
## Capabilities
5

6
### List Components
7

8
Namespaced components for creating structured lists.
9

10
```typescript { .api }
11
namespace List {
12
  function Item(props: ListItemProps): JSX.Element;
13
  function Accordion(props: ListAccordionProps): JSX.Element;
14
  function AccordionGroup(props: ListAccordionGroupProps): JSX.Element;
15
  function Section(props: ListSectionProps): JSX.Element;
16
  function Subheader(props: ListSubheaderProps): JSX.Element;
17
  function Icon(props: ListIconProps): JSX.Element;
18
  function Image(props: ListImageProps): JSX.Element;
19
}
20

21
interface ListItemProps {
22
  title: React.ReactNode;
23
  description?: React.ReactNode;
24
  left?: (props: { color: string; style?: StyleProp<ViewStyle> }) => React.ReactNode;
25
  right?: (props: { color: string; style?: StyleProp<ViewStyle> }) => React.ReactNode;
26
  onPress?: () => void;
27
  disabled?: boolean;
28
  style?: StyleProp<ViewStyle>;
29
  titleStyle?: StyleProp<TextStyle>;
30
  descriptionStyle?: StyleProp<TextStyle>;
31
  titleNumberOfLines?: number;
32
  descriptionNumberOfLines?: number;
33
  theme?: ThemeProp;
34
}
35

36
interface ListAccordionProps {
37
  title: React.ReactNode;
38
  description?: React.ReactNode;
39
  left?: (props: { isExpanded: boolean }) => React.ReactNode;
40
  right?: (props: { isExpanded: boolean }) => React.ReactNode;
41
  expanded?: boolean;
42
  onPress?: () => void;
43
  children: React.ReactNode;
44
  id?: string | number;
45
  style?: StyleProp<ViewStyle>;
46
  titleStyle?: StyleProp<TextStyle>;
47
  descriptionStyle?: StyleProp<TextStyle>;
48
  theme?: ThemeProp;
49
}
50

51
interface ListSectionProps {
52
  title?: string;
53
  children: React.ReactNode;
54
  titleStyle?: StyleProp<TextStyle>;
55
  style?: StyleProp<ViewStyle>;
56
  theme?: ThemeProp;
57
}
58

59
interface ListIconProps {
60
  icon: IconSource;
61
  color?: string;
62
  style?: StyleProp<ViewStyle>;
63
}
64

65
interface ListImageProps {
66
  source: ImageSourcePropType;
67
  style?: StyleProp<ViewStyle>;
68
}
69
```
70

71
**Usage Examples:**
72

73
```typescript
74
import React, { useState } from 'react';
75
import { List } from 'react-native-paper';
76

77
function ListExample() {
78
  const [expanded, setExpanded] = useState(true);
79

80
  return (
81
    <List.Section>
82
      <List.Subheader>Some title</List.Subheader>
83
      <List.Item
84
        title="First Item"
85
        description="Item description"
86
        left={props => <List.Icon {...props} icon="folder" />}
87
      />
88
      <List.Accordion
89
        title="Expandable list item"
90
        expanded={expanded}
91
        onPress={() => setExpanded(!expanded)}
92
      >
93
        <List.Item title="First item" />
94
        <List.Item title="Second item" />
95
      </List.Accordion>
96
    </List.Section>
97
  );
98
}
99
```
100

101
### DataTable
102

103
Table component for displaying structured data with sorting and pagination.
104

105
```typescript { .api }
106
function DataTable(props: DataTableProps): JSX.Element;
107

108
interface DataTableProps {
109
  children: React.ReactNode;
110
  style?: StyleProp<ViewStyle>;
111
  theme?: ThemeProp;
112
}
113

114
namespace DataTable {
115
  function Header(props: DataTableHeaderProps): JSX.Element;
116
  function Title(props: DataTableTitleProps): JSX.Element;
117
  function Row(props: DataTableRowProps): JSX.Element;
118
  function Cell(props: DataTableCellProps): JSX.Element;
119
  function Pagination(props: DataTablePaginationProps): JSX.Element;
120
}
121

122
interface DataTableHeaderProps {
123
  children: React.ReactNode;
124
  style?: StyleProp<ViewStyle>;
125
  theme?: ThemeProp;
126
}
127

128
interface DataTableTitleProps {
129
  children: React.ReactNode;
130
  sortDirection?: 'ascending' | 'descending';
131
  onPress?: () => void;
132
  numeric?: boolean;
133
  numberOfLines?: number;
134
  style?: StyleProp<ViewStyle>;
135
  theme?: ThemeProp;
136
}
137

138
interface DataTableRowProps {
139
  children: React.ReactNode;
140
  onPress?: () => void;
141
  style?: StyleProp<ViewStyle>;
142
  theme?: ThemeProp;
143
}
144

145
interface DataTableCellProps {
146
  children: React.ReactNode;
147
  numeric?: boolean;
148
  numberOfLines?: number;
149
  style?: StyleProp<ViewStyle>;
150
  theme?: ThemeProp;
151
}
152

153
interface DataTablePaginationProps {
154
  page: number;
155
  numberOfPages: number;
156
  onPageChange: (page: number) => void;
157
  label?: string;
158
  numberOfItemsPerPageList?: number[];
159
  numberOfItemsPerPage?: number;
160
  onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
161
  showFastPaginationControls?: boolean;
162
  optionsLabel?: string;
163
  optionsPerPage?: string;
164
  style?: StyleProp<ViewStyle>;
165
  theme?: ThemeProp;
166
}
167
```
168

169
**Usage Example:**
170

171
```typescript
172
import React, { useState } from 'react';
173
import { DataTable } from 'react-native-paper';
174

175
function TableExample() {
176
  const [page, setPage] = useState(0);
177
  const [numberOfItemsPerPage, setNumberOfItemsPerPage] = useState(2);
178
  const numberOfItemsPerPageList = [2, 3, 4];
179

180
  return (
181
    <DataTable>
182
      <DataTable.Header>
183
        <DataTable.Title sortDirection="descending">Name</DataTable.Title>
184
        <DataTable.Title numeric>Age</DataTable.Title>
185
      </DataTable.Header>
186

187
      <DataTable.Row>
188
        <DataTable.Cell>John</DataTable.Cell>
189
        <DataTable.Cell numeric>25</DataTable.Cell>
190
      </DataTable.Row>
191

192
      <DataTable.Row>
193
        <DataTable.Cell>Jane</DataTable.Cell>
194
        <DataTable.Cell numeric>30</DataTable.Cell>
195
      </DataTable.Row>
196

197
      <DataTable.Pagination
198
        page={page}
199
        numberOfPages={3}
200
        onPageChange={setPage}
201
        numberOfItemsPerPageList={numberOfItemsPerPageList}
202
        numberOfItemsPerPage={numberOfItemsPerPage}
203
        onItemsPerPageChange={setNumberOfItemsPerPage}
204
        showFastPaginationControls
205
        optionsLabel="Rows per page"
206
      />
207
    </DataTable>
208
  );
209
}
210
```