ساخت جداول در React: با react-table شروع کنید

React Table یک کتابخانه بدون سر برای ساخت شبکه های داده قدرتمند و قابل تنظیم در React است. با یکی از محبوب ترین جدول سازهای جاوا اسکریپت شروع کنید.

• react-table چیست؟
• برنامه را اجرا کنید
• طراحی
• مرتب‌سازی سمت مشتری
• مرتب‌سازی سمت سرور
• فیلتر کردن
• صفحه بندی
• نتیجه‌گیری

نمایش داده ها در جداول یکی از نیازهای پایدار رابط های کاربر است. React Table به عنوان یک کتابخانه جدول “تقریبا بدون سر” برای React توصیف می شود. این برنامه بر ارائه تمام جنبه های داده در قالبی مناسب تمرکز می کند و استایل و اجزاء را به شما واگذار می کند. این رویکرد ساخت شبکه های داده قدرتمند و سبک سازی آنها را در صورت نیاز آسان می کند. در این مقاله، ما از کتابخانه react-table برای ساخت جدولی با استایل، فیلتر کردن، مرتب‌سازی و صفحه‌بندی استفاده می‌کنیم.

react-table چیست؟

جدیدترین نسخه کتابخانه react-table بخشی از TanStack، یک پروژه بزرگتر که مؤلفه ها را به روشی چارچوب-آگنوستیک ارائه می کند. بر این اساس، react-table می تواند اجزای جدول را برای چندین فریمورک هدایت کند: React، Solid، Vue، Svelte و برنامه هایی که با استفاده از TypeScript یا JavaScript ساخته شده اند. مثال‌های ما بر روی ساخت جدول در React تمرکز دارند.

برای ارائه داده‌ها برای جدول، از یک نقطه پایانی میزبان محلی استفاده می‌کنیم که داده‌های ارزهای دیجیتال، از جمله مهر زمانی، قیمت، حجم و سقف بازار ارزهای مختلف را ارائه می‌دهد. برای مثال، داده‌های یک ردیف مانند فهرست ۱ خواهد بود.

{ cryptocurrency: 'solana',
  timestamp: 1586563521174,
  price: 0.9576058280146803,
  volume: 92672667.43447028,
  marketCap: 7827651.892659198 }

نقطه پایانی که ما استفاده می کنیم localhost:3001/crypto-data است.

برای ایجاد یک پروژه جدید، از npx create-react-app iw-react-table استفاده کنید. (این دستورالعمل فرض می‌کند که Node/NPM را نصب کرده‌اید .) سپس، می‌توانید cd را وارد فهرست راهنمای /iw-react-table جدید کنید.

ما با ایجاد یک جزء جدید در src/CryptoTable.js با محتوای فهرست ۲، با یک جدول ساده برای نمایش این داده ها شروع می کنیم.

import React, { useState, useEffect, useMemo } from 'react';
import { useTable } from 'react-table';

const CryptoTable = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
fetch("http://35.188.145.46:3001/crypto-data")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []);

  // Define columns for the table
  const rawColumns = [
    { Header: 'Timestamp', accessor: 'timestamp', },
    { Header: 'Cryptocurrency', accessor: 'cryptocurrency', },
    { Header: 'Price', accessor: 'price', },
    { Header: 'Volume', accessor: 'volume', },
    { Header: 'Market Cap', accessor: 'marketcap',
    },
  ];
  const columns = useMemo(() => rawColumns, []);

  // Create a table instance
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  });

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <table {...getTableProps()} className="crypto-table">
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default CryptoTable;

برخی از این موارد React معمولی است: ما دو متغیر حالت با useState: data برای نگهداری خود داده‌ها و loading برای کنترل نمایش متن بارگیری ایجاد می‌کنیم. ما useEffect را برای برقراری تماس پشتیبان با fetch فرا می‌خوانیم.

