الجدول عبارة عن ترتيب ينظم المعلومات في صفوف وأعمدة. يتم استخدامه لتخزين وعرض البيانات بتنسيق منظم.

جدول التفاعل خفيف الوزن، وسريع، وقابل للتخصيص بالكامل (JSX، والقوالب، والحالة، والأنماط، وعمليات الاسترجاعات)، وDatagrid قابل للتمديد مصمم خصيصًا لـ React. يمكن التحكم فيه بالكامل عبر الدعائم الاختيارية وعمليات الاسترجاعات.

سمات

1. إنه خفيف الوزن حيث يبلغ 11 كيلو بايت (ويحتاج فقط إلى 2 كيلو بايت إضافية للأنماط).
2. إنه قابل للتخصيص بالكامل (JSX، القوالب، الحالة، الأنماط، عمليات الاسترجاعات).
3. يمكن التحكم فيه بالكامل عبر الدعائم الاختيارية وعمليات الاسترجاعات.
4. يحتوي على ترقيم الصفحات من جانب العميل والخادم.
5. لديها مرشحات.
6. التمحور والتجميع
7. الحد الأدنى من التصميم وموضوعه بسهولة

تثبيت

دعونا ننشئ أ رد فعل التطبيق باستخدام الأمر التالي.

 $ npx create-react-app myreactapp  

بعد ذلك، نحن بحاجة إلى تثبيت رد الفعل الجدول . يمكننا تثبيت جدول التفاعل عبر أمر npm، الموضح أدناه.

 $ npm install react-table  

بمجرد أن نقوم بتثبيت جدول التفاعل، نحتاج إلى ذلك يستورد جدول التفاعل في مكون التفاعل. للقيام بذلك، افتح src/App.js الملف وأضف المقتطف التالي.

 import ReactTable from 'react-table';  

لنفترض أن لدينا بيانات يجب تقديمها باستخدام جدول التفاعل.

 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 ( )  

الآن، لدينا src/App.js يبدو الملف كما هو موضح أدناه.

 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;  

انتاج |

عندما نقوم بتنفيذ تطبيق React، سوف نحصل على الإخراج على النحو التالي.

الآن، قم بتغيير القائمة المنسدلة للصفوف، وسوف نحصل على الإخراج على النحو التالي.