טבלה היא סידור המארגן מידע לשורות ועמודות. הוא משמש לאחסון ולהצגה של נתונים בפורמט מובנה.

ה-react-table הוא Datagrid קל משקל, מהיר, הניתן להתאמה אישית מלאה (JSX, תבניות, מצב, סגנונות, התקשרויות) וניתן להרחבה שנבנה עבור React. זה ניתן לשליטה מלאה באמצעות אביזרים אופציונליים והתקשרויות חוזרות.

מאפיינים

1. הוא קל משקל ב-11kb (וצריך רק 2kb יותר עבור סגנונות).
2. זה ניתן להתאמה אישית מלאה (JSX, תבניות, מצב, סגנונות, התקשרויות).
3. זה ניתן לשליטה מלאה באמצעות אביזרים אופציונליים והתקשרויות חוזרות.
4. יש לו עימוד בצד הלקוח ובצד השרת.
5. יש לו פילטרים.
6. Pivoting & Aggregation
7. עיצוב מינימלי וניתן בקלות לעיצוב

הַתקָנָה

תן לנו ליצור א אפליקציית React באמצעות הפקודה הבאה.

 $ npx create-react-app myreactapp  

לאחר מכן, עלינו להתקין טבלת תגובה . אנו יכולים להתקין react-table באמצעות פקודת 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' }]  

בתוך שיטת הרינדור, אנחנו צריכים לאגד את הנתונים האלה עם react-table ולאחר מכן להחזיר את react-table.

 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, נקבל את הפלט כמפורט להלן.

כעת, שנה את התפריט הנפתח של השורות, נקבל את הפלט כמו למטה.