denisraslov / react-spreadsheet-grid Goto Github PK

With the current change in Input component, I think the documentation should also be updated.

Using onBlur to capture Input changes doesn't work now, it works if we use onChange props.

I can make a PR if you want.

react-spreadsheet-grid version: 1.1.1

Relevant code or config
One of columns is:

{
   id: 'deleteButton',
   title: '',
}

Problem description
A header cell for this column is misaligned:

Suggested solution
Add display: flex to styles of the header.

How do you approach adding a row in the middle of two rows? I've read there's a system of key of each cell, so if you add a row in the middle of two, you probably need to change every key, no?

Is it possible to add new rows or columns?

If so, how?

THanks!

I am getting an extra scrollbars on my page sometimes. I have other components on the top of the page.

I think this could be solved by letting me set a height property. I could then get the height from something like react-virtualized-auto-sizer and use that.

• react-spreadsheet-grid version: ^2.0.0
• React version: 17.0.2
• Operating System: windows 10

Relevant code or config

Development output

Build output

What you did: I just follow the rules of customizing CSS.

What happened: I try to override the background color of the header, it works on dev but when I npm run build. the color was not changed.

Problem description:

Suggested solution:

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.

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}
            />

• react-spreadsheet-grid version: 1.4.3
• React version: 16.x
• Operating System:

Relevant code or config: https://codesandbox.io/s/objective-kapitsa-ejlcw

I converted the example to a sandbox (few other small mistakes in there). When you edit and press enter, the focus doesn't shift. I expect it to go the next row. I suspect I am supposed to toggle the blurCurrentFocus?

Suggested solution:

Handle the focus internally in react-spreadsheet-grid and get rid of blurCurrentFocus. (The blurCurrentFocus prop is a little awkward.)

• react-spreadsheet-grid version:
• React version:
• Operating System:

Relevant code or config

What you did:

What happened:

Problem description:

Suggested solution:

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

• react-spreadsheet-grid version: 1.3.1
• React version: 16.3.1
• Operating System: Ubuntu 17.10

What I did:
I tried to follow the example given in the readme and when I changed the content of a cell I got this error:

TypeError: rows[rowId] is undefined

Suggested solution:
Is there maybe a small mistake in the readme to make the example work out of the box?
In the dummy content for the rows:

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

I needed to change the ids to 0, 1, 2... to make the example work for me.

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.

Awesome library! This is more of a feature request than an issue, let me know if you have other places for this that are more appropriate.

Are you planning on adding excel-like features to it, by which I mean things like:

• Select multiple cells by holding shift
• Go to the top / bottom / left / right by holding cmd (using mac)
• On right mouse click, have options like delete or add row or column.

This kind of functionality is in Handsontable, as you might be aware of. First and foremost I'm wondering if you are planning to become more like this, or you're more focussed on a different kind of functionality.

We tried to override the cell layout as described in the docs by naming the css file react_spreadsheet_grid_overrides.css.
Using it in an serverside react app we did not get our custom css working without using !important

• react-spreadsheet-grid version: ^2.0.0
• React version: ^16.12.0
• Operating System: any

Relevant code or config

_app.js

  <link
            rel='stylesheet'
            type='text/css'
            href='/css/react_spreadsheet_grid_overrides.css'
          />

index.js

 const SheetExample2 = dynamic(
    () => import('../../components/SheetExample2'),
    {
      ssr: false
    }
  );

SheetExample2.jsx

import React, { useState, useRef } from 'react';
import { Grid as Table, Input, Select } from 'react-spreadsheet-grid';
import { IconButton, Button, Grid, makeStyles } from '@material-ui/core';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import AddCircleIcon from '@material-ui/icons/AddCircle';

const useStyles = makeStyles((theme) => ({
  gridAddIconButtonWrapper: { marginBottom: '5px' },
  gridDeleteButtonWrapper: { paddingTop: '40px' },
  addIcon: { color: '#008000' },
  deleteIcon: { color: '#FF0000' },
}));

const rowTemplate = { from: '', to: '', distance: '', fuel: '' };

