Documentation

This library is an extended version of React Native Paper, offering additional components to enhance your development experience. One of the key additions is the DataTableAdvance component, designed for advanced table handling. Below is an overview of its features and functionality.

Features

• Advanced data table with sortable columns.
• (DataList) Mobile View for Data Table.
• Infinite Scrolling for the Mobile View with Custom function.
• Custom filtering components for specific columns.
• Custom rendering of cell content.
• Pagination with adjustable items per page.
• Integration with react-native-paper-extended for UI components.

Props Overview

(for Advanced Data Table)

Prop Name	Type	Mandatory	Description
headers	HeadersProp[]	Yes	Array of objects defining column headers. Each object contains keys like key, title, etc.
data	any	Yes	Array of data objects, where keys should match the key values in headers.
Note: Also "id" key is mandatory for bulk actions
numberOfItemsPerPageList	number[]	Yes	Array of numbers specifying the items per page options.
enableBulkAction	boolean	Yes	Enables or disables the bulk action functionality.
onBulkSelect	(selected: any[]) => void	No	Callback function triggered when items are selected in bulk.
style	StyleProp<ViewStyle>	No	Custom styles for the component's container.
renderCellContent	(cell: any, headerKey: string) => React.ReactElement	No	Function to render custom cell content.
showActionColumn	boolean	No	Toggles visibility of the action column.
renderActionColumn	(cell: any, index?: string) => React.ReactElement	No	Function to render custom content for the action column.
renderFilterComponent	(header: any, close: () => void) => React.ReactElement	No	Function to render custom filter components for a column.

|

Code

1import React, { useState } from "react";
2import {
3  DataTableAdvance,
4  Checkbox,
5  RadioButton,
6} from "react-native-paper-extended";
7import { View, Text, TouchableOpacity } from "react-native";
8import moment from "moment";
9
10const DataTableAdvanceExample = () => {
11  const StatusFilter = ({ close }) => {
12    const [status, setStatus] = useState("");
13
14    const handlePress = (value) => setStatus(value);
15
16    return (
17      <View>
18        {["Incoming", "Outgoing", "Missed", "Bridge Call", "Voicemail"].map(
19          (label) => (
20            <Checkbox.Item
21              key={label}
22              label={label}
23              status={status === label ? "checked" : "unchecked"}
24              onPress={() => handlePress(label)}
25            />
26          )
27        )}
28        <View style={{ flexDirection: "row", marginTop: 12 }}>
29          <TouchableOpacity
30            onPress={close}
31            style={{
32              flex: 1,
33              backgroundColor: "#734BD1",
34              borderRadius: 20,
35              padding: 8,
36            }}
37          >
38            <Text style={{ color: "white", textAlign: "center" }}>Apply</Text>
39          </TouchableOpacity>
40        </View>
41      </View>
42    );
43  };
44
45  const ContactFilter = ({ close }) => {
46    const [contactType, setContactType] = useState([]);
47    const [favorite, setFavorite] = useState("");
48    const [status, setStatus] = useState("");
49
50    return (
51      <View>
52        <Text>Contact Type</Text>
53        {["HCP", "Staff", "Unknown"].map((type) => (
54          <Checkbox.Item
55            key={type}
56            label={type}
57            status={contactType.includes(type) ? "checked" : "unchecked"}
58            onPress={() =>
59              setContactType((prev) =>
60                prev.includes(type)
61                  ? prev.filter((t) => t !== type)
62                  : [...prev, type]
63              )
64            }
65          />
66        ))}
67        <Text>Favorite</Text>
68        <RadioButton.Group onValueChange={setFavorite} value={favorite}>
69          {["Yes", "No"].map((value) => (
70            <RadioButton.Item key={value} label={value} value={value} />
71          ))}
72        </RadioButton.Group>
73        <Text>Status</Text>
74        <RadioButton.Group onValueChange={setStatus} value={status}>
75          {["Opted In", "Opted Out"].map((value) => (
76            <RadioButton.Item key={value} label={value} value={value} />
77          ))}
78        </RadioButton.Group>
79        <View style={{ flexDirection: "row", marginTop: 12 }}>
80          <TouchableOpacity
81            onPress={close}
82            style={{
83              flex: 1,
84              backgroundColor: "#734BD1",
85              borderRadius: 20,
86              padding: 8,
87            }}
88          >
89            <Text style={{ color: "white", textAlign: "center" }}>Apply</Text>
90          </TouchableOpacity>
91        </View>
92      </View>
93    );
94  };
95
96  return (
97    <DataTableAdvance
98      data={[
99        {
100          id: 1,
101          name: "Sheena David",
102          status: "incoming",
103          datetime: "2024-12-04T12:14:22.813Z",
104          callDuration: "20 mins",
105        },
106        {
107          id: 2,
108          name: "Satyaki",
109          status: "outcoming",
110          datetime: "2024-12-05T12:14:22.813Z",
111          callDuration: "20 mins",
112        },
113      ]}
114      numberOfItemsPerPageList={[5, 10, 20]}
115      headers={[
116        { key: "name", title: "Contact Name", sort: true, filter: true },
117        { key: "status", title: "Type", sort: true, filter: true },
118        { key: "datetime", title: "Date & Time", sort: true },
119        { key: "callDuration", title: "Duration", sort: true },
120      ]}
121      onBulkSelect={(selected) => console.log(selected)}
122      renderCellContent={(cell, headerKey) =>
123        headerKey === "toName" ? (
124          <Text numberOfLines={1}>{cell[headerKey]}</Text>
125        ) : (
126          cell[headerKey]
127        )
128      }
129    />
130  );
131};
132
133export default DataTableAdvanceExample;
134
135# DataListProps Type Documentation
136
137The `DataListProps` is a TypeScript type used to define the properties of a customizable data list component in React Native. This type includes several optional and required fields to handle data rendering, styling, and interactivity.
138
139## Properties
140
141| Property                       | Type                                            | Required | Description |
142|--------------------------------|-------------------------------------------------|----------|-------------|
143| **`data`**                    | `any[]`                                         | Yes      | The array of data items to display in the list. |
144| **`selected`**                | `any[]`                                         | Yes      | An array of currently selected items. |
145| **`setSelected`**             | `(item: any) => void`                           | Yes      | A callback function to update the selected items. |
146| **`expandedItems`**           | `any`                                           | Yes      | Tracks the currently expanded items in the list. |
147| **`setExpandedItems`**        | `(item: any) => void`                           | Yes      | A callback function to update the expanded items. |
148| **`expandAll`**               | `() => void`                                    | Yes      | Function to expand all items in the list. |
149| **`collapseAll`**             | `() => void`                                    | Yes      | Function to collapse all items in the list. |
150| **`containerStyle`**          | `TextStyle`                                     | No       | Style for the container of the list. |
151| **`titleStyles`**             | `TextStyle`                                     | No       | Style for the title text. |
152| **`subtitleStyles`**          | `TextStyle`                                     | No       | Style for subtitle text. |
153| **`buttonStyles`**            | `TextStyle`                                     | No       | Style for the button displayed in the list. |
154| **`anchorMenuPosition`**      | `{ x: number; y: number }`                      | No       | The position of the anchor menu. |
155| **`showButton`**              | `boolean`                                       | No       | Determines if a button should be displayed. |
156| **`buttonText`**              | `string`                                        | No       | Text to display on the button. |
157| **`dropdownProps`**           | `{ enabled?: boolean; showMenu?: boolean; menuType?: string; menuSubType?: string }` | No       | Configuration for dropdown behavior. |
158| **`showTextInsteadOfDropdown`** | `boolean`                                      | No       | If true, displays a text field instead of a dropdown. |
159| **`textInsteadOfDropdown`**   | `string`                                        | No       | The text to display when using text instead of a dropdown. |
160| **`textInsteadOfDropdownStyles`** | `TextStyle`                                   | No       | Style for the text displayed instead of the dropdown. |
161| **`showMediaIcon`**           | `boolean`                                       | No       | Determines if a media icon should be displayed. |
162| **`mediaIconName`**           | `string`                                        | No       | Name of the media icon. |
163| **`mediaIconSize`**           | `number`                                        | No       | Size of the media icon. |
164| **`mediaIconColor`**          | `string`                                        | No       | Color of the media icon. |
165| **`showAvatar`**              | `boolean`                                       | No       | Determines if an avatar should be displayed. |
166| **`showStatusIcon`**          | `boolean`                                       | No       | Determines if a status icon should be displayed. |
167| **`showSubtitle1`**           | `boolean`                                       | No       | Determines if subtitle 1 should be displayed. |
168| **`showSubtitle2`**           | `boolean`                                       | No       | Determines if subtitle 2 should be displayed. |
169| **`showSubtitle3`**           | `boolean`                                       | No       | Determines if subtitle 3 should be displayed. |
170| **`onEndReached`**            | `() => void`                                    | No       | Callback triggered when the end of the list is reached. |
171
172## Example Usage
173
174```tsx
175import { View } from "react-native";
176import React, { useState } from "react";
177import { DataList } from 'react-native-paper-extended';
178
179const videoData = [
180    {
181        id: '1',
182        title: 'Focus on Tasks',
183        description: 'Description of the meeting goes here.Description of the meeting...',
184        startTime: '1:30 PM',
185        endTime: '2:30 PM',
186        date: '08/11/2023',
187        participants: 'John Doe, Jane Smith',
188    },
189    {
190        id: '2',
191        title: "Today's Task Update",
192        description: 'Description of the meeting goes here.Description of the meeting...',
193        startTime: '1:30 PM',
194        endTime: '2:30 PM',
195        date: '08/11/2023',
196        participants: 'Alice Johnson, Bob Brown',
197    },
198    {
199        id: '3',
200        title: 'Working Week Review',
201        description: 'Description of the meeting goes here.Description of the meeting...',
202        startTime: '1:30 PM',
203        endTime: '2:30 PM',
204        date: '08/11/2023',
205        participants: 'Carlos Perez, Emily Davis',
206    },
207];
208
209  const [expandedItems, setExpandedItems] = useState({});
210    const [selected, setSelected] = useState([]);
211    const [activeModule, setActiveModule] = React.useState('video');
212
213    const handleExpandAll = () => {
214        
215        console.log('handleExpandAll called');
216        const newExpandedItems = {};
217        selected.forEach((itemId) => {
218          newExpandedItems[itemId] = true;
219        });
220        setExpandedItems(newExpandedItems);
221      };
222      
223      const handleCollapseAll = () => {
224        console.log('handleCollapseAll called');
225        const newExpandedItems = {};
226        selected.forEach((itemId) => {
227          newExpandedItems[itemId] = false;
228        });
229        setExpandedItems(newExpandedItems);
230      };
231
232    const handleModuleChange = (module) => {
233        setActiveModule(module);
234    }
235    const handleEndReached = () => {
236        alert('End of list reached!');
237      };
238      
239    
240    return (
241
242        <View>
243                <DataList
244                    data={videoData}
245                    containerStyle={{
246                        marginHorizontal: 10,
247                    }}
248                    anchorMenuPosition={
249                        {
250 
251                        }
252                    }
253                    selected={selected}
254                    setSelected={setSelected}
255                    expandedItems={expandedItems}
256                    setExpandedItems={setExpandedItems}
257                    expandAll={handleExpandAll}
258                    collapseAll={handleCollapseAll}                
259                    showButton={true}
260                    buttonText="Join"
261                    buttonStyles={{
262                        backgroundColor: '#734BD1',
263                        borderRadius: 20,
264                        height: 28,
265                        justifyContent: 'center',
266                        alignItems: 'center',
267                        paddingHorizontal: 14,
268                    }}
269                    titleStyles={{
270                        fontSize: 16,
271                        fontWeight: 'bold',
272                        color: '#734BD1',
273                        alignContent: 'center',
274                    }}
275                    subtitleStyles={{ fontSize: 12, color: '#868FA7' }}
276                    showCheckbox={true}
277                    showMediaIcon={false}
278                    showAvatar={false}
279                    showStatusIcon={true}
280                    showSubtitle1={false}
281                    showSubtitle2={false}
282                    showSubtitle3={true}
283                    dropdownProps={{
284                        enabled: true,
285                        showMenu: true,
286                    }}
287                    showTextInsteadOfDropdown={false}
288                    textInsteadOfDropdown={'HCP'}
289                    textInsteadOfDropdownStyles={{ color: '#868FA7', fontWeight: '600', fontSize: 12, position: 'relative', bottom: 8, marginRight: 8 }}
290                    onEndReached={handleEndReached}
291                    />
292                  </View>
293    )
294export default MyDataList;

This example demonstrates a simple usage of the DataListProps type to create a customizable data list component.