Convert Figma logo to code with AI

facebookarchive logofixed-data-table

A React table component designed to allow presenting thousands of rows of data.

4,297
553
4,297
205

Top Related Projects

A React table component designed to allow presenting millions of rows of data.

React components for efficiently rendering large lists and tabular data

25,069

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Feature-rich and customizable data grid React component

25,067

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Datatable for React based on material-ui's table with additional features

Quick Overview

Fixed Data Table is a React component for building and rendering data tables with a fixed header and column functionality. It's designed to handle large amounts of data efficiently, providing smooth scrolling and customizable layouts for complex table structures.

Pros

  • Efficient handling of large datasets with virtualized rendering
  • Fixed headers and columns for improved navigation and readability
  • Highly customizable with various cell renderers and styling options
  • Smooth scrolling performance, even with thousands of rows

Cons

  • No longer actively maintained (archived repository)
  • Limited documentation and examples for advanced use cases
  • May require additional work to integrate with modern React ecosystems
  • Some reported issues with responsiveness and mobile compatibility

Code Examples

  1. Basic table setup:
import React from 'react';
import { Table, Column, Cell } from 'fixed-data-table-2';

const MyTable = ({ data }) => (
  <Table
    rowHeight={50}
    rowsCount={data.length}
    width={800}
    height={500}
    headerHeight={50}
  >
    <Column
      header={<Cell>Name</Cell>}
      cell={({ rowIndex }) => <Cell>{data[rowIndex].name}</Cell>}
      width={200}
    />
    <Column
      header={<Cell>Age</Cell>}
      cell={({ rowIndex }) => <Cell>{data[rowIndex].age}</Cell>}
      width={100}
    />
  </Table>
);
  1. Adding a fixed column:
<Table
  rowHeight={50}
  rowsCount={data.length}
  width={800}
  height={500}
  headerHeight={50}
>
  <Column
    header={<Cell>ID</Cell>}
    cell={({ rowIndex }) => <Cell>{data[rowIndex].id}</Cell>}
    width={100}
    fixed={true}
  />
  {/* Other columns */}
</Table>
  1. Custom cell renderer:
const CustomCell = ({ rowIndex, data, col, ...props }) => (
  <Cell {...props}>
    <div style={{ fontWeight: 'bold', color: data[rowIndex][col] > 50 ? 'green' : 'red' }}>
      {data[rowIndex][col]}
    </div>
  </Cell>
);

<Column
  header={<Cell>Score</Cell>}
  cell={<CustomCell data={data} col="score" />}
  width={100}
/>

Getting Started

  1. Install the package:

    npm install fixed-data-table-2
    
  2. Import and use in your React component:

    import React from 'react';
    import { Table, Column, Cell } from 'fixed-data-table-2';
    import 'fixed-data-table-2/dist/fixed-data-table.css';
    
    const MyComponent = () => {
      const data = [/* your data array */];
      return (
        <Table
          rowHeight={50}
          rowsCount={data.length}
          width={800}
          height={500}
          headerHeight={50}
        >
          <Column
            header={<Cell>Column 1</Cell>}
            cell={({ rowIndex }) => <Cell>{data[rowIndex].col1}</Cell>}
            width={200}
          />
          {/* Add more columns as needed */}
        </Table>
      );
    };
    
  3. Make sure to include the CSS file in your project for proper styling.

Competitor Comparisons

A React table component designed to allow presenting millions of rows of data.

Pros of fixed-data-table-2

  • Actively maintained and updated, with more recent releases
  • Improved performance and bug fixes over the original
  • Better TypeScript support and modern React compatibility

Cons of fixed-data-table-2

  • Potentially less stable due to ongoing development
  • May have breaking changes compared to the original version
  • Smaller community and fewer resources available

Code Comparison

fixed-data-table:

import { Table, Column, Cell } from 'fixed-data-table';

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={<Cell>Column 1 static content</Cell>}
    width={200}
  />
</Table>

fixed-data-table-2:

import { Table, Column, Cell } from 'fixed-data-table-2';

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={({rowIndex, ...props}) => (
      <Cell {...props}>Row {rowIndex}</Cell>
    )}
    width={200}
  />
</Table>

The code structure is similar, but fixed-data-table-2 offers more flexibility in cell rendering and improved TypeScript support.

React components for efficiently rendering large lists and tabular data

Pros of react-virtualized

  • More comprehensive set of components for virtualized rendering
  • Better performance for large datasets due to efficient windowing techniques
  • Active development and community support

Cons of react-virtualized

  • Steeper learning curve due to more complex API
  • May be overkill for simpler table needs
  • Less focus on fixed-layout tables specifically

Code Comparison

fixed-data-table:

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={<Cell>Column 1 Data</Cell>}
    width={200}
  />
</Table>

react-virtualized:

<AutoSizer>
  {({ height, width }) => (
    <List
      width={width}
      height={height}
      rowCount={100}
      rowHeight={50}
      rowRenderer={({ index, style }) => (
        <div style={style}>Row {index}</div>
      )}
    />
  )}
</AutoSizer>

The code examples showcase the different approaches: fixed-data-table focuses on table-specific components, while react-virtualized offers more flexible virtualization options for various use cases.