const SheetExample2 = () => {
  const classes = useStyles();

  const rowIdIndex = useRef(1);
  const [rows, setRows] = useState([]);
  const [gridHeight, setGridHeight] = useState(100);

  const addNewRow = () => {
    setRows([...rows, { id: rowIdIndex.current, ...rowTemplate }]);
    setGridHeight((previousState) => previousState + 90);
    rowIdIndex.current++;
  };

  const onFieldChange = (rowId, field) => (value) => {
    const row = rows.find((row) => row.id === rowId);
    row[field] = value;
    setRows([].concat(rows));

    //calculation example for fuel, distance...
    if (row.from != null && row.to != null && row.from !== '' && row.to !== '') {
      row['distance'] = `${Math.floor(Math.random() * 100) + 100} km`;
      row['fuel'] = `${Math.floor(Math.random() * 100) + 50} L`;
    }
  };

  const deleteRow = (rowId) => {
    const remainedRows = rows.filter((row) => row.id !== rowId);
    setRows(remainedRows);
    setGridHeight((previousState) => previousState - 90);
  };

  const handleClick = (row, columnId) => {
    if (columnId === 'delete') {
      const remainedRows = rows.filter((r) => r.id !== row.id);
      setRows(remainedRows);
    }
  };

  return (
    <Grid container>
      <Grid item xs={12}>
        <IconButton variant='contained' onClick={addNewRow}>
          <AddCircleIcon fontSize='large' className={classes.addIcon} />
        </IconButton>
      </Grid>
      <Grid item xs={12}>
        <Table
          rowHeight={70}
          onCellClick={(row, columnId) => handleClick(row, columnId)}
          focusOnSingleClick={true}
          columns={[
            {
              id: 1,
              title: () => 'Start',
              value: (row, { focus }) => {
                return <Input value={row.from} onChange={onFieldChange(row.id, 'from')} focus={focus} />;
              },
            },
            {
              id: 2,
              title: () => 'End',
              value: (row, { focus }) => {
                return <Input value={row.to} onChange={onFieldChange(row.id, 'to')} focus={focus} />;
              },
            },
            {
              id: 3,
              title: () => 'Distance',
              value: (row, { focus }) => {
                return <Input value={row.distance} onChange={onFieldChange(row.id, 'distance')} focus={focus} />;
              },
            },
            },
            {
              id: 'delete',
              title: () => 'Action',
              value: () => {
                return (
                  <IconButton variant='contained' color='primary'>
                    <DeleteForeverIcon fontSize='large' className={classes.deleteIcon} />
                  </IconButton>
                );
              },
            },
          ]}
          rows={rows}
          getRowKey={(row) => {
            row.id;
          }}
        />
      </Grid>
    </Grid>
  );
};
export default SheetExample2;

react_spreadsheet_grid_overrides.css

...
.SpreadsheetGrid__headCell {
  display: inline-flex;
  position: relative;
  color: white;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: none;
  padding: 10px 8px 8px 8px;
  text-align: left;
  background-color: #000000;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}
...

package.json

{
  "name": "client",
  "version": "1.0.0",
  "description": "SheetViewExample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon index.js",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.7.1",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.34",
    "async": "^3.1.1",
    "axios": "^0.19.0",
    "base-64": "^0.1.0",
    "express": "^4.17.1",
    "is-number": "^7.0.0",
    "isomorphic-unfetch": "^3.0.0",
    "js-cookie": "^2.2.1",
    "jwt-decode": "^2.2.0",
    "konva": "^4.0.18",
    "lodash": "^4.17.15",
    "next": "^9.1.4",
    "next-cookies": "^1.1.3",
    "next-i18next": "^0.52.1",
    "nodemon": "^1.19.4",
    "perf_hooks": "0.0.1",
    "pigeon-maps": "^0.14.0",
    "pigeon-marker": "^0.3.4",
    "pigeon-overlay": "^0.2.3",
    "react": "^16.12.0",
    "react-countdown-now": "^2.1.2",
    "react-dom": "^16.12.0",
    "react-draggable": "^4.2.0",
    "react-konva": "^16.9.0-1",
    "react-spreadsheet-grid": "^2.0.0",
    "seedrandom": "^3.0.5",
    "socket.io-client": "^2.3.0",
    "use-image": "^1.0.5"
  },
  "repository": {
    "type": "git",
    "url": ""
  }
}

