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.
- 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-extendedfor UI components.
| 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. |
|
import React, { useState } from "react";
import {
DataTableAdvance,
Checkbox,
RadioButton,
} from "react-native-paper-extended";
import { View, Text, TouchableOpacity } from "react-native";
import moment from "moment";
const DataTableAdvanceExample = () => {
const StatusFilter = ({ close }) => {
const [status, setStatus] = useState("");
const handlePress = (value) => setStatus(value);
return (
<View>
{["Incoming", "Outgoing", "Missed", "Bridge Call", "Voicemail"].map(
(label) => (
<Checkbox.Item
key={label}
label={label}
status={status === label ? "checked" : "unchecked"}
onPress={() => handlePress(label)}
/>
)
)}
<View style={{ flexDirection: "row", marginTop: 12 }}>
<TouchableOpacity
onPress={close}
style={{
flex: 1,
backgroundColor: "#734BD1",
borderRadius: 20,
padding: 8,
}}
>
<Text style={{ color: "white", textAlign: "center" }}>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
const ContactFilter = ({ close }) => {
const [contactType, setContactType] = useState([]);
const [favorite, setFavorite] = useState("");
const [status, setStatus] = useState("");
return (
<View>
<Text>Contact Type</Text>
{["HCP", "Staff", "Unknown"].map((type) => (
<Checkbox.Item
key={type}
label={type}
status={contactType.includes(type) ? "checked" : "unchecked"}
onPress={() =>
setContactType((prev) =>
prev.includes(type)
? prev.filter((t) => t !== type)
: [...prev, type]
)
}
/>
))}
<Text>Favorite</Text>
<RadioButton.Group onValueChange={setFavorite} value={favorite}>
{["Yes", "No"].map((value) => (
<RadioButton.Item key={value} label={value} value={value} />
))}
</RadioButton.Group>
<Text>Status</Text>
<RadioButton.Group onValueChange={setStatus} value={status}>
{["Opted In", "Opted Out"].map((value) => (
<RadioButton.Item key={value} label={value} value={value} />
))}
</RadioButton.Group>
<View style={{ flexDirection: "row", marginTop: 12 }}>
<TouchableOpacity
onPress={close}
style={{
flex: 1,
backgroundColor: "#734BD1",
borderRadius: 20,
padding: 8,
}}
>
<Text style={{ color: "white", textAlign: "center" }}>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
return (
<DataTableAdvance
data={[
{
id: 1,
name: "Sheena David",
status: "incoming",
datetime: "2024-12-04T12:14:22.813Z",
callDuration: "20 mins",
},
{
id: 2,
name: "Satyaki",
status: "outcoming",
datetime: "2024-12-05T12:14:22.813Z",
callDuration: "20 mins",
},
]}
numberOfItemsPerPageList={[5, 10, 20]}
headers={[
{ key: "name", title: "Contact Name", sort: true, filter: true },
{ key: "status", title: "Type", sort: true, filter: true },
{ key: "datetime", title: "Date & Time", sort: true },
{ key: "callDuration", title: "Duration", sort: true },
]}
onBulkSelect={(selected) => console.log(selected)}
renderCellContent={(cell, headerKey) =>
headerKey === "toName" ? (
<Text numberOfLines={1}>{cell[headerKey]}</Text>
) : (
cell[headerKey]
)
}
/>
);
};
export default DataTableAdvanceExample;
# DataListProps Type Documentation
The `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.
## Properties
| Property | Type | Required | Description |
|--------------------------------|-------------------------------------------------|----------|-------------|
| **`data`** | `any[]` | Yes | The array of data items to display in the list. |
| **`selected`** | `any[]` | Yes | An array of currently selected items. |
| **`setSelected`** | `(item: any) => void` | Yes | A callback function to update the selected items. |
| **`expandedItems`** | `any` | Yes | Tracks the currently expanded items in the list. |
| **`setExpandedItems`** | `(item: any) => void` | Yes | A callback function to update the expanded items. |
| **`expandAll`** | `() => void` | Yes | Function to expand all items in the list. |
| **`collapseAll`** | `() => void` | Yes | Function to collapse all items in the list. |
| **`containerStyle`** | `TextStyle` | No | Style for the container of the list. |
| **`titleStyles`** | `TextStyle` | No | Style for the title text. |
| **`subtitleStyles`** | `TextStyle` | No | Style for subtitle text. |
| **`buttonStyles`** | `TextStyle` | No | Style for the button displayed in the list. |
| **`anchorMenuPosition`** | `{ x: number; y: number }` | No | The position of the anchor menu. |
| **`showButton`** | `boolean` | No | Determines if a button should be displayed. |
| **`buttonText`** | `string` | No | Text to display on the button. |
| **`dropdownProps`** | `{ enabled?: boolean; showMenu?: boolean; menuType?: string; menuSubType?: string }` | No | Configuration for dropdown behavior. |
| **`showTextInsteadOfDropdown`** | `boolean` | No | If true, displays a text field instead of a dropdown. |
| **`textInsteadOfDropdown`** | `string` | No | The text to display when using text instead of a dropdown. |
| **`textInsteadOfDropdownStyles`** | `TextStyle` | No | Style for the text displayed instead of the dropdown. |
| **`showMediaIcon`** | `boolean` | No | Determines if a media icon should be displayed. |
| **`mediaIconName`** | `string` | No | Name of the media icon. |
| **`mediaIconSize`** | `number` | No | Size of the media icon. |
| **`mediaIconColor`** | `string` | No | Color of the media icon. |
| **`showAvatar`** | `boolean` | No | Determines if an avatar should be displayed. |
| **`showStatusIcon`** | `boolean` | No | Determines if a status icon should be displayed. |
| **`showSubtitle1`** | `boolean` | No | Determines if subtitle 1 should be displayed. |
| **`showSubtitle2`** | `boolean` | No | Determines if subtitle 2 should be displayed. |
| **`showSubtitle3`** | `boolean` | No | Determines if subtitle 3 should be displayed. |
| **`onEndReached`** | `() => void` | No | Callback triggered when the end of the list is reached. |
## Example Usage
```tsx
import { View } from "react-native";
import React, { useState } from "react";
import { DataList } from 'react-native-paper-extended';
const videoData = [
{
id: '1',
title: 'Focus on Tasks',
description: 'Description of the meeting goes here.Description of the meeting...',
startTime: '1:30 PM',
endTime: '2:30 PM',
date: '08/11/2023',
participants: 'John Doe, Jane Smith',
},
{
id: '2',
title: "Today's Task Update",
description: 'Description of the meeting goes here.Description of the meeting...',
startTime: '1:30 PM',
endTime: '2:30 PM',
date: '08/11/2023',
participants: 'Alice Johnson, Bob Brown',
},
{
id: '3',
title: 'Working Week Review',
description: 'Description of the meeting goes here.Description of the meeting...',
startTime: '1:30 PM',
endTime: '2:30 PM',
date: '08/11/2023',
participants: 'Carlos Perez, Emily Davis',
},
];
const [expandedItems, setExpandedItems] = useState({});
const [selected, setSelected] = useState([]);
const [activeModule, setActiveModule] = React.useState('video');
const handleExpandAll = () => {
console.log('handleExpandAll called');
const newExpandedItems = {};
selected.forEach((itemId) => {
newExpandedItems[itemId] = true;
});
setExpandedItems(newExpandedItems);
};
const handleCollapseAll = () => {
console.log('handleCollapseAll called');
const newExpandedItems = {};
selected.forEach((itemId) => {
newExpandedItems[itemId] = false;
});
setExpandedItems(newExpandedItems);
};
const handleModuleChange = (module) => {
setActiveModule(module);
}
const handleEndReached = () => {
alert('End of list reached!');
};
return (
<View>
<DataList
data={videoData}
containerStyle={{
marginHorizontal: 10,
}}
anchorMenuPosition={
{
}
}
selected={selected}
setSelected={setSelected}
expandedItems={expandedItems}
setExpandedItems={setExpandedItems}
expandAll={handleExpandAll}
collapseAll={handleCollapseAll}
showButton={true}
buttonText="Join"
buttonStyles={{
backgroundColor: '#734BD1',
borderRadius: 20,
height: 28,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 14,
}}
titleStyles={{
fontSize: 16,
fontWeight: 'bold',
color: '#734BD1',
alignContent: 'center',
}}
subtitleStyles={{ fontSize: 12, color: '#868FA7' }}
showCheckbox={true}
showMediaIcon={false}
showAvatar={false}
showStatusIcon={true}
showSubtitle1={false}
showSubtitle2={false}
showSubtitle3={true}
dropdownProps={{
enabled: true,
showMenu: true,
}}
showTextInsteadOfDropdown={false}
textInsteadOfDropdown={'HCP'}
textInsteadOfDropdownStyles={{ color: '#868FA7', fontWeight: '600', fontSize: 12, position: 'relative', bottom: 8, marginRight: 8 }}
onEndReached={handleEndReached}
/>
</View>
)
export default MyDataList;This example demonstrates a simple usage of the DataListProps type to create a customizable data list component.