New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-table-sticky

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-table-sticky

Sticky components for react-table v7

  • 0.4.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
70K
decreased by-1.1%
Maintainers
1
Weekly downloads
 
Created
Source

React Table Sticky

:warning: Under developpment, still unstable

npm package

Sticky components and tools for React Table v7


npm i react-table-sticky


:warning: react-table@7.x is still in beta. Last verified compatible version is 7.0.0-rc.15

Documentation

Features

  • sticky header
  • sticky columns left and/or right
  • full customizable

Simple example

Steps:

  1. create CSS classes .table .header .body .sticky etc... (check following example)
  2. create HTML elements <div className="table sticky">, <div className="header">, <div className="body"> etc...
  3. add useSticky hook
  4. then, add sticky: 'left' or sticky: 'right' to your column

full example:

import React from 'react';
import styled from 'styled-components';
import { useTable, useBlockLayout } from 'react-table';
import { useSticky } from 'react-table-sticky';

const Styles = styled.div`
  .table {
    border: 1px solid #ddd;

    .tr {
      :last-child {
        .td {
          border-bottom: 0;
        }
      }
    }

    .th,
    .td {
      padding: 5px;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      background-color: #fff;
      overflow: hidden;

      :last-child {
        border-right: 0;
      }
    }

    &.sticky {
      overflow: scroll;
      .header {
        position: sticky;
        top: 0;
        z-index: 1;
        box-shadow: 0px 3px 3px #ccc;
        width: fit-content;
      }

      .body {
        position: relative;
        z-index: 0;
      }

      [data-sticky-last-left-td] {
        box-shadow: 2px 0px 3px #ccc;
      }

      [data-sticky-first-right-td] {
        box-shadow: -2px 0px 3px #ccc;
      }
    }
  }
`;

function TableDemo() {
  const columns = [
    {
      Header: 'First Name',
      accessor: 'firstName',
      sticky: 'left',
    },
    {
      Header: 'Last Name',
      accessor: 'lastName',
      sticky: 'left',
    },
    ...
    {
      Header: 'age',
      accessor: 'age',
      sticky: 'right',
    }
  ]

  const data = [
    ...
  ]

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useBlockLayout,
    useSticky,
  );

  return (
    <Styles>
      <div {...getTableProps()} className="table sticky" style={{ width: 1000, height: 500 }}>
        <div className="header">
          {headerGroups.map((headerGroup) => (
            <div {...headerGroup.getHeaderGroupProps()} className="tr">
              {headerGroup.headers.map((column) => (
                <div {...column.getHeaderProps()} className="th">
                  {column.render('Header')}
                </div>
              ))}
            </div>
          ))}
        </div>
        <div {...getTableBodyProps()} className="body">
          {rows.map((row) => {
            prepareRow(row);
            return (
              <div {...row.getRowProps()} className="tr">
                {row.cells.map((cell) => (
                  <div {...cell.getCellProps()} className="td">
                    {cell.render('Cell')}
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </div>
    </Styles>
  );
}

Tips: if your table contain at least one header group, place yours sticky columns into a group too (even with an empty Header name)

const columns = [
  {
    Header: ' ',
    sticky: 'left',
    columns: [
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
    ]
  },
  {
    Header: 'Other group',
    columns: [
      ...
    ]
  }
]

Sticky columns for React Table v6

If you search tool for sticky position in React Table v6, take a look at react-table-hoc-fixed-columns

Browser support

Check CSS sticky support https://caniuse.com/#search=sticky

Contribute

  • git clone https://github.com/guillaumejasmin/react-table-sticky.git
  • npm install
  • npm run demo
  • Go to http://localhost:8080

FAQs

Package last updated on 20 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc