Devextreme-reactive: Unable to implement custom TableColumnResizing

[rao123dk]

• [ X ] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [X ] React Grid
• [ ] React Chart
• [ ] React Scheduler

Current Behaviour

I am providing same props according to this docs https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/table-column-resizing/ .
But Nothing happening. Even its html elements not appearing in the DOM.

Expected Behaviour

It should work.

Steps to Reproduce (for Bugs)

columnWidths={columnWidths}
minColumnWidth={10}
defaultColumnWidths={columnWidths}
onColumnWidthsChange={this.onColumnWidthChange}
/>

Environment

• @devexpress/dx-react-core: 1.8.0
• react: 16.4.2
• browser: Chrome 70.0.3538.77
• bootstrap: none
• react-bootstrap: none
• material-ui: none

[rao123dk]

Please send me one custom working Table Column Resizing demo.

[SergeyAlexeev]

Hi,

Would you please clarify what the 'custom working Table Column Resizing demo' means? What customization do you want to implement?

Meanwhile, did you see this article with the source code that you can use as a starting point?

[rao123dk]

Actually I am implementing own custom template(nor BootStrap3/ BootStrap4 template) for table rendering. as per your developer API Table I have passed all custom own components and its works. But How can I impalement TableColumnResizing same as table.

I have Passed all the props like this, but noting happening
<TableColumnResizing columnWidths={columnWidths} minColumnWidth={10} defaultColumnWidths={columnWidths} onColumnWidthsChange={this.onColumnWidthChange}

[rao123dk]

I have followed this link for custom theme. could you please guide how could I implement tableColumnResizing feature in this.

[Ekta3012]

I have followed this link for custom theme. could you please guide how could I implement tableColumnResizing feature in this.

I am also facing the same issue @SergeyAlexeev .

[SergeyAlexeev]

Thank you for the clarification.

If you are working on a custom theme, you can use any of our theme packages(dx-react-grid-bootstrap3, dx-react-grid-bootstrap4, dx-react-grid-material-ui) to start.

Let's look at the 'dx-react-grid-bootstrap3' sources. There are two folders - 'plugins' and 'templates'. The 'plugins' source contains React components that wrap the related plugins from the 'dx-react-grid' package, but don't contain html tags or styles. They use components from the 'templates' folder to render UI.

So, to implement the column resizing feature in you custom theme, you need to create the 'TableColumnResizing' plugin and templates that are responsible for related UI elements rendering, such as table header cell and resizing control.

I've created a sample that shows the described approach in action. Please note, I skip the sorting and grouping features for demo purposes.

[rao123dk]

Hi, Thanks for your quick answer, Actually again one new problems occurs while implementing with Typescript. Actually I forgot to mention before thread.
sample code is this:-

import { withComponents } from "@devexpress/dx-react-core";
import { TableHeaderRow as TableHeaderRowBase } from "@devexpress/dx-react-grid";
import { TableHeaderCell as Cell } from "../templates/table-header-cell";
import { TableRow as Row } from "../templates/table-row";
// import { SortLabel } from "../templates/table-header-cell/sort-label";
// import { GroupButton } from "../templates/table-header-cell/group-button";
import { Title } from "../templates/table-header-cell/title";
import { Content } from "../templates/table-header-cell/content";

export const TableHeaderRow = withComponents({
Cell,
Row,
Content,
SortLabel: null,
Title,
GroupButton: null
})(TableHeaderRowBase);

TableHeaderRow.ROW_TYPE = TableHeaderRowBase.ROW_TYPE;

Then withComponents giving an error "'withComponents' only refers to a type, but is being used as a value here."

[SergeyAlexeev]

Currently, we don't provide a TypeScript definition for the withComponents function.

However, you can create a plugin without the withComponents function:

export class TableHeaderRow extends React.PureComponent {
  render() {
    return (
      <TableHeaderRowBase
        cellComponent={Cell}
        rowComponent={Row}
        contentComponent={Content}
        titleComponent={Title}
        sortLabelComponent={null}
        groupButtonComponent={null}
        {...this.props}
      />
    );
  }
}

[SergeyAlexeev]

We are closing the issue due to inactivity. Feel free to reopen it if you need further assistance.

[rao123dk]

Thanks working fine.

[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.