I custom expandIconProps to control the expand icon is loading or not .
I changed the component state like loadingKes and call the api forceUpdateTable, the expandIconProps not be called anymore , i also change the datasource ,still.

code source:

look like this :

In case when we use input box in the Inline Editing, we lose focus and component state at the first value change in text box, gif file with example and code you can find below

const { Overlay } = ReactOverlays

const CellContainer = styled.div`
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0 -5px;
  padding: 5px;
  border: 1px dashed transparent;
`

const GlobalStyle = createGlobalStyle`
  .BaseTable__row:hover,
  .BaseTable__row--hover {
    ${CellContainer} {
      border: 1px dashed #ccc;
    }
  }
`

const Select = styled.select`
  width: 100%;
  height: 30px;
  margin-top: 10px;
`

class EditableCell extends React.PureComponent {
  state = {
    value: this.props.cellData,
    editing: false,
  }

  setTargetRef = ref => (this.targetRef = ref)

  getTargetRef = () => this.targetRef

  handleClick = () => this.setState({ editing: true })

  handleHide = () => this.setState({ editing: false })

  handleChange = e =>
    this.setState({
      value: e.target.value,
      editing: false,
    })

  render() {
    const { container, rowIndex, columnIndex } = this.props
    const { value, editing, cellData } = this.state


    return (
      <CellContainer ref={this.setTargetRef} onClick={this.handleClick}>
        {!editing && value}
        {editing && this.targetRef && (
          <Overlay
            show
            flip
            rootClose
            container={container}
            target={this.getTargetRef}
            onHide={this.handleHide}
          >
            {({ props, placement }) => (
              <div
                {...props}
                style={{
                  ...props.style,
                  width: this.targetRef.offsetWidth,
                  top:
                    placement === 'top'
                      ? this.targetRef.offsetHeight
                      : -this.targetRef.offsetHeight,
                }}
              >
                <input type="text"  value={value} onChange={this.handleChange} />
              </div>
            )}
          </Overlay>
        )}
      </CellContainer>
    )
  }
}

const columns = generateColumns(2)
const data = generateData(columns, 10)

columns[0].cellRenderer = EditableCell
columns[0].width = 300

export default () => (
  <>
    <GlobalStyle />
    <Table fixed columns={columns} data={data} />
  </>
)

Is it possible to set the component to autogenerate the row id and have the component generate this key on its own, like 1,2,3,4,5?

We're starting to use react-base-table on Shotgun. One of the things we're working on is saving column sizes after resizing them. We have this functionality in our current grid, but need to port this functionality to our new grid that is using <BaseTable />. The BaseTable component has an onColumnResize prop, but in our case, we really only want to save settings once the column is finished resizing. I have a PR that adds an onEndColumnResize prop to <BaseTable /> for columns that are resizable.

Is this something you would consider adding to <BaseTable />?

When hovering any row triggers headerRenderer and cellRenderer for each column.

Test:
put console.log in inside the callbacks and move mouse around.

The resizer indicator line position will be incorrect when using right frozen columns and drag too much.

gif below:

BTW. How to custom resizer indicator style , something like width 、maxWidth

can react-base-table support highlight a selected row?

Expand lag in develop env but not appear in production mode .It cost about 20 seconds when i expand a row in 10000 rows table.

when Browser resize, the scrollbarSize will change.so i think we should update state.scrollbarSize.

Right now I'm always passing a width to every column, if I don't pass, I couldn't see it on table.

I think we can just have a prop called defaultColumnWidth then we can just use it while we're calculating column width.

  getColumnWidth(column, key) {
    const {
      isFluid,
      defaultColumnWidth,
      initialColumnWidths,
    } = this.props;
    const baseWidth = 20;

    if (isFluid) {
      return initialColumnWidths[column.key] || column.width || (baseWidth + (column.title.length * 10));
    }

    return initialColumnWidths[column.key] || column.width || defaultColumnWidth;
  }

this function will gonna make a variable called calculatedColumns after aggregating all columns. We can use it inside this functionality:

export function adjustColumnWidths(calculatedColumns, calculatedColumnsWidth, expectedWidth) {
  if (expectedWidth > totalWidth) {
    return distributeWidth(columns, expectedWidth - calculatedColumnsWidth);
  }
  return columns;
}

function distributeWidth(columns, _remainingWidth) {
  const newColumns = [];
  let remainingWidth = _remainingWidth;
  const perColumnWidth = remainingWidth / columns.length;

  columns.forEach(column => {
    const newColumnWidth = Math.floor(column.width + perColumnWidth);
    remainingWidth -= perColumnWidth;
    newColumns.push({
      ...column,
      width: newColumnWidth,
    });
  });

  return newColumns;
}

This whole functionality will give us a chance to pass columns without width key.

In my project, we've a toggle column feature and sometimes we're showing only 1 or 2 columns, it would be nice to have this fluid functionality to spread them into whole table.

I know rowID as number is not scalable but some of our data will not gonna be bigger to put as string. yep, in some cases our rowID is just number, I don't want to aggregate my data and make them string for this case, it would be nice to accept number and string for rowID propType.

React-Texty Tooltip not working with AutoResizer

As of version 1.7.0 scrollToRow no longer works.

The issue seems to be the scrollToLeft statement that was added last in the scrollToRow function.

This statement resets the horizontal scrolling position to what it was before the method was called.

Any chance in-place edit and filtering in headers will be added as hooks?
I would especially love to see in-place edit with support for excel like formulas.

Hey guys, I'm trying to write a wrapper for Table and Column, but I don't know what's wrong.

This is my Table component wrapper:

This is my Column component wrapper:

This is where I'm using it:

This is how it's being rendered:

This is how it should be rendered:

The weird part is that the console.log on Column component is not printing anything.

Am I doing anything wrong? This is the right way to do this?

Thank you,

Rod

I am trying to define a custom Column component with selection functionality but the cellRenderer and headerRenderer props do not seem to use the custom components I've defined in the file when I import the Column to use.

Example can be found here: https://codesandbox.io/s/checkboxcolumnexample-rkpjt

I am on "react-base-table": "1.6.5"

Some features won't be implemented in BaseTable itself, but I will provide some examples for them.

• Col/Row Span
• Infinite Loading
• Draggable Rows
• Selection
• Cell with Tooltip
• Inline Editing
• Filter in Header
• Action Column
• Columns Reordering
• Columns Grouping
• Data Grouping

It appears that when using maxHeight with emptyRenderer, it does not actually use emptyRenderer.

I created this sandbox to replicate the issue. Not sure if I should be setting height if data.length === 0?

Basically, I was trying to have render only up to a certain height, but if no rows are available to then render a message such as "No Data". Thanks in advance!

Why react is still complaining about the key?

Great work btw, thx

This looks like an amazing project with great performance. Congratulations! I wanted to ask: Are there any plans to add spreadsheet like functionality for making all cells editable?

hi, we're always showing scrollbar inside our tables and right now if there's no mouse plugged to the computer, our gridtables height computation looks problematic.

If could be a change to add a prop for this? like defaultScrollbarSize? cause I don't see any other solution to make getScrollbarSize util get this size always.

The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead

I want to custom the expand icon styles ， but i found it is very difficult. Because when i use the
table components to reset expandIcon component ,i have to handle the onExpand event.
I just want to set the expand icon display styles, only use css or custom component easily.

I was trying to use a react-apollo-hook in a custom cellRenderer in order to load data into a modal if the user clicks. However, I get the error message: Invalid hook call: Hooks can only be called inside of the body of a function component.

I believe it is because of the way cellRenderer is being called here.

Is there a different way to accomplish this. Or is using hooks in a cell outside of the scope of this project? Thanks for the help in advance.

For example I was trying to do something like this:

import React from 'react'
import PropTypes from 'prop-types'
import { useLazyQuery } from '@apollo/react-hooks'
import { get } from 'lodash'

import { QUERY } from './queries'

export const InterpretationsCell = ({ cellData,  }) => {

  const [loadDetails, { loading, data }] = useLazyQuery(QUERY)

  ...do something
  
  return <p>{cellData}</p>
}

InterpretationsCell.propTypes = {
  column: PropTypes.shape({
    variantType: PropTypes.string.isRequired,
    idKey: PropTypes.string.isRequired,
  }).isRequired,
}

export default InterpretationsCell

assuming I have 100 columns data, the 100 columns will rendered at once. can we support this feature of lazy render in column level?

Here is the wishlist I'd like to have for the next major version:

