DataTable

Data tables allow displaying sets of data.

How to use

import React from "react";
import { DataTable } from "@gyri/native-ui-components";

const MyComponent = () => {
    const [items] = React.useState([
        {
            key: 1,
            name: 'Cupcake',
            calories: 356,
            fat: 16,
        },
        {
            key: 2,
            name: 'Eclair',
            calories: 262,
            fat: 16,
        },
        {
            key: 3,
            name: 'Frozen yogurt',
            calories: 159,
            fat: 6,
        },
        {
            key: 4,
            name: 'Gingerbread',
            calories: 305,
            fat: 3.7,
        },
    ]);

    return (
        <DataTable>
            <DataTable.Header>
                <DataTable.Title>Dessert</DataTable.Title>
                <DataTable.Title numeric>Calories</DataTable.Title>
                <DataTable.Title numeric>Fat</DataTable.Title>
            </DataTable.Header>

            {items.map((item) => (
              <DataTable.Row key={item.key}>
                  <DataTable.Cell>{item.name}</DataTable.Cell>
                  <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
                  <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
              </DataTable.Row>
            ))}
        </DataTable>
    );
};

export default MyComponent;

#	Name	Data type	Default value	Values	Description
1	numeric	boolean			Align the text to the right.
2	onPress	function	"		Function to execute on press.
3	textStyle				Text content style of the DataTableTitle.
4	className	string	"		It defined external CSS stylesheet.
5	style	object			Custom style object

For more details https://callstack.github.io/react-native-paper/docs/components/DataTable