25,069

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of Table

  • Active development and maintenance
  • Supports multiple frameworks (React, Vue, Solid, Svelte)
  • Highly customizable and feature-rich

Cons of Table

  • Steeper learning curve due to more complex API
  • Larger bundle size compared to Fixed-Data-Table

Code Comparison

Fixed-Data-Table:

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={<Cell>Column 1 static content</Cell>}
    width={200}
  />
</Table>

Table:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

return (
  <table>
    <thead>
      {table.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(header => (
            <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody>
      {table.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
)

Feature-rich and customizable data grid React component

Pros of react-data-grid

  • More actively maintained with regular updates and bug fixes
  • Offers a wider range of built-in features, including cell editing and custom cell renderers
  • Better documentation and examples for easier implementation

Cons of react-data-grid

  • Slightly larger bundle size, which may impact performance for very large datasets
  • Less optimized for extremely large datasets compared to fixed-data-table
  • May require more configuration for complex use cases

Code Comparison

fixed-data-table:

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={<Cell>Column 1 static content</Cell>}
    width={200}
  />
</Table>

react-data-grid:

<ReactDataGrid
  columns={columns}
  rowGetter={i => rows[i]}
  rowsCount={100}
  minHeight={500}
/>

Both libraries provide efficient ways to render large datasets in a tabular format. fixed-data-table focuses on performance for extremely large datasets, while react-data-grid offers more features and easier customization out of the box. The choice between them depends on specific project requirements and the scale of data being handled.

25,067

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Pros of Table

  • Active development and maintenance
  • Supports multiple frameworks (React, Vue, Solid, Svelte)
  • Highly customizable and feature-rich

Cons of Table

  • Steeper learning curve due to more complex API
  • Larger bundle size compared to Fixed-Data-Table

Code Comparison

Fixed-Data-Table:

<Table
  rowHeight={50}
  rowsCount={100}
  width={1000}
  height={500}
  headerHeight={50}>
  <Column
    header={<Cell>Col 1</Cell>}
    cell={<Cell>Column 1 static content</Cell>}
    width={200}
  />
</Table>

Table:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

return (
  <table>
    <thead>
      {table.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(header => (
            <th key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody>
      {table.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => (
            <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
)

Datatable for React based on material-ui's table with additional features

Pros of material-table

  • Active development and maintenance
  • Built-in Material-UI integration for modern, responsive design
  • More comprehensive feature set, including sorting, filtering, and editing

Cons of material-table

  • Potentially higher learning curve due to more complex API
  • Larger bundle size, which may impact performance for simpler use cases

Code Comparison

material-table:

import MaterialTable from 'material-table';

<MaterialTable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age', type: 'numeric' }
  ]}
  data={[
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
  ]}
/>

fixed-data-table:

import { Table, Column, Cell } from 'fixed-data-table-2';

<Table
  rowHeight={50}
  rowsCount={2}
  width={500}
  height={100}
  headerHeight={50}>
  <Column
    header={<Cell>Name</Cell>}
    cell={props => (
      <Cell>{['John', 'Jane'][props.rowIndex]}</Cell>
    )}
    width={200}
  />
  <Column
    header={<Cell>Age</Cell>}
    cell={props => (
      <Cell>{[30, 25][props.rowIndex]}</Cell>
    )}
    width={200}
  />
</Table>

material-table offers a more concise API for basic table setup, while fixed-data-table requires more manual configuration but provides finer control over cell rendering.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Project Status: 🚨 Unmaintained 🚨

This project is no longer maintained. We will not be accepting pull requests, addressing issues, nor making future releases.

Alternatives


Fixed Data Tables for React

FixedDataTable is a React component for building and presenting data in a flexible, powerful way. It supports standard table features, like headers, columns, rows, header groupings, and both fixed-position and scrolling columns.

The table was designed to handle thousands of rows of data without sacrificing performance. Scrolling smoothly is a first-class goal of FixedDataTable and it's architected in a way to allow for flexibility and extensibility.

Features of FixedDataTable:

  • Fixed headers and footer
  • Both fixed and scrollable columns
  • Handling huge amounts of data
  • Variable row heights (with adaptive scroll positions)
  • Column resizing
  • Performant scrolling
  • Customizable styling
  • Jumping to a row or column
  • Controlled scroll API allows touch support

Things the FixedDataTable doesn't do:

  • FixedDataTable does not provide a layout reflow mechanism or calculate content layout information such as width and height of the cell contents. The developer has to provide the layout information to the table instead.
  • FixedDataTable does not handle sorting of data. Instead it allows the developer to supply data getters that can be sort-, filter-, or tail-loading-aware.
  • FixedDataTable does not fetch the data (see above)

Getting started

Install fixed-data-table using npm.

npm install fixed-data-table

Add the default stylesheet dist/fixed-data-table.css, then import it into any module.

Basic Example

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';

// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

// Render your table
ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][2]}
        </Cell>
      )}
      width={2000}
    />
  </Table>,
  document.getElementById('example')
);

Contributions

Use GitHub issues for requests.

We actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked as GitHub releases.

License

FixedDataTable is BSD-licensed. We also provide an additional patent grant.

NPM DownloadsLast 30 Days