• Don't use Grid for table header
• Replace react-virtualized with react-window #12
• remove deprecated lifecycles #10
• Dynamic row heights #170
• Make virtualization configurable
• A11y
• UT
• plugin support
• rewrite with TypeScript
• support custom children key

Breaking changes:

• use rollup to bundle package
• omit placeholders in rowRenderer
• rename tagName to as or elementType
• rename scrollToPosition to scrollTo
• rename headerRenderer to headerRowRenderer
• rename headerRenderer for Column to headerCellRenderer
• move AutoResizer to a separate package

Nice to have:

• better size calculation to support cell with borders #149

I have code like below

{
      key: 'sectorName',
      dataKey: 'sectorName',
      width: 100,
      title: <MyComponent {...someProps}>,
      frozen: Column.FrozenDirection.LEFT,
    }

this will cause a stack overflow, because in the source code

 if (!isObjectEqual(nextColumns, columns) || nextProps.fixed !== this.props.fixed) {
      this.columnManager.reset(nextColumns, nextProps.fixed);
  }

the isObjectEqual will throw an error, is this a bug? because I want to render a component in my header cell

Hi, what is the best practice for changing table theme color dynamically (example for light or dark theme) since the documentation only mention using scss

Thanks

Hi, basead on the example I added rowEventHandlers with console.log and it only run when the page is loaded, and nothing happened when row is clicked

const rowEventHandlers = {
    onClick: console.log('clicked'),
    
  }
...
<BaseTable ... rowEventHandlers={rowEventHandlers} />

And based on your example

const rowEventHandlers = {
  onClick: action('click'),
  onDoubleClick: action('double click'),
  onContextMenu: action('context menu'),
  onMouseEnter: action('mouse enter'),
  onMouseLeave: action('mouse leave'),
}

How to get the event, because it only passed string ?

Thanks

Dragable Row example resets data order on drag end.

I use a table with frozen columns , it is not just-in-time when i scroll. Is it a bug from react-window ?
but there is a example doesn`t have this problem in document :
https://autodesk.github.io/react-base-table/examples/expand-icon-props

there is my demo code
https://codesandbox.io/s/dazzling-ardinghelli-xo1yh?fontsize=14

How can i solve it ?

The currenty way to create multi header like this: https://autodesk.github.io/react-base-table/examples/multi-header.
I`v to say it is not simple.

The simple way maybe like this ,just use the children attribute.

I expected columns to be numbered accordingly.
https://autodesk.github.io/react-base-table/examples/multi-sort

does row span is supported? I find the clospan is supported in the example.

I use headerRenderer to custom the table header. And there are some frozen columns.
I want to render different element in left columns and right columns, but i can`t know which frozen type is it.

Shall you add a parameter to flag it ? like this :
headerRenderer = (cells, columns, headerIndex, frozen)=>{}

should be done before #12

I want to add an empty column with auto width to fill in blank space and separate data from columns with actions to make it nicer to the eyes. Is it possible?

https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZizbhoMADIginAJZgsfaAE94OTgDodANwAGLGDAAOWnXoC0JgGZQAXDDoBWBwAPAG47OEoQAl8sYkMw22UOGAIQAHcAJTxOQkI+GgBvGG0IAGVgVPh4XSwZYBwqiBgAXyYMAD4YAvDtDxgaEvLK6r02ghwoRAIwGAAeDS0a9qHKEaxZgHoFlyx28PHJ6bgG+AgWZqUcIIcorhwPIkR4WBo29E6acNmAFSIAIxM4XsEmo6AKIMgF3s9m4UCIYNhRCh0MQEBwAEkyhVVjUgSl0lkwDlxgQwalMtlcgRkRs9qwgA

I don't know whether this is a bug, when the total width of header is exceed the table width. if there is no data, the horizontal scrollbar will not be shown, only there are some data on table body, the horizontal scrollbar shown

As the title mentioned, when I have a table and the columns not only contains the left frozen columns, but also the right frozen columns, because I want to merge some columns in header, like this example https://autodesk.github.io/react-base-table/examples/multi-header, so I need implement the callback headerRenderer, but this callback will be called 3 times, and there is no indicator which is left table main table, and right table, in user's (developer who use this component) view, I think this function will be called one time only, because there is only one header.