React Tablolarında Sütunları Düzeltme: Kapsamlı Bir Kılavuz

React Table, tablo verilerini görüntülemek için güçlü bir araçtır, ancak sabit sütunları yönetmek zor olabilir. Bu kılavuz, yatay kaydırma sırasında sütunları sabit tutmak için sürüm özel bir yaklaşım sunmaktadır.

İçindekiler

• React Table v7 ve Üstü için react-table-sticky Kullanımı
• React Table v6 ve Altı için react-table-hoc-fixed-columns Kullanımı

React Table v7 ve Üstü için react-table-sticky Kullanımı

React Table v7 önemli API değişiklikleri getirdi. Sabit sütunlar için react-table-sticky akıcı bir çözüm sunmaktadır.

1. Kurulum

npm install react-table-sticky
# veya
yarn add react-table-sticky

2. Uygulama

Bu örnek, ‘ID’ sütununu sola sabitlemeyi göstermektedir:

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' },
  // ... daha fazla veri
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Ad', accessor: 'name' },
  { Header: 'Yaş', accessor: 'age' },
  { Header: 'Şehir', 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;

Sütun tanımındaki sticky: 'left' özelliği, ‘ID’ sütununu sabitler. Sağ taraftaki sabit sütunlar için sticky: 'right' kullanın.

React Table v6 ve Altı için react-table-hoc-fixed-columns Kullanımı

Eski React Table sürümleri için react-table-hoc-fixed-columns, Yüksek Dereceli Bileşenler (HOC’ler) kullanarak bir çözüm sunmaktadır.

1. Kurulum

npm install react-table-hoc-fixed-columns
# veya
yarn add react-table-hoc-fixed-columns

2. Uygulama

Uygulama, belirli React Table sürümünüze bağlıdır. Ayrıntılı talimatlar için kitaplığın belgesine bakın. Genel yaklaşım, tablo bileşeninizi fixedColumns HOC ile sarmayı içerir. Basitleştirilmiş bir örnek (sürüm özel ayrıntılar için kitaplığın belgesine bakın):

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

// ... verileriniz ve sütun tanımınız ...

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

// ... bileşeninizin geri kalanı

En doğru ve güncel bilgiler için her zaman react-table-sticky ve react-table-hoc-fixed-columns‘ın resmi belgesine bakın.