سپس، ستون های جدول را ایجاد می کنیم. تنظیم ستون اصلی به «هدر» و «دستیار» نیاز دارد که برچسب ستون و کلیدی است که برای دسترسی به فیلد روی اشیاء ردیف استفاده می‌شود. پس از آن، ما قلاب useMemo را در ستون ها فراخوانی می کنیم (در مورد useMemo در اینجا بیشتر بیاموزید). حافظه‌گذاری از اجرای مجدد فراخوان‌های دسترسی برای هر ردیف جلوگیری می‌کند. بدون ذخیره سازی، React ممکن است متوجه شود که برنامه هنگام بارگیری مجموعه داده های بزرگ به یک حلقه بی نهایت رفته است.

بعد، جدول را با قلاب useTable ایجاد می کنیم که از react-table می آید. این قلاب تعریف columns و خود داده را می پذیرد. با آن، اطلاعات کافی برای ساخت یک شبکه دارد. قلاب useTable یک شی را با تمام خصوصیات مورد نیاز برای پیکربندی نشانه گذاری جدول برمی گرداند. اینها به روش‌ها و اجزای اجزای خود، مانند getTableProps و getTableBodyProps، که سپس در نشانه‌گذاری استفاده می‌کنیم، تخریب می‌شوند. این نسبتاً ساده است، اگرچه متوجه خواهید شد که ما در واقع از آرایه های ردیف و ستون در JSX برای ارائه th، tr و td استفاده می کنیم. عناصر.

این جایی است که ما شروع به مشارکت بیشتر در ساخت جدول واقعی نسبت به یک کتابخانه مؤلفه محور می کنیم. با این حال، می بینید که آنقدرها هم پیچیده نیست و ما به صورت عملی به قسمت های داخلی جدول دسترسی پیدا می کنیم. وقتی صحبت از سفارشی‌سازی قاب لبه به میان می‌آید، این کنترل ریز می‌تواند بسیار مفید باشد.

نتایج کد فعلی ما نمایی شبیه آنچه در شکل ۱ نشان داده شده است به ما می دهد. (توجه داشته باشید که زمان خوبی برای خرید مقداری ارز دیجیتال BTC است.)

شکل ۱. یک جدول اساسی که با React و react-table ساخته شده است.

برنامه را اجرا کنید

برای استفاده از مؤلفه جدید CryptoTable، می‌توانید src/App.js خود را به‌روزرسانی کنید تا شبیه فهرست ۳ باشد.

import React from 'react';
import './App.css';
import CryptoTable from './CryptoTable1';

function App() {
  return (
    <div className="App">
      <h1>Crypto Data</h1>
      <CryptoTable />
    </div>
  );
}

export default App;

برنامه را با: $ /iw-react-table/npm start اجرا کنید. برای بررسی نتایج به localhost:3000 مراجعه کنید.

طراحی

اکنون، بیایید کمی سبک اضافه کنیم. CSS مدرن رفتن از ظاهر ابتدایی شکل ۱ به چیزی مناسب را آسان می کند. فهرست ۴ شکل ساده جدول را نشان می دهد.

crypto-table {
  width: 100%;
}
.crypto-table th,
.crypto-table td {
  border: 1px solid black;
  padding: 5px;
}
.crypto-table th {
  background-color: #eee;
}
.crypto-table {
  border-collapse: collapse;
  border: 1px solid #ccc;
  font-family: sans-serif;
  font-size: 14px;
}
.crypto-table th,
.crypto-table td {
  border: 1px solid #ccc;
  padding: 10px;
}
.crypto-table th {
  background-color: #eee;
  text-align: left;
}
.crypto-table td {
  text-align: right;
}
.crypto-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.crypto-table tr:hover {
  background-color: #ddd;
}

این به ما ظاهری مانند جدول در شکل ۲ می دهد.

شکل ۲. جدول اصلی React با سبکی.

مرتب‌سازی سمت مشتری

اکنون اجازه دهید عملکرد مرتب‌سازی را که react-table برای ما در حافظه مدیریت می‌کند، اضافه می‌کنیم. در مورد ما، ما در نهایت مرتب‌سازی سمت سرور را می‌خواهیم، ​​اما این مثال به شما اجازه می‌دهد تا ببینید که انجام مرتب‌سازی سمت سرویس گیرنده چقدر آسان است. برای افزودن مرتب‌سازی سمت مشتری، این مراحل را دنبال کنید:

• وارد کردن useSort از react-table
• آن را مانند این به جدول اضافه کنید: useTable({ columns, data }, useSortBy);
• نشانه‌گذاری سرصفحه جدول را همانطور که در فهرست ۵ نشان داده شده است تغییر دهید.

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => (
        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
          {column.render('Header')}
          <span>
            {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
          </span>
        </th>
      ))}
    </tr>
  ))}
</thead>

اکنون وقتی روی سرصفحه کلیک می‌کنید، روی آن ستون مرتب می‌شود و نماد مناسب را نمایش می‌دهد.

مرتب‌سازی سمت سرور

برای مرحله بعدی، بیایید مرتب سازی را از انتهای پشتی استفاده کنیم. API ما پارامترهای sortBy و sortOrder را در URL می‌پذیرد، بنابراین اولین قدم اضافه کردن حالت sortBy و sortOrder است. قلاب ها (به یاد داشته باشید مرتب‌سازی سمت سرویس گیرنده را حذف کنید.) سپس از آن متغیرها در URL استفاده کنید.

fetch(`http://localhost:3001/crypto-data?sortBy=${sortBy}&sortOrder=${sortOrder}`)

همچنین، باید sortBy و sortOrder را به عنوان متغیرهای وابسته در useEffect تنظیم کنیم که داده‌ها را واکشی می‌کند. این کار را با اضافه کردن آنها به آرایه در آرگومان دوم useEffect انجام دهید.

اکنون، همانطور که در فهرست ۶ نشان داده شده است، عملکردی را اضافه کنید تا زمانی که کاربر روی یک سرصفحه کلیک می‌کند، عملکرد را مدیریت کند. (برای اختصار از نماد هدر اینجا صرفنظر کردم.)

const handleSortClick = (column) => {
  if (column.sortable) {
    // Determine the new sort order
    const newSortOrder = sortBy === column.id && sortOrder === 'asc' ? 'desc' : 'asc';
    setSortBy(column.id);
    setSortOrder(newSortOrder);
  }
};

برای مدیریت کلیک، می‌توانید کنترل‌کننده رویداد زیر را به عنصر

اضافه کنید: onClick={() => handleSortClick(ستون)}. توجه داشته باشید که column.sortable را علامت می زنیم، که می توانیم هنگام ایجاد ستون ها، آن را بر روی ستون ها تنظیم کنیم، به عنوان مثال:

{ Header: 'Timestamp', accessor: 'timestamp', sortBy: 'timestamp', sortable: true }

اکنون هر زمان که روی سرصفحه کلیک می‌کنید، جدول با ستون مناسب مرتب‌شده بر اساس باطن بارگیری می‌شود.

فیلتر کردن

ما می توانیم از یک فرآیند مشابه برای مدیریت فیلتر استفاده کنیم. فرض کنید می‌خواهیم ارز دیجیتال را فیلتر کنیم. ما می توانیم یک منوی کشویی اضافه کنیم و آن را از طریق یک متغیر حالت (selectedCrypto) روی URL اعمال کنیم. اکنون تماس fetch به این شکل خواهد بود:

fetch(`http://35.188.145.46:3001/crypto-data?sortBy=${sortBy}&sortOrder=${sortOrder}&cryptoCurrency=${selectedCrypto}`)

به خاطر داشته باشید که selectedCrypto را به لیست متغیرهای وابسته برای useEffect اضافه کنید.

می‌توانیم یک کشویی همانطور که در فهرست ۷ نشان داده شده است اضافه کنیم.

<select value={selectedCrypto} onChange={handleCryptoChange}>
  <option value="bitcoin">Bitcoin</option>
  <option value="ethereum">Ethereum</option>
  <option value="solana">Solana</option>
</select>

و تنها چیزی که باقی می‌ماند رسیدگی به رویداد تغییر است، همانطور که در فهرست ۸ نشان داده شده است. 

const handleCryptoChange = (event) => {
    setSelectedCrypto(event.target.value);
  };

اکنون، وقتی ارز انتخاب می‌شود، جدول با مجموعه موجود در URL دوباره ارائه می‌شود.

صفحه بندی

صفحه‌بندی را می‌توان روی کلاینت یا سرور نیز انجام داد. فرآیند صفحه‌بندی در سرور بسیار شبیه مرتب‌سازی و فیلتر کردن است، بنابراین بیایید یک مثال سمت کلاینت را ببینیم. ما چیزی شبیه به آنچه در شکل ۳ نشان داده شده است، با کنترل هایی برای حرکت به جلو و عقب، تنظیم اندازه صفحه و پرش به یک صفحه، همراه با نمایش تعداد صفحات وجود دارد.

شکل ۳. صفحه بندی سمت کلاینت با جدول react.

برای رسیدن به این هدف، باید:

• قلاب usePagination را وارد کنید.
• از قلاب جدید با نمونه جدول استفاده کنید و عملکردهای کنترل صفحه بندی را در معرض دید قرار دهید.

دستور وارد کردن برای قلاب usePagination این است: import { useTable, usePagination } از 'react-table';. فهرست ۹ قلاب و عملکردهای جدید برای کنترل صفحه بندی را نشان می دهد.

const {
    getTableProps, getTableBodyProps, headerGroups, page, // Get the current page of data
           // Add pagination functions and variables
    previousPage,
    nextPage,
    canPreviousPage,
    canNextPage,
    gotoPage, // Add gotoPage function
    pageCount, // Add pageCount variable
    pageOptions, // Add pageOptions variable
    setPageSize, // Add setPageSize function
    prepareRow, state: { pageIndex, pageSize }, // Current page index and page size
  } = useTable({
    columns,
    data,
    initialState: { pageIndex: 0, pageSize: 10 }, // Set the initial page index and page size
  },
    usePagination // Add the usePagination hook
  );

نشانه‌گذاری را که از کنترل‌ها استفاده می‌کند، همانطور که در فهرست ۱۰ نشان داده شده است، اضافه کنید.

<div className="pagination">
  <button onClick={() => gotoPage(0)} disabled={pageIndex === 0}> {'<<'} </button>
  <button onClick={() => previousPage()} disabled={!canPreviousPage}>{'<'}</button>
  <button onClick={() => nextPage()} disabled={!canNextPage}>{'>'}</button>
  <button onClick={() => gotoPage(pageCount - 1)} disabled={pageIndex === pageCount - 1}>
    {'>>'} </button>
  <span> Page{' '} <strong> {pageIndex + 1} of {pageOptions.length} </strong>{' '} </span>
  <span> | Go to page:{' '} <input type="number" defaultValue={pageIndex + 1} onChange={(e) => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0;
        gotoPage(page);
      }} />
  </span>
  <select value={pageSize} onChange={(e) => { setPageSize(Number(e.target.value)); }} >
    {[۱۰, ۲۰, ۳۰, ۴۰, ۵۰].map((pageSize) => (
      <option key={pageSize} value={pageSize}>
        Show {pageSize}
      </option>
    ))}
  </select>
</div>

در اصل، ما یک فرم برای تعامل با توابع صفحه مانند gotoPage و canNextPage می‌سازیم. اگر این را امتحان کنید، متوجه می‌شوید که react-table قادر است مجموعه‌های داده بزرگ را با پاسخ‌گویی خوب مدیریت کند.

نتیجه گیری

این مقاله برخی از ویژگی های کلیدی react-table را نشان داده است. کتابخانه خیلی چیزهای بیشتری را می تواند مدیریت کند. برای مثال، در اینجا نحوه انجام اسکرول بی نهایت با مجازی آورده شده است. جداول، ردیف‌های قابل گسترش، و موارد دیگر.

اگرچه react-table واضح است که به خوبی فکر شده و توانمند است، متقاعد کننده ترین چیز در مورد آن این است که رندر و رویداد کردن را آسان می کند. این بدان معناست که تقریباً هر کاری که شما نیاز دارید انجام دهید بدون حفاری در داخل React امکان پذیر است. جای تعجب نیست که این کتابخانه با بیش از میلیون بارگیری در هفته از NPM بسیار محبوب است.

کد کامل نمونه‌ها را در مخزن این مقاله پیدا خواهید کرد. .