React-data-grid: "DragItemTypes" not exported by react-data-grid

[vadManuel]

Versions:
"react-data-grid": "^7.0.0-canary.16"
"react-data-grid-addons": "^7.0.0-alpha.24"

Problem:
react-data-grid-addons/lib/draggable/DraggableHeaderCell.js
react-data-grid-addons/lib/toolbars/GroupedColumnsPanel.js
Those two files in react-data-grid-addons import DragItemTypes from react-data-grid, but DragItemTypes is not exported by react-data-grid.

Fix (for now):
Change DragItemTypes.Columns to "columns" in their respective default exports.

[amanmahajan7]

react-data-grid-addons package will be removed in v7. We recommend copying the relevant components from react-data-grid-addons into your local repository and tweak it as needed.

https://github.com/adazzle/react-data-grid/blob/canary/CHANGELOG.md

[biocyberman]

Will the example be updated accordingly? https://codesandbox.io/s/qqlxyk43j9?from-embed=&file=/src/index.js

Consider the example, are you telling that users should copy content of Toolbar, Data, Filters and remove the following line?

import { Toolbar, Data, Filters } from "react-data-grid-addons";

It will be helpful to provide the rationale of the removal.

[PedrinhowVieira]

I'm trying to implement DropDownEditor in a table.

import * as DataGridAddons from 'react-data-grid-addons';

const typeEditor = <DataGridAddons.DropDownEditor options={typeOptions} />;

But I'm getting the same issue:

/node_modules/react-data-grid-addons/lib/toolbars/GroupedColumnsPanel.js
Attempted import error: 'DragItemTypes' is not exported from 'react-data-grid'.

Those examples from the official page are not working with the new changes so I'm looking here:
https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/AllFeatures.tsx

If react-data-grid-addons will be removed, how the implementation of drop down inside tables will be made?
I did not manage to make it work, do you have any fix or suggestion for these?

[vadManuel]

@PedrinhowVieira I'm using Material-UI, but you can change the dropdown to whatever UI framework you want (if any).

import React from 'react'
import PropTypes from 'prop-types'
import TextField from '@material-ui/core/TextField'
import Autocomplete from '@material-ui/lab/Autocomplete'

export class DropdownCell extends React.Component {
  constructor(props) {
    super(props)

    this.state = { value: props.value }

    this.ref = React.createRef()
    this.onChange = this.onChange.bind(this)
  }

  getValue() {
    return { [this.props.column.key]: this.state.value }
  }

  getInputNode() {
    return this.ref
  }

  onChange(_, value) {
    this.setState({ value })
    // This will close the dropdown as soon as an option is selected
    // this.props.onCommit()
  }

  render() {
    return (
      <Autocomplete
        ref={this.ref}
        autoHighlight
        value={this.state.value}
        options={['option 1', 'option 2', 'option 3']}
        getOptionLabel={s => s}
        getOptionDisabled={s => this.state.value === s}
        onChange={this.onChange}
        renderInput={params => (
            <TextField
                {...params}
                size='small'
                fullWidth
            />
        )}
      />
    )
  }
}

DropdownCell.propTypes = {
  value: PropTypes.any,
  onCommit: PropTypes.func
}

[PedrinhowVieira]

@vadManuel Thanks for the answer. I'm also using Material-UI for my app. One thing tho, how would I add this DropdownCell component to the react-data-grid table?
Currently in those examples they use

{
      key: 'title',
      name: 'Title',
      editor: React.forwardRef((props, ref) => <DropDownEditor ref={ref} {...props} options={titles} />),
      width: 200,
      resizable: true,
      formatter(props) {
        return <>{props.row.title}</>;
      }
 },

[vadManuel]

@PedrinhowVieira

Create a reusable function instead of what they did.

export const ObjectFormatter = (props) => {
  return <div>{props.row[props.column.key]}</div>
}

DropdownFormatter.propTypes = {
  column: PropTypes.shape({
    key: PropTypes.string
  }),
  // custom prop type handler
  row: props => {
    if (
      props.column && props.column.key &&
      props.row && props.row[props.column.key] !== ''
    )
      return

    return new Error(`Invalid value for "${props.column.key}" of "${props.row[props.column.key]}".`)
  }
}

Then put it on one of your columns like so...

columns = [
  { name: 'Column Name', key: 'columnKey', width: 128, defaultEntry: null, formatter: ObjectFormatter, editor: DropdownCell }
]

Remember that if you want to pass anything to that specific column you can add it as a field.
For example: { name: 'Column Name', ..., editor: DropdownCell, otherStuff: { hi: 'im other stuff', stuff: 123 }}
Now this is accessable via props.column.otherStuff.

[PedrinhowVieira]

@vadManuel Thank you for the help!