The changes in our css were not applied until we used !important after every css property.

• 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)

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

• react-spreadsheet-grid version:
• React version:
• Operating System:

Relevant code or config

What you did:

What happened:

Problem description:

Suggested solution:

Think it would be a bit neater to be able to do something like this:

class MyAwesomeGrid extends React.Component {
  render() {
    return (
      <Grid 
        columns={[
          {
            title: () => 'Name', 
            width: 100,
            value: (row, { focus }) => {
                return (
                    <Input  
                      value={row.name}
                      focus={focus}
                    />
                );
            }
           ...

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?

Hi admin, first of all, thank you for this super useful packaging.

How to plan the support context menu in the roadmap?

Looking forward to hearing from you!

Thank you!

First thanks to open this wonderful library.
I want to use it my website admin page, and I often to access it with my mobile phone.
What I just want to is a horizontal scrollbar when small screen.

https://www.w3schools.com/howto/howto_css_table_responsive.asp

You can access above url and then test it with small screen, when screen got small,
it generate a horizontal scrollbar that can see contents easily.
Is there a way to do it?

I tried like

`<div style={{ overflowX: 'auto}}>
<Grid ... />

But it seems not working. :)

• react-spreadsheet-grid version: 2.0.0
• React version: 16.13.1
• Operating System: win 10 x64

My code:
*`import React, { Fragment, useEffect, useState } from 'react';
import { Grid, Input, Select } from 'react-spreadsheet-grid'
import './App.css';

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

  const [rows, setRows] = useState([{
    id: 1,
    name: '',
    positionId: 1
  }]);
  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 addRow = () => {
    const id = [...rows][rows.length - 1].id + 1;
    const newRow = {
      id: id,
      name: '',
      positionId: 1
    };

    setRows(rows.concat(newRow))

  }

  useEffect(() => {
    console.log(rows)
  }, [rows])
  return (
    <Fragment>
      <Grid isScrollable={false}
        columns={[
          {
            title: () => 'Name',
            value: (row, { focus }) => {
              // You can use the built-in Input.
              return (
                <Input
                  value={row.name}
                  focus={focus}
                  onChange={onFieldChange(row.id, 'name')}
                />
              );
            }
          }, {
            id: 'position',
            title: () => {
              return <span>Position</span>
            },
            value: (row, { focus }) => {
              return (
                <Select
                  items={positions}
                  selectedId={row.positionId}
                  isOpen={focus}
                  onChange={onFieldChange(row.id, 'positionId')}
                />
              );
            }
          }
        ]}
        rows={rows}
        getRowKey={row => row.id}
      />
      <button onClick={addRow}>Add row</button>
    </Fragment>
  );
}

export default App;`*

What happened:

Created function that adds new row, but it's not working, console.log() shows that new data was added :/

Thats happens only if isScrollable set to false

• react-spreadsheet-grid version: latest
• React version: latest
• Operating System: mac os chrome

Relevant code or config

What you did:
press keyboard ← when firstcell active
What happened:

no error
Problem description:

Suggested solution:

• 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

i need force active cell can you help me ?

Thanks :)

I was expecting it to go to cell below on pressing enter and go to cell to the right on pressing tab. This is how spreadsheets normally do it, no?

(One weird thing I noticed, which made me think it's already supposed to work like that in #35, is that it does work like that if you don't add any onChange listener to the Input. )

The row has an incorrect automatic height. The row border is not considered.

i'd like to be able copy & paste a range of rows and columns, similar to what you can do in Excel at the moment.

this could be copying between cell ranges on the same grid, between two separate grid instances, or from somewhere off-grid (e.g. Excel).

Hi,

I'm looking to select the target cell text using onClick or onFocus (i.e. when user single clicks on a cell, all text is highlighted)

{
                title: () => 'Order',
                value: (row, { active }) => {
                    return (
                        <Input
                        ref="orderInput"
                        value={row.order || 0}
                        onClick={this.handleClick.bind(this)}
                        onChange={this.onFieldChange.bind(this, row.plu[0], 'order')}
                        />
                    )
                }
 
```}

If I do onClick={console.log("clicked")}, I get a console log. 

if I do onClick={this.handleClick.bind(this)} or onClick={this.handleClick} and try to console.log inside the handleClick function, I get no response. 

Any ideas on how I could get this to work? 

Thanks in advance

$ PRODUCT_TYPE=webapp parcel entry/src/index.html --open
Server running at http://localhost:1234 
⚠️  Could not load existing sourcemap of "../../node_modules/react-spreadsheet-grid/lib/bundle.js".
🚨  /node_modules/react-spreadsheet-grid/lib/bundle.js:520:83: Unterminated regular expression (520:83)
  518 |         if (sourceMap) {
  519 |                 // http://stackoverflow.com/a/26603875
> 520 |                 css += "\n + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
      |                                                                                                 ^
  521 |         }
  522 | 
  523 |         var blob = new Blob([css], { type: "text/css" });

• react-spreadsheet-grid version: 1.4.3
• parcel-bundler version: 1.12.4

• react-spreadsheet-grid version: 1.4.3
• React version: 16.8.6
• Operating System: osx 10.14

Relevant code or config

const rowData = [
  {id: "1", date: "20-Feb-19", group: "Mechanical", advent: "Planned"},
  // and so on...
];

export function DowntimeTable() {
  const groups = ["Operational", "Mechanical", "Electrical", "Mining", "Uncontrolled"];
  const advents = ["Planned", "Unplanned"];
  return (
    <Grid
      columns={[
        {
          title: () => "Date",
          value: (row, {focus}) => {
            return <Input value={row.date} focus={focus} />;
          },
        },
        {
          title: () => "Group",
          value: (row, {focus}) => {
            return <Select value={row.group} isOpen={focus} items={groups} />;
          },
        },
        {
          title: () => "Advent",
          value: (row, {focus}) => {
            return <Select value={row.advent} isOpen={focus} items={advents} />;
          },
        },
      ]}
      rows={rowData}
      getRowKey={(row) => row.id}
    />
  );
}

What happened:

• react-spreadsheet-grid version: 1.4.3
• React version: 16.4.1
• Operating System: Windows 7 64 bits

Reproducible example

https://codesandbox.io/s/9z87w6vk34

When grid is empty, click on BUG button : "there are no rows" is displayed even if there is 1 row

Then click on the scroll arrow : magic! Row appears

Intent

I have a Grid that gets updated when redux state is updated.

When the page is loaded, redux state is empty then the grid is updated with no rows a couple times then redux state is filled so the grid is updated with some data

Issue

The grid is not refreshed when updated with some data, so the message "there are no rows" stays

Analysis

I think this is what is happenning:

• Grid is updated with no rows a couple times, SpreadsheetGridScrollWrapper.calculateScrollState is triggered and SpreadsheetGridScrollWrapper.state.last is set to 0
• Grid is updated with some data, SpreadsheetGridScrollWrapper.calculateScrollState is triggered so that SpreadsheetGridScrollWrapper.state.last is updated...
• ... but SpreadsheetGridScrollWrapper.calculateScrollState is throttled with requestAnimationFrame (scrollWrapper/index.js:31) so it is not executed before the grid render and...
• ... when the grid renders SpreadsheetGridScrollWrapper.state.last is still equal to 0 so Grid takes the element from 0 to 0, that means nothing, that's why "there are no rows" is displayed even if this.props.rows contains some data

Fix

I really don't know 😞

The only workaround I found is to encaspulate the state update in requestAnimationFrame but I have the feeling that it can cause more bugs: https://codesandbox.io/s/9qy425m30o

Would be a nice-to-have :)