Tablo, bilgileri satırlar ve sütunlar halinde düzenleyen bir düzenlemedir. Verileri yapılandırılmış bir biçimde depolamak ve görüntülemek için kullanılır.

Tepki tablosu, React için oluşturulmuş hafif, hızlı, tamamen özelleştirilebilir (JSX, şablonlar, durum, stiller, geri aramalar) ve genişletilebilir bir Datagrid'dir. İsteğe bağlı donanımlar ve geri aramalar aracılığıyla tamamen kontrol edilebilir.

Özellikler

1. 11kb ile hafiftir (ve stiller için yalnızca 2kb daha fazlasına ihtiyaç vardır).
2. Tamamen özelleştirilebilir (JSX, şablonlar, durum, stiller, geri aramalar).
3. İsteğe bağlı donanımlar ve geri aramalar aracılığıyla tamamen kontrol edilebilir.
4. İstemci tarafı ve Sunucu tarafı sayfalandırması vardır.
5. Filtreleri var.
6. Döndürme ve Toplama
7. Minimal tasarım ve kolayca temalandırılabilir

Kurulum

Bir tane oluşturalım Uygulamaya tepki ver aşağıdaki komutu kullanarak.

 $ npx create-react-app myreactapp  

Daha sonra yüklememiz gerekiyor tepki tablosu . Aşağıda verilen npm komutu ile react-table kurulumunu yapabiliriz.

 $ npm install react-table  

Tepki tablosunu kurduktan sonra şunu yapmamız gerekiyor: içe aktarmak reaksiyon tablosunu reaksiyon bileşenine aktarın. Bunu yapmak için açın src/App.js dosyalayın ve aşağıdaki pasajı ekleyin.

 import ReactTable from 'react-table';  

Reaksiyon tablosu kullanılarak işlenmesi gereken verilerimiz olduğunu varsayalım.

 const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }]  

Verilerin yanı sıra şunları da belirtmemiz gerekir: sütun bilgisi ile sütun özellikleri .

 const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }]  

Render yönteminin içinde, bu verileri tepki tablosuyla bağlamamız ve ardından tepki tablosunu döndürmemiz gerekir.

 return ( )  

Şimdi, bizim src/App.js dosya aşağıdaki gibi görünüyor.

 import React, { Component } from 'react'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; class App extends Component { render() { const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }] const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }] return ( ) } } export default App;  

Çıktı

React uygulamasını çalıştırdığımızda aşağıdaki gibi çıktı alacağız.

Şimdi satırların açılır menüsünü değiştirin, çıktıyı aşağıdaki gibi alacağız.