Devextreme-reactive: onColumnWidthsChange prop returning NaN in TableColumnResizing

[avinoamsn]

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Description

I'm trying to set up column resizing for a grid. As best I can tell my implementation follows the docs, but onColumnWidthsChange isn't returning a numeric value when I try to drag a column. So far I haven't been able to set up a min repro, which leads me to believe the error is in the implementation specific to my component. This particular grid is using a few different plugins, so I've included the entire component below. Perhaps the issue is related to the order of the grid plugins in the grid component, or some other obvious error.

This is the log of the args passed to my setColumnWidths function:
Id NaN
(Id being the name of the column).

*For clarity, usePersistedState is a custom hook whose operation is identical to useState in this context.

Environment

• devexpress: 2.1.2
• react: 16.10.2
• browsers: most recent firefox & chrome
• material-ui: 4.5.1

The component:

import React, { useState } from 'react'

import {
    FilteringState,
    IntegratedFiltering,
    IntegratedPaging,
    IntegratedSorting,
    PagingState,
    Sorting,
    SortingState,
    TableColumnResizing,
    TableColumnWidthInfo,
} from '@devexpress/dx-react-grid'
import {
    DragDropProvider,
    Grid as DXGrid,
    PagingPanel,
    Table,
    TableColumnReordering,
    TableFilterRow,
    TableHeaderRow,
} from '@devexpress/dx-react-grid-material-ui'

import { usePersistedState } from './hooks'

interface GridProps {
    data: Array<object>
    name: string
}

/**
 * Modular grid component for displaying rows of information.
 *
 * @param data the data that will populate the grid
 * @param name a unique key (usually component name) that will be used
 *  to persist the state of the component in localStorage
 */
export const Grid = ({ data: rows, name: key }: GridProps): JSX.Element => {
    // columns derived from row keys
    const columnNames = Object.keys(rows[0])
    const columns = columnNames.map(col => ({
        name: col,
        title: col,
    }))

    // row sorting (default is Id)
    const [sorting, setSorting] = useState([
        { columnName: 'Id', direction: 'asc' },
    ])

    // column order (default derived from gql query fields order)
    const [columnOrder, setColumnOrder] = usePersistedState(
        `${key}ColumnOrder`,
        columnNames
    )
        /*******COLUMN RESIZING SECTION*******/
    // TODO: column resizing
    const [columnWidths, setColumnWidths] = usePersistedState(
        `${key}ColumnWidth`,
        columnNames.map(col => ({
            columnName: col,
            width: 100,
        }))
    )
        /*******/COLUMN RESIZING SECTION*******/

    // paging
    const [currentPage, setCurrentPage] = usePersistedState(
        `${key}CurrentPage`,
        0
    )
    const [pageSize, setPageSize] = usePersistedState(`${key}PageSize`, 5)
    const [pageSizes] = usePersistedState(`${key}PageSizes`, [5, 10, 15])

    return (
        <DXGrid rows={rows} columns={columns}>
            <DragDropProvider />

            <SortingState
                sorting={sorting as Sorting[]}
                onSortingChange={setSorting}
            />
            <IntegratedSorting />

            <FilteringState />
            <IntegratedFiltering />

            <PagingState
                currentPage={currentPage}
                onCurrentPageChange={setCurrentPage}
                pageSize={pageSize}
                onPageSizeChange={setPageSize}
            />
            <IntegratedPaging />

            <Table />
            <TableColumnReordering
                order={columnOrder}
                onOrderChange={setColumnOrder}
            />
        /*******COLUMN RESIZING SECTION*******/
            <TableColumnResizing
                columnWidths={columnWidths}
                onColumnWidthsChange={setColumnWidths}
            />
        /*******/COLUMN RESIZING SECTION*******/
            <TableHeaderRow showSortingControls />
            <TableFilterRow />
            <PagingPanel pageSizes={pageSizes} />
        </DXGrid>
    )
}

[LazyLahtak]

Hi @avinoamsn,

As I see, you import the TableColumnResizing plugin from '@devexpress/dx-react-grid' package. If you want to use the default component, you should import this plugin from the '@devexpress/dx-react-grid-material-ui' package. For more information see docs.
If you have any further questions, let us know.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.