CODEWITHSUNDEEP
react-nativereact-native-listview
Parameshwar Ande
Parameshwar Ande

Reputation: 817

Data Table for react native

Can somebody please suggest any data table component for react native which can add rows dynamically and having editable cells. I am done searching in google. Thanks in advance.

Upvotes: 10

Views: 12251

Answers (2)

Muhammad Rafeh Atique
Muhammad Rafeh Atique

Reputation: 872

I introduced my own module for this feature from which you will be able to select row easily and much more.

How it's look like enter image description here enter image description here

You can use this component like this below

import DataTable, {COL_TYPES} from 'react-native-datatable-component';
    
const SomeCom = () => {

     //You can pass COL_TYPES.CHECK_BOX Column's value in true/false, by default it will be false means checkBox will be uncheck!
     
     const data = [
           { menu: 'Chicken Biryani', select: false }, //If user select this row then this whole object will return to you with select true in this case
           { menu: 'Chiken koofta', select: true },
           { menu: 'Chicken sharwma', select: false }
     ]
     
     const nameOfCols = ['menu', 'select'];
     
     return(
          <DataTable
               onRowSelect={(row) => {console.log('ROW => ',row)}}
               data={data}
               colNames={nameOfCols}
               colSettings={[{name: 'select', type: COL_TYPES.CHECK_BOX}]}
          />
     )
}

export default SomeCom;

React Native DataTable Component

Upvotes: 3

Sangeetha DH
Sangeetha DH

Reputation: 23

Please find the package available for React Native data table

https://github.com/sussol/react-native-data-table

A React Native data table written purely in JSX with React. ## Installation npm install --save react-native-data-table ## Usage react-native-data-table provides a number of components for constructing a table through composition.

Upvotes: 2

Related Questions