@reactabular/sticky
Sticky header and body for Reactabular
Last updated 3 years ago by bebraw .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @reactabular/sticky 
SYNC missed versions from official npm registry.

Sometimes you might want to display data within a fixed container. That's where @reactabular/sticky comes in. It includes logic keeping a table header and a table body in sync. Unfortunately you still need to dig DOM references yourself to achieve this given it relies on measuring.

API

The API is exactly the same as for reactabular-table apart from naming. Here you need to use Sticky.Header and Sticky.Body over Table.Header and Table.Body.

How to Use?

The following example implements sticky headers within a fixed viewport through props.

/*
import React from 'react';
import { Table } from 'reactabular-table';
// import * as Sticky from 'reactabular-sticky';

import { generateRows } from './helpers';
*/

const schema = {
  type: 'object',
  properties: {
    id: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    product: {
      type: 'string'
    },
    company: {
      type: 'string'
    },
    age: {
      type: 'integer'
    }
  },
  required: ['id', 'name', 'product', 'company', 'age']
};
const rows = generateRows(100, schema);

const columns = [
  {
    property: 'name',
    props: {
      style: { minWidth: 300 }
    },
    header: {
      label: 'Name'
    }
  },
  {
    property: 'age',
    props: {
      style: { minWidth: 100 }
    },
    header: {
      label: 'Age'
    }
  },
  {
    property: 'company',
    props: {
      style: { minWidth: 400 }
    },
    header: {
      label: 'Company'
    }
  },
  {
    property: 'product',
    props: {
      style: { minWidth: 400 }
    },
    header: {
      label: 'Product'
    }
  }
];

class StickyTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      rows,
      columns
    };

    this.tableHeader = null;
    this.tableBody = null;
  }
  componentDidMount() {
    // We have refs now. Force update to get those to Header/Body.
    this.forceUpdate();
  }
  render() {
    const { rows, columns } = this.state;

    return (
      <Table.Provider
        className="pure-table pure-table-striped"
        columns={columns}
      >
        <Sticky.Header
          style={{
            maxWidth: 800
          }}
          ref={tableHeader => {
            this.tableHeader = tableHeader && tableHeader.getRef();
          }}
          tableBody={this.tableBody}
        />

        <Sticky.Body
          rows={rows}
          rowKey="id"
          style={{
            maxWidth: 800,
            maxHeight: 400
          }}
          ref={tableBody => {
            this.tableBody = tableBody && tableBody.getRef();
          }}
          tableHeader={this.tableHeader}
        />
      </Table.Provider>
    );
  }
}

<StickyTable />

Current Tags

  • 8.15.0-alpha.212a683f                                ...           canary (3 years ago)
  • 8.14.0-alpha.ca02a726                                ...           latest (3 years ago)

10 Versions

  • 8.15.0-alpha.212a683f                                ...           3 years ago
  • 8.14.0-alpha.a90f8b34                                ...           3 years ago
  • 8.14.0-alpha.10568667                                ...           3 years ago
  • 8.14.0-alpha.54b74757                                ...           3 years ago
  • 8.14.0-alpha.3616dd52                                ...           3 years ago
  • 8.14.0-alpha.42b4d923                                ...           3 years ago
  • 8.14.0-alpha.2b64020c                                ...           3 years ago
  • 8.14.0-alpha.4d956311                                ...           3 years ago
  • 8.14.0-alpha.b845ae80                                ...           3 years ago
  • 8.14.0-alpha.ca02a726                                ...           3 years ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |