npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-context-table

v1.0.17

Published

a react table component to display large data set with high performance and flexibility

Downloads

43

Readme

react-context-table

BaseTable is a react table component to display large datasets with high performance and flexibility

Install

# npm
npm install react-context-table --save

# yarn
yarn add react-context-table

Usage

import BaseTable, { Column } from 'react-context-table'
import 'react-context-table/styles.css'
// Important: if you fail to import react-context-table/styles.css then 
// BaseTable will not render as advertised in the included examples.
// For advanced styling see link below:
// https://github.com/Autodesk/react-context-table#advance
 ...
<BaseTable data={data} width={600} height={400}>
  <Column key="col0" dataKey="col0" width={100} />
  <Column key="col1" dataKey="col1" width={100} />
  ...
</BaseTable>
...

Learn more at the website

unique key

key is required for column definition or the column will be ignored

Make sure each item in data is unique by a key, the default key is id, you can customize it via rowKey

size

width is required for column definition, but in flex mode(fixed={false}), you can set width={0} and flexGrow={1} to achieve flexible column width, checkout the Flex Column example

width and height(or maxHeight) are required to display the table properly

In the examples we are using a wrapper const Table = props => <BaseTable width={700} height={400} {...props} /> to do that

If you want it responsive, you can use the AutoResizer to make the table fill the container, checkout the Auto Resize example

closure problem in custom renderers

In practice we tend to write inline functions for custom renderers, which would make shouldUpdateComponent always true as the inline function will create a new instance on every re-render, to avoid "unnecessary" re-renders, BaseTable ignores functions when comparing column definition by default, it works well in most cases before, but if we use external data instead of reference state in custom renderers, we always get the staled initial value although the data has changed

It's recommended to inject the external data in column definition to solve the problem, like <Column foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) => { ... } } />, the column definition will update on external data change, with this pattern we can easily move the custom renderers out of column definition for sharing, the downside is it would bloat the column definition and bug prone

Things getting worse with the introduction of React hooks, we use primitive state instead of this.state, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via useCallback or useMemo, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set ignoreFunctionInColumnCompare to false which is introduced since v1.11.0

Here is an example to demonstrate

Browser Support

BaseTable is well tested on all modern browsers and IE11. You have to polyfill Array.prototype.findIndex to make it works on IE

The examples don't work on IE as they are powered by react-runner which is a react-live like library but only for modern browsers.

Advance

BaseTable is designed to be the base component to build your own complex table component

Styling

The simplest way is overriding the default styles (assuming you are using scss)

// override default variables for BaseTable
$table-prefix: AdvanceTable;

$table-font-size: 13px;
$table-padding-left: 15px;
$table-padding-right: 15px;
$column-padding: 7.5px;
...
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;

@import '~react-context-table/es/_BaseTable.scss';

.#{$table-prefix} {
  &:not(.#{$table-prefix}--show-left-shadow) {
    .#{$table-prefix}__table-frozen-left {
      box-shadow: none;
    }
  }

  &:not(.#{$table-prefix}--show-right-shadow) {
    .#{$table-prefix}__table-frozen-right {
      box-shadow: none;
    }
  }

  ...
}

You can write your own styles from scratch or use CSS-in-JS solutions to achieve that

Custom components

<BaseTable
  classPrefix="AdvanceTable"
  components={{
    TableCell: AdvanceTableCell,
    TableHeaderCell: AdvanceTableHeaderCell,
    ExpandIcon: AdvanceExpandIcon,
    SortIndicator: AdvanceSortIndicator,
  }}
  ...
/>

Custom renderers & props

There are a lot of highly flexible props like xxxRenderer and xxxProps for you to build your own table component, please check the api and examples for more details

Example

We are using a advanced table component based on BaseTable internally, with much more features, including row selection, row grouping, data aggregation, column settings, column reordering, and column grouping, tooltip, inline editing.

AdvanceTable

In real products

Development

We use Yarn as the package manager, checkout this repo and run yarn under both root folder and website folder in install packages, then run yarn start to start the demo site powered by Gatsby

Contributing

Please check guidelines for more details