Widths

By default, the KendoReact Grid is responsive and has no fix width—the component behaves like a block-level element and expands to a 100% width (the width of the parent element).

As a result, the Grid will resize based on the available space.

Getting Started

By default, the Grid will equally divide its width between its columns and it will responsively expand or shrink them when the width of its parent container is changed.

Depending on the requirements of your scenario, you can set the widths of the Grid columns by using either of the following specifics in the Grid:

  • If all columns have set widths and the sum of these set widths is larger than the width of the Grid, the Grid will display a scrollbar at the bottom of the table. If the sum of all column widths is less than the width of the Grid, the Grid will render a white space for the remaining space after the last column.
  • If you leave a column that has no fixed width after the columns that have set widths, that column will shrink or expand when the Grid is resized to fill in the remaining space. If the Grid is resized so that it becomes smaller than the sum of all other column widths, the width of the buffer column will become zero and will visually disappear.

Setting a Minimum Column Width

You can dynamically change the width of the Grid columns and set a minimum width value by subscribing to the window.resize event. When the width of the Grid is smaller that the combined minimum width of all columns, a horizontal scrollbar will appear. If the scrollbar is longer than the combined minimum width of the Grid columns, the columns will proportionally expand to fill the remaining space.

The resize event is not debounced to show the main logic. Debouncing can be done depending on the application requirements.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';
const columns = [
    { field: "ProductID", title: "ID", minWidnt: 50 },
    { field: "ProductName", title: "Name", minWidnt: 200 },
    { field: "Category.CategoryName", title: "CategoryName", minWidnt: 200 },
    { field: "UnitPrice", title: "Price", minWidnt: 100 },
    { field: "UnitsInStock", title: "In stock", minWidnt: 100 }
];
const ADJUST_PADDING = 4;
const COLUMN_MIN = 4;
class App extends React.Component {
    minGridWidth = 0;
    state = {
        gridData: products,
        setMinWidth: false,
        gridCurrent: 0
    }

    componentDidMount() {
        this.grid = document.querySelector('.k-grid');
        window.addEventListener('resize', this.handleResize);
        columns.map(item => this.minGridWidth += item.minWidnt);
        this.setState({
            gridCurrent: this.grid.offsetWidth,
            setMinWidth: this.grid.offsetWidth < this.minGridWidth
        });
    }

    handleResize = () => {
        if (this.grid.offsetWidth < this.minGridWidth && !this.state.setMinWidth) {
            this.setState({
                setMinWidth: true
            });
        } else if (this.grid.offsetWidth > this.minGridWidth) {
            this.setState({
                gridCurrent: this.grid.offsetWidth,
                setMinWidth: false
            });
        }
    }

    setWidth = (minWidth) => {
        let width = this.state.setMinWidth ? minWidth :
            minWidth + (this.state.gridCurrent - this.minGridWidth) / columns.length;
        width < COLUMN_MIN ? width : width -= ADJUST_PADDING;
        return width;
    }

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px' }}
                    data={this.state.gridData}
                >
                    {
                        columns.map((column, index) => {
                            return <Column field={column.field} title={column.title} key={index} width={this.setWidth(column.minWidnt)} />;
                        })
                    }
                </Grid>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting Column Widths in Percentage

The Grid enables you to set its column widths in percentage by using a function that will programmatically calculate the real width based on the passed percentage value.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component {
    gridWidth = 600
    state = {
        gridData: products
    }

    setPercentage = (percentage) => {
        return Math.round(this.gridWidth / 100) * percentage;
    }

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px', width: this.gridWidth }}
                    data={this.state.gridData}
                >
                    <Column field="ProductID" title="ID" width={this.setPercentage(10)} />
                    <Column field="ProductName" title="Name" width={this.setPercentage(21.9)} />
                    <Column field="Category.CategoryName" title="CategoryName" width={this.setPercentage(25)} />
                    <Column field="UnitPrice" title="Price" width={this.setPercentage(15)} />
                    <Column field="UnitsInStock" title="In stock" width={this.setPercentage(15)} />
                    <Column field="Discontinued"
                        cell={(props) => (
                            <td>
                                <input disabled type="checkbox" checked={props.dataItem[props.field]} />
                            </td>
                        )} />
                </Grid>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Fitting Grids on Smaller Screens

To accommodate the Grid on smaller screens, you can programmatically hide columns based on the width of the Grid. To achieve this scenario, subscribe to the resize event of the Window and hide a column under a specific width of the Grid.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import products from './products.json';
const columns = [
    { field: "ProductID", title: "ID" },
    { field: "ProductName", title: "Name" },
    { field: "Category.CategoryName", title: "CategoryName" },
    { field: "UnitPrice", title: "Price", minGridWidth: 400 },
    { field: "UnitsInStock", title: "In stock", minGridWidth: 500 }
]
class App extends React.Component {
    state = {
        gridData: products,
        visibleColumns: columns
    }

    componentDidMount() {
        this.grid = document.querySelector('.k-grid');
        window.addEventListener('resize', this.handleResize);

    }

    handleResize = () => {
        const currentVisibleColumns = columns.filter((c) => !(c.minGridWidth > this.grid.offsetWidth));
        if (currentVisibleColumns.length !== this.state.visibleColumns.length) {
            this.setState({
                visibleColumns: currentVisibleColumns
            });
        }
    }

    render() {
        return (
            <div>
                <Grid
                    style={{ height: '400px' }}
                    data={this.state.gridData}
                >
                    {
                        this.state.visibleColumns.map((column, index) => {
                            return <Column field={column.field} title={column.title} key={index} />
                        })
                    }
                </Grid>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /