إصلاح الأعمدة في جداول React: دليل شامل

تُعدّ React Table أداةً قوية لعرض البيانات الجدولية، لكن إدارة الأعمدة الثابتة قد تكون صعبة. يوفر هذا الدليل نهجًا واضحًا محددًا للإصدار للحفاظ على الأعمدة ثابتة أثناء التمرير أفقيًا.

محتويات

• استخدام react-table-sticky لـ React Table الإصدار 7 وما فوق
• استخدام react-table-hoc-fixed-columns لـ React Table الإصدار 6 وما دون

استخدام react-table-sticky لـ React Table الإصدار 7 وما فوق

أدخل React Table الإصدار 7 تغييرات كبيرة في واجهة برمجة التطبيقات. بالنسبة للأعمدة الثابتة، يوفر react-table-sticky حلاً مبسطًا.

1. التثبيت

npm install react-table-sticky
# أو
yarn add react-table-sticky

2. التنفيذ

يوضح هذا المثال تثبيت عمود “ID” على اليسار:

import React from 'react';
import { useTable, useSticky } from 'react-table';
import { FixedColumnsTable } from 'react-table-sticky';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'London' },
  // ... المزيد من البيانات
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'الاسم', accessor: 'name' },
  { Header: 'العمر', accessor: 'age' },
  { Header: 'المدينة', accessor: 'city' },
];

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSticky);

  return (
    <FixedColumnsTable {...getTableProps()}>
      <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, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </FixedColumnsTable>
  );
}

export default MyTable;

تجعل خاصية sticky: 'left' في تعريف العمود عمود “ID” ثابتًا. استخدم sticky: 'right' للأعمدة الثابتة على الجانب الأيمن.

استخدام react-table-hoc-fixed-columns لـ React Table الإصدار 6 وما دون

بالنسبة لإصدارات React Table الأقدم، يوفر react-table-hoc-fixed-columns حلاً باستخدام Higher-Order Components (HOCs).

1. التثبيت

npm install react-table-hoc-fixed-columns
# أو
yarn add react-table-hoc-fixed-columns

2. التنفيذ

يعتمد التنفيذ على إصدار React Table الخاص بك. راجع وثائق المكتبة للحصول على إرشادات مفصلة. يتضمن النهج العام لفّ مكون الجدول الخاص بك باستخدام HOC fixedColumns. مثال مبسط (راجع وثائق المكتبة للحصول على تفاصيل محددة للإصدار):

import React from 'react';
import { useTable } from 'react-table';
import { fixedColumns } from 'react-table-hoc-fixed-columns';

// ... تعريف البيانات والأعمدة ...

const MyTable = fixedColumns(({ getTableProps, ...rest }) => (
  <YourOriginalTableComponent {...rest} {...getTableProps()} />
));

// ... بقية المكون الخاص بك

راجع دائمًا الوثائق الرسمية لـ react-table-sticky و react-table-hoc-fixed-columns للحصول على المعلومات الأكثر دقة وتحديثًا.