Introduction to Fixed Data Table

The fixed-data-table library allows for efficient display and manipulation of large data sets within a table structure in web applications. It is specifically designed to deal with vast amounts of data without sacrificing performance. In this guide, we will cover dozens of useful APIs available in fixed-data-table and show you an application example utilizing these APIs.

Basic Setup and Important APIs

 
   import React from 'react';
   import { Table, Column, Cell } from 'fixed-data-table-2';
 
   // Sample data
   const rows = [
     { name: 'John', age: 25 },
     { name: 'Jane', age: 30 },
   ];
 
   // Basic table setup
   const MyTable = () => (
     <Table
       rowHeight={50}
       headerHeight={50}
       rowsCount={rows.length}
       width={500}
       height={500}
       {...props}
     >
       <Column 
         header={ <Cell>Name</Cell>}
         cell={ props => (
           <Cell>
             {rows[props.rowIndex].name}
           </Cell>
         )}
         width={250} 
       />
       <Column 
         header={ <Cell>Age</Cell>}
         cell={ props => (
           <Cell>
             {rows[props.rowIndex].age}
           </Cell>
         )}
         width={250} 
       />
     </Table>
   );
 

Column API

 
   // Using Column with header, cell, and footer
   <Column
     header={ <Cell>Header Text</Cell>}
     cell={ props => (
       <Cell>
         {`Row ${props.rowIndex}`}
       </Cell>
     )}
     footer={ <Cell>Footer Text</Cell>}
     width={200}
    />
 

Dynamic Cell Content

 
   // Generating dynamic content for cells
   <Cell>
     {props => (
       <span>{rows[props.rowIndex].name} - {rows[props.rowIndex].age}</span>
     )}
   </Cell>
 

Sorting Data

 
   // Enabling column sorting
   const [sortedData, setSortedData] = useState(rows);

   const sortData = (columnKey, ascending = true) => {
     const sorted = [...rows].sort((a, b) => {
       return ascending ? a[columnKey] - b[columnKey] : b[columnKey] - a[columnKey];
     });
     setSortedData(sorted);
   }
   
   <Column
     header={ <Cell>
       <button onClick={() => sortData('name')} > Sort by Name </button>
     </Cell>}
     cell={ props => (
       <Cell>
         {sortedData[props.rowIndex].name}
       </Cell>
     )}
     width={200}
   />
 

Complete Application Example

Below is a complete example that includes setup and commonly used APIs of the fixed-data-table library:

 
   import React, { useState } from 'react';
   import { Table, Column, Cell } from 'fixed-data-table-2';
   
   const rows = [
     { name: 'John', age: 25 },
     { name: 'Jane', age: 30 },
     // More data...
   ];
   
   const App = () => {
     const [sortedData, setSortedData] = useState(rows);

     const sortData = (columnKey, ascending = true) => {
       const sorted = [...rows].sort((a, b) => {
         return ascending ? a[columnKey] - b[columnKey] : b[columnKey] - a[columnKey];
       });
       setSortedData(sorted);
     }
   
     return (
       <Table
         rowHeight={50}
         headerHeight={50}
         rowsCount={sortedData.length}
         width={500}
         height={500}
       >
         <Column 
           header={ <Cell>
             <button onClick={() => sortData('name')} > Sort by Name </button>
           </Cell>}
           cell={ props => (
             <Cell>
               {sortedData[props.rowIndex].name}
             </Cell>
           )}
           width={250} 
         />
         <Column 
           header={ <Cell>Age</Cell>}
           cell={ props => (
             <Cell>
               {sortedData[props.rowIndex].age}
             </Cell>
           )}
           width={250} 
         />
       </Table>
     );
   };
   
   export default App;
 

By using these APIs, developers can easily manage and display large data sets in their applications efficiently and with high performance. Try integrating fixed-data-table in your next project for an advanced and dynamic table experience.

Hash: 04083755deb4ac1d62c26cc31d92bd8b463acdc53151f5de9a3627f9fb436768