React टेबल में कॉलम स्थिर करना: एक व्यापक गाइड

React Table सारणीबद्ध डेटा प्रदर्शित करने का एक शक्तिशाली उपकरण है, लेकिन स्थिर कॉलमों का प्रबंधन मुश्किल हो सकता है। यह गाइड क्षैतिज स्क्रॉल करते समय कॉलमों को स्थिर रखने के लिए एक स्पष्ट, संस्करण-विशिष्ट दृष्टिकोण प्रदान करता है।

विषय-सूची

• React Table v7 और ऊपर के लिए react-table-sticky का उपयोग करना
• React Table v6 और नीचे के लिए react-table-hoc-fixed-columns का उपयोग करना

React Table v7 और ऊपर के लिए react-table-sticky का उपयोग करना

React Table v7 ने महत्वपूर्ण API परिवर्तन किए। स्थिर कॉलमों के लिए, 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: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
  { Header: 'City', 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 v6 और नीचे के लिए react-table-hoc-fixed-columns का उपयोग करना

पुराने React Table संस्करणों के लिए, react-table-hoc-fixed-columns उच्च-क्रम घटकों (HOCs) का उपयोग करके एक समाधान प्रदान करता है।

1. स्थापना

npm install react-table-hoc-fixed-columns
# या
yarn add react-table-hoc-fixed-columns

2. कार्यान्वयन

कार्यान्वयन आपके विशिष्ट React Table संस्करण पर निर्भर करता है। विस्तृत निर्देशों के लिए लाइब्रेरी के दस्तावेज़ देखें। सामान्य दृष्टिकोण में आपके टेबल घटक को fixedColumns HOC से लपेटना शामिल है। एक सरलीकृत उदाहरण (संस्करण-विशिष्ट विवरण के लिए लाइब्रेरी के दस्तावेज़ देखें):

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 के आधिकारिक दस्तावेज़ देखें।