React-React spreadsheet grid v2.0: An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

icon
Latest Release: v2.0

Features

  • setFocusedCell public method is added instead of props.focusedCell.
  • resetScroll public method is added instead of props.resetScroll.
  • props.blurCurrentFocus is removed (now focus is being blurred after a cell's value change automatically).
  • column.width property is added instead of props.columnWidthValues
  • onActiveCellChanged callback property is added.

Bugfixes

  • A header scrollbar width bug is fixed.

Refactor

  • The dependencies are updated.
  • getDerivedStateFromProps is used instead of componentWillMount.
  • The storybook examples are rewritten with hooks.
Source code(tar.gz)
Source code(zip)

React Spreadsheet Grid

An Excel-like grid component for React with custom cell editors, performant scroll & resizable columns

react-spreadsheet-grid in action

The key features

This is an Excel-like Spreadsheet Grid component that supports:

Custom cell editors (use built-in Input and Select, or any other components) & header content

Performant scroll for as many rows as you need

Resizable columns

Control by mouse & from keyboard

Flexible setting of disabled cells

Lazy loading support

Customizable CSS styling

Hooks compatible

Table of contents

Live playground

For examples of the grid in action, you can run the demo on your own computer:

Installation

This module is distributed via npm and should be installed as one of your project's dependencies:

npm install --save react-spreadsheet-grid

⚠️ IMPORTANT! This package also depends on react, react-dom and prop-types. Please make sure you have those installed as well.

A primitive example

import React, { useState } from 'react'
import { Grid, Input, Select } from 'react-spreadsheet-grid'

const rows = [
    { id: 'user1', name: 'John Doe', positionId: 'position1' },
    // and so on...
];

const MyAwesomeGrid = () => {
  return (
    <Grid
      columns={[
        {
          title: () => 'Name',
          value: (row, { focus }) => {
              return (
                  <Input
                    value={row.name}
                    focus={focus}
                  />
              );
          }
        }, {
          title: () => 'Position',
          value: (row, { focus }) => {
              return (
                  <Select
                    value={row.positionId}
                    isOpen={focus}
                    items={somePositions}
                  />
              );
          }
        }
      ]}
      rows={rows}
      getRowKey={row => row.id}
    />
  )
}

The pattern of regular usage

Take a closer look at 2 main thing: a declaration of columns and work with the state of the parent component.

To get the correct behavior of the grid you should:

  • Store rows and columns of the grid in the state of the parent component.
  • Describe how the grid renders values of the cells.
  • Have a callback that changes values of the rows in the state of the parent component.

Let's see how it works:

import { Grid, Input, Select } from 'react-spreadsheet-grid'
import AwesomeAutocomplete from 'awesome-autocomplete'

const rows = [
    { id: 'user1', name: 'John Doe', positionId: 'position1', managerId: 'manager1' },
    // and so on...
];

const MyAwesomeGrid = () => {
    // Rows are stored in the state.
    const [rows, setRows] = useState(rows);

    // A callback called every time a value changed.
    // Every time it save a new value to the state.
    const onFieldChange = (rowId, field) => (value) => {
        // Find the row that is being changed
        const row = rows.find({ id } => id === rowId);
        
        // Change a value of a field
        row[field] = value;
        setRows([].concat(rows))
    }
    
    const initColumns = () => [
      {
        title: () => 'Name',
        value: (row, { focus }) => {
          // You can use the built-in Input.
          return (
            <Input
              value={row.name}
              focus={focus}
              onChange={onFieldChange(row.id, 'name')}
            />
          );
        }
      }, {
        title: () => 'Position',
        value: (row, { focus }) => {
            // You can use the built-in Select.
            return (
                <Select
                  value={row.positionId}
                  isOpen={focus}
                  items={somePositions}
                  onChange={onFieldChange(row.id, 'positionId')}
                />
            );
        }
      }, {
        title: () => 'Manager',
        value: (row, { active, focus }) => {
          // You can use whatever component you want to change a value.
          return (
            <AwesomeAutocomplete
              value={row.managerId}
              active={active}
              focus={focus}
              onSelectItem={onFieldChange(row.id, 'managerId')}
            />
          );
        }
      }
    ]

    return (
        <Grid
            columns={initColumns()}
            rows={rows}
            isColumnsResizable
            onColumnResize={onColumnResize}
            getRowKey={row => row.id}
        />
    )
}

Props

columns

arrayOf({
    id: string / number,
    title: string / func,
    value: string / func(row, { active, focus, disabled }),
    width: number,
    getCellClassName: func(row)
})

defaults to []

required

This is the most important prop that defines columns of the table. Every item of the array is responsible for the corresponding column.

key Required Mission
id yes An identifier of a row.
title yes This is what you want to put in the header of the column, it could be passed as a string or as a func returning a React element.
value yes This is content of the cell. Works the same way as title, but func receives row and current state of the cell ({ active, focus, disabled }) as parameters, so you can create an output based on them.
width no Pass this property if you want to initialize the width of a column. You can set width not for all the columns, then the rest of the table width would be distributed between the columns with unspecified width. Also, you can get width of the columns from onColumnResize callback to store somewhere and use for the next render to make columns stay the same width.
getCellClassName no An additional class name getter for a row.

rows

arrayOf(any) | defaults to []

required

This is an array of rows for the table. Every row will be passed to a column.value func (if you use it).

getRowKey

func(row)

required

This is a func that must return unique key for a row based on this row in a parameter.

placeholder

string | defaults to "There are no rows"

Used as a placeholder text when the rows array is empty.

disabledCellChecker

func(row, columnId): bool

Use this func to define what cells are disabled in the table. It gets row and columnId (defined as column.id in a columns array) as parameters and identifiers of a cell. It should return boolean true / false. A disabled cell gets special CSS-class and styles. Also, you can define a column.value output based on the disabled state parameter.

onCellClick

func(row, columnId)

A click handler function for a cell. It gets row and columnId (defined as column.id in the columns array) as parameters and identifiers of a cell.

onActiveCellChanged

func({ x, y })

A callback called every time the active cell is changed. It gets { x, y } coordinates of the new active cell as parameters.

headerHeight

number | defaults to 40

The height of the header of the table in pixels.

⚠️ Define it as a prop, not in CSS styles to not broke the scroll of the table. ⚠️

rowHeight

number | defaults to 48

The height of a row of the table in pixels.

⚠️ Define it as a prop, not in CSS styles to not broke the scroll of the table. ⚠️

focusOnSingleClick

boolean

defaults to false

By default, double clicking a cell sets the focus on the cell's input. Pass true if you want to set the focus on the cell's input upon single clicking it.

isColumnsResizable

bool | defaults to false

Switch this on if you want the table provides an opportunity to resize column width.

onColumnResize

func(widthValues: object)

A callback called every time the width of a column was resized. Gets widthValues object as a parameter. widthValues is a map of values of width for all the columns in percents (columnId - value).

isScrollable

boolean

defaults to true

This defines should a grid has a scrollable container inside of a DOM-element where it was rendered, or not. When it turned on (by default), only visible rows are rendered and that improves performance. If you pass false, all the rows will be rendered at once (that is not a good way to handle with a big amount of them), but you will have opportunity to set up a scroll area where you want it to be and have other components (before or after the grid) included in this area.

onScroll

func(scrollPosition: number)

A callback called every time the position of the scroll of the grid was changed.

onScrollReachesBottom

func()

A callback called when the scroll of the grid reaches its bottom value. Usually, it could be used to implement the lazy loading feature in your grid (see the Lazy loading support section for details).

Public methods

Use public methods via a grid's ref:

const GridWrapper = () => {
  const gridRef = React.createRef()

  React.useEffect(() => {
    gridRef.current.resetScroll()
  })

  return (
    <Grid
      ref={gridRef}
      // other props
    />
  )
}

resetScroll()

Call to reset the scroll to the top of the container.

focusCell({ x: number, y: number })

Call to make the cell with this x, y coordinates (starting from 0) active and focused.

Customizing cells & header content

You can customize content of titles and cells using title and value keys of elements of the columns property. Setting these components using row and { active, focus, disabled } parameters of the functions.

title could be a string or a func returning any React element.

value works the same way, but func receives current row and current state of the cell ({ active, focused, disabled }) as parameters, so you can create an output based on them.

For the basic usage, the library provide 2 default components that you can use out-of-the-box: Input and Select. Perhaps, they will be enough for you. However, you can use any other React components for that purpose: autocompletes, checkboxes, etc.

Built-in Input

Input prop types:

Prop Type Mission
value string The value of the input
placeholder string Placeholder displaying when there is no value
focus bool Should the input has focus or not
onChange func Blur callback. Use it to catch a changed value

Usage:

import { Grid, Input } from 'react-spreadsheet-grid'

 <Grid
    columns={[
      {
        id: 'name',
        title: () => {
            return <span>Name</span>
        },
        value: (row, { focus }) => {
          return (
            <Input
              value={row.name}
              focus={focus}
              onChange={onFieldChange(row.id, 'name')}
            />
          );
        }
      }
   ]}
/>

Built-in Select

Select prop types:

Prop Type Mission
items arrayOf({ id: string / number, name: string }) Items for select
selectedId string / number Id of a selected item
placeholder string Placeholder displaying when there is no selected item
isOpen bool Should the select be open or not
onChange func Change item callback. Use it to catch a changed value

Usage:

import { Grid, Select } from 'react-spreadsheet-grid'

const positions = [{
    id: 1,
    name: 'Frontend developer'
}, {
    id: 2,
    name: 'Backend developer'
}];

 <Grid
    columns={[
      {
        id: 'position',
        title: () => {
            return <span>Position</span>
        },
        value: (row, { focus }) => {
          return (
            <Select
              items={positions}
              selectedId={row.positionId}
              isOpen={focus}
              onChange={onFieldChange(row.id, 'positionId')}
            />
          );
        }
      }
   ]}
/>

Another component

Let's suggest you need to use an autocomplete as a content of a cell. This is how it could be done:

import { Grid } from 'react-spreadsheet-grid'
import AwesomeAutocomplete from 'awesome-autocomplete'

<Grid
  columns={[
    {
      id: 'manager',
      title: () => {
        return <span>Manager</span>
      },
      value: (row, { focus, active }) => {
        return (
          <AwesomeAutocomplete
            value={row.managerId}
            active={active}
            focus={focus}
            onSelectItem={onFieldChange(row.id, 'managerId')}
          />
        );
      }
    }
  ]}
/>

Performant scroll

react-spreadsheet-grid always renders only the rows that are visible for the user. Therefore, you can pass to it as many rows as you want - it will work fine without any problems with rendering and scroll.

Resizable columns

react-spreadsheet-grid provides the opportunity to set initial width values for columns, to resize them from the UI and to react on these changes. Use relevant columnWidthValues, isColumnsResizable and onColumnResize properties for that purpose.

This is how it could be done:

import React, { useState } from 'react'
import { Grid } from 'react-spreadsheet-grid'

const ResizableGrid = () => {
    // Put columns to the state to be able to store there their width values.
    const [columns, setColumns] = useState(initColumns())

    // Change columns width values in the state to not lose them.
    const onColumnResize = (widthValues) => {
        const newColumns = [].concat(columns)
        Object.keys(widthValues).forEach((columnId) => {
            newColumns[columnId].width = widthValues[columnId]
        })
        setColumns(newColumns)
    }

    return (
        <Grid
            columns={columns}
            isColumnsResizable
            onColumnResize={onColumnResize}
            rows={/* some rows here */}
            getRowKey={row => row.id}
        />
    )
}

Control by mouse & from keyboard

react-spreadsheet-grid could be controlled by a mouse and from keyboard (just like Excel-table could). When a mouse is used, single click make a cell active, double click make a cell focused. When a keyboard used, move active cell, ENTER and TAB make a cell focused.

Customizing CSS styles

Right now, the easiest way to tweak react-spreadsheet-grid is to create another stylesheet to override the default styles. For example, you could create a file named react_spreadsheet_grid_overrides.css with the following contents:

.SpreadsheetGrid__cell_active {
    box-shadow: inset 0 0 0 2px green;
}

This would override the color of borders for the table active cell.

⚠️ The only exception, that you have to use headerHeight and rowHeight props to redefine height of the header and rows to not broke the scroll of the table.

Lazy loading support

react-spreadsheet-grid provides the opportunity to implement the lazy loading feature in your grid. Use the onScrollReachesBottom callback to handle a situation when the scroll position reaches its bottom. Load a new portion of the rows and put them in the state of a high-order component.

This is how it could be done:

import React, { useState } from 'react'
import { Grid } from 'react-spreadsheet-grid'

const LazyLoadingGrid = () => {
  /* Init the state with the initial portion of the rows */
  const [rows, setRows] = useState(initialRows);

  const onScrollReachesBottom = () => {
     loadNewPortionOfRows().then((newRows) => {
        setRows(rows.concat(newRows));
     });
  }

  const loadNewPortionOfRows = () => {
    /* an ajax request here */
  }

  return (
      <Grid
        columns={/* some columns here */}
        row={rows}
        getRowKey={row => row.id}
        onScrollReachesBottom={onScrollReachesBottom}
      />
    )
}

Comments

  • Bump elliptic from 6.4.0 to 6.5.4
    Bump elliptic from 6.4.0 to 6.5.4

    Mar 8, 2021

    Bumps elliptic from 6.4.0 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump y18n from 3.2.1 to 3.2.2
    Bump y18n from 3.2.1 to 3.2.2

    Mar 29, 2021

    Bumps y18n from 3.2.1 to 3.2.2.

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump merge from 1.2.0 to 1.2.1
    Bump merge from 1.2.0 to 1.2.1

    May 4, 2021

    Bumps merge from 1.2.0 to 1.2.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump ua-parser-js from 0.7.17 to 0.7.28
    Bump ua-parser-js from 0.7.17 to 0.7.28

    May 6, 2021

    Bumps ua-parser-js from 0.7.17 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump handlebars from 4.7.6 to 4.7.7
    Bump handlebars from 4.7.6 to 4.7.7

    May 6, 2021

    Bumps handlebars from 4.7.6 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    Commits
    • a9a8e40 v4.7.7
    • e66aed5 Update release notes
    • 7d4d170 disable IE in Saucelabs tests
    • eb860c0 fix weird error in integration tests
    • b6d3de7 fix: check prototype property access in strict-mode (#1736)
    • f058970 fix: escape property names in compat mode (#1736)
    • 77825f8 refator: In spec tests, use expectTemplate over equals and shouldThrow (#1683)
    • 3789a30 chore: start testing on Node.js 12 and 13
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump hosted-git-info from 2.5.0 to 2.8.9
    Bump hosted-git-info from 2.5.0 to 2.8.9

    May 8, 2021

    Bumps hosted-git-info from 2.5.0 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump tar from 2.2.1 to 2.2.2
    Bump tar from 2.2.1 to 2.2.2

    Aug 4, 2021

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump path-parse from 1.0.5 to 1.0.7
    Bump path-parse from 1.0.5 to 1.0.7

    Aug 10, 2021

    Bumps path-parse from 1.0.5 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump tmpl from 1.0.4 to 1.0.5
    Bump tmpl from 1.0.4 to 1.0.5

    Sep 20, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Does it has sticky header option?
    Does it has sticky header option?

    Jan 13, 2022

    I was wondering whether it has sticky headers option. I did not seen it in documentation. When there is long list of data it will be very helpful.

    Reply
  • Feature: Babel
    Feature: Babel

    Nov 25, 2017

    It is recommended to use babel-preset-env because this will act similar to autoprefixer. Also babel-preset-stage-2 is not needed. I run the tests and rebuild storybook and everything works fine.

    Reply
  • collaboration friendly
    collaboration friendly

    Feb 3, 2018

    is there a chance that I can use this in a collaboration app?

    FAQ 
    Reply
  • Cells need unique key property
    Cells need unique key property

    Jun 29, 2019

    • react-spreadsheet-grid:1.4.3
    • React version: 16.8.2

    Running the basic example I get this warning:

    index.js:1446 Warning: Each child in a list should have a unique "key" prop.
    
    Check the render method of `SpreadsheetGrid`. See https://fb.me/react-warning-keys for more information.
        in SpreadsheetRow (created by SpreadsheetGrid)
    
    
    Reply
  • SpreadsheetRow.shouldComponentUpdate(): Returned undefined instead of a boolean value
    SpreadsheetRow.shouldComponentUpdate(): Returned undefined instead of a boolean value

    Mar 26, 2018

    • react-spreadsheet-grid version: 1.3.1
    • Operating System: Windows 7 64bits

    Relevant code or config

    <Grid
            rows={this.state.rows}
            columns={this.columns}
            getRowKey={row => row.id}
          />
    

    What happened:

    Warning: SpreadsheetRow.shouldComponentUpdate(): Returned undefined instead of a boolean value. Make sure to return true or false.
    

    Problem description:

    React warns about SpreadsheetRow.shouldComponentUpdate not returning true or false

    Suggested solution:

    If SpreadsheetRow.shouldComponentUpdate returns undefined, return false or true

    help wanted good first issue 
    Reply
  • Add a way to automatically focus on cell's input by single click inst…
    Add a way to automatically focus on cell's input by single click inst…

    Apr 3, 2018

    …ead of double click.

    What:

    Feature: Add a way to automatically focus on the cell's input by single click instead of the default behavior of double click.

    Why:

    I think it is helpful for the user to see the cursor in the cell's input field (or the options in select field) by just single clicking the cell.

    I've added a way to bypass the default behavior where it is required to double click the cell before showing the cursor or focusing in the text field (or showing options in select).

    I've added the prop focusedOnClick which accepts boolean (and has a default value false) that tells if Grid will override the default behavior.

    Reply
  • Make column widths correspond to contents
    Make column widths correspond to contents

    Jun 15, 2019

    I have a rather wide table with many columns. I don't want them all squeezed inside the viewport. Instead I'd like column widths to fit column content and have a horizontal scrollbar to scroll to the columns that are offscreen. Is that possible?

    Reply
  • Feature: Module
    Feature: Module

    Nov 25, 2017

    Add module entry to package.json. This way webpack or rollup can use the ES6 module instead of the transpiled ES5 version from babel which includes a lot of shimed code. If module import is supported the index.js file gets imported otherwise it falls back to lib/bundle.js when using require. This will save quite a few bytes in the final bundle.

    See: https://github.com/rollup/rollup/wiki/pkg.module

    Reply
  • Demo - columns and column headers misaligned with scrollbar
    Demo - columns and column headers misaligned with scrollbar

    Nov 22, 2017

    See the screenshot below (from Chrome).

    Browsers tested: Chrome 62.0 Firefox 57.0

    Side note: Internet Explorer does not work at all (tested IE 11.0). Scripts throw an error and display a blank page. Not sure if you intend to support Internet Explorer at all.

    Let me know if you need anymore information.

    ssapp1

    bug help wanted 
    Reply
  • Focus on click instead of double click
    Focus on click instead of double click

    Apr 2, 2018

    Hi,

    May I ask if it is possible to set focus in the textbox inside a cell after the first click instead of double clicking it?

    Thanks

    help wanted good first issue 
    Reply
  • Add support for React Hooks
    Add support for React Hooks

    Jun 14, 2019

    How can I use this awesome lib with react hooks? I'm stuck with onFieldChange:

      function onFieldChange(rowId, field, value) {
        // Find a row that is being changed
        const row = rows.find((id) => id === rowId);
        // Change a value of a field
        row[field] = value;
        setRows([].concat(rows));
        // Blurring focus from the current cell is necessary for a correct behavior of the Grid.
        setBlur(true);
        return null;
      }
                <Input
                  value={make_date_string(row.date)}
                  onChange={onFieldChange(row.id, "date")}
                  focus={focus}
                />
    

    image

    version 2 
    Reply