AutoFit Columns in React Grid Component

The AutoFit feature in the React Data Grid allows columns to automatically adjust their widths based on the maximum content width within each column. This ensures that all cell values are fully visible without truncation or wrapping.

Usage:

  • Hover the mouse over a column header. A resizer icon appears on the right edge of the header.
  • Double-click the resizer icon to resize the column to fit its longest content.

To display the resizer icon on column headers while hovering in the Syncfusion® React Grid:

  • Set the allowResizing property to true in the Grid component.
  • Inject the Resize module from @syncfusion/ej2-react-grids.
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Resize } from '@syncfusion/ej2-react-grids';

function App() {
  return (
    <GridComponent dataSource={...} allowResizing={true} height={300}>
      <ColumnsDirective>
        ...
      </ColumnsDirective>
      <Inject services={[Resize]} />
    </GridComponent>
  );
}

export default App;

Resizing a column to fit its content using AutoFit method

The Grid can automatically adjust column widths to fit the widest cell content, ensuring that all data remains visible without wrapping. This behavior can also be triggered programmatically without user interaction by calling the autoFitColumns method inside the dataBound event. Columns are resized immediately after the Grid finishes rendering its data.

AutoFit all columns:

Call autoFitColumns() without parameters to resize every column in the Grid:

if (gridRef.current) { 
    // Call autoFitColumns on the Grid instance 
    gridRef.current.autoFitColumns();
}

AutoFit specific columns:

Pass an array of column field names to resize only those columns. For example, the following adjusts the width of the “ShipName” and “ShipAddress” columns.

if (gridRef.current) { 
    // Call autoFitColumns on the Grid instance 
    gridRef.current.autoFitColumns(['ShipName', 'ShipAddress']);
}
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
    let grid;
    const dataBound = () => {
        if (grid) {
            grid.autoFitColumns(['ShipName', 'ShipAddress']);
        }
    };
    return <GridComponent dataSource={data} height={315} dataBound={dataBound} ref={g => grid = g}>
        <Inject services={[Resize]}/>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' width='150'/>
            <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
            <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
            <ColumnDirective field='ShipAddress' headerText='Ship Address' width='150' format="yMd"/>
            <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
        </ColumnsDirective>
    </GridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
    let grid: Grid | null;
    const dataBound = () => {
        if (grid) {
            grid.autoFitColumns(['ShipName', 'ShipAddress']);
        }
    }
    return <GridComponent dataSource={data} height={315}
        dataBound={dataBound} ref={g => grid = g} >
        <Inject services={[Resize]} />
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' width='150' />
            <ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
            <ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
            <ColumnDirective field='ShipAddress' headerText='Ship Address' width='150' format="yMd" />
            <ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
        </ColumnsDirective>
    </GridComponent>
};
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

All columns can be auto-fitted by invoking the autoFitColumns method without specifying column names.

AutoFit columns with empty space

The AutoFit feature adjusts column widths in the Grid based on the values defined in the column declarations. If the total width of all columns is smaller than the overall Grid width, the remaining space will appear as white space. In this case, the columns do not automatically adjust to fill the entire Grid width.

This feature can be enabled by setting the autoFit property to true. When enabled, the column width is rendered strictly according to the values defined in the Grid’s column definitions, without expanding to occupy unused space.

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
    return <GridComponent dataSource={data} height={400} width={850} allowResizing={true} autoFit={true}>
        <Inject services={[Resize]}/>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></ColumnDirective>
            <ColumnDirective field='Freight' headerText='Freight' minWidth='8' width='120' format='C2' textAlign='Right'/>
            <ColumnDirective field='ShipCity' headerText='Ship City' allowResizing={false} width='150' textAlign='Right'/>
            <ColumnDirective field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></ColumnDirective>
        </ColumnsDirective>
    </GridComponent>;
};
export default App;
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
    return <GridComponent dataSource={data} height={400}
        width={850} allowResizing={true} autoFit={true} >
        <Inject services={[Resize]} />
        <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></ColumnDirective>
            <ColumnDirective field='Freight' headerText='Freight' minWidth='8' width='120' format='C2' textAlign='Right'/>
            <ColumnDirective field='ShipCity' headerText='Ship City' allowResizing={false} width='150' textAlign='Right'/>
            <ColumnDirective field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></ColumnDirective>
        </ColumnsDirective>
    </GridComponent>
};
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

If any one of the ColumnDirective widths is undefined, then the particular column will automatically adjust to fill the entire width of the Grid table, even if the autoFit property of Grid is enabled.

AutoFit columns when changing column visibility using column chooser

In the Syncfusion® React Grid, columns can be auto-fitted when their visibility is changed through the column chooser UI. This can be done by calling the autoFitColumns method inside the actionComplete event. The event arguments include a property called requestType, which indicates the type of action performed. When the requestType is columnState, the autoFitColumns method can be invoked to resize the affected columns automatically.

import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Inject, ColumnChooser, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
    let grid;
    const toolbarOptions = ['ColumnChooser'];
    const actionComplete = ((args) => {
        if (args.requestType === 'columnstate') {
            grid.autoFitColumns();
        }
    })
    return (
        <div>
            <GridComponent dataSource={data} height={315} ref={g => grid = g} allowResizing={true} toolbar={toolbarOptions} showColumnChooser={true} actionComplete={actionComplete}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' />
                    <ColumnDirective field='CustomerID' headerText='Customer ID' />
                    <ColumnDirective field='Freight' headerText='Freight' />
                    <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' />
                </ColumnsDirective>
                <Inject services={[Toolbar, ColumnChooser, Resize]} />
            </GridComponent></div>
    )
}
export default App;
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, ActionEventArgs, Toolbar, Inject, ColumnChooser, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';

function App() {
    let grid: Grid | null;
    const toolbarOptions: any = ['ColumnChooser'];
    const actionComplete = ((args: ActionEventArgs) => {
        if ((args as any).requestType === 'columnstate') {
            (grid as any).autoFitColumns();
        }
    })
    return (
        <div>
            <GridComponent dataSource={data} height={315} ref={g => grid = g} allowResizing={true} toolbar={toolbarOptions} showColumnChooser={true} actionComplete={actionComplete}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' />
                    <ColumnDirective field='CustomerID' headerText='Customer ID' />
                    <ColumnDirective field='Freight' headerText='Freight' />
                    <ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' />
                </ColumnsDirective>
                <Inject services={[Toolbar, ColumnChooser, Resize]} />
            </GridComponent></div>
    )
}
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }
];
export let data: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
    }];

AutoFit columns with specific rows

Column width adjustment for a specific range of rows based on their content can be achieved using the autoFitColumns method by passing the second and third parameters (optional) as the start and end index for the columns to fit.

This feature calculates the appropriate width based on the maximum content width of the specified range of rows or the header text width. Subsequently, the maximum width of the content of the specified rows or header text is applied to the entire column of the grid.

The following example demonstrates auto-fitting columns with specific rows. The first parameter is an array containing the specific column field names, such as “Inventor”, “Number of INPADOC patents” and “Main fields of invention” to apply the auto-fit functionality to these columns. The second parameter (start index) is set to “1” and the third parameter (end index) is set to “3”. When specifying these start and end indices, the auto-fit operation is applied only to the range of rows from “1” to “3” for column width adjustment.

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';

function App() {
    let grid;
    const dataBound = (() => {
        grid.autoFitColumns(['Inventor', 'Number of INPADOC patents', 'Mainfieldsofinvention'], 1, 3);
    })
    return (
        <div>
            <GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowResizing={true} dataBound={dataBound}>
                <ColumnsDirective>
                    <ColumnDirective field='Inventor' headerText='Inventor' width='120' clipMode= 'EllipsisWithTooltip' textAlign='Right' />
                    <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='150' />
                    <ColumnDirective field='Country' headerText='Country' width='130' />
                    <ColumnDirective field='Number of INPADOC patents' headerText='Number of INPADOC patents'width='150'/>
                    <ColumnDirective field='Active' headerText='Active' width='250' />
                    <ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='120'/>
                </ColumnsDirective>
                <Inject services={[Resize]} />
            </GridComponent></div>
    )
}
export default App;
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Resize } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { inventoryData } from './datasource';

function App() {
    let grid: GridComponent | null;
    const dataBound = (() => {
        grid.autoFitColumns(['Inventor', 'Number of INPADOC patents', 'Mainfieldsofinvention'], 1, 3);
    })
    return (
        <div>
            <GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowResizing={true} dataBound={dataBound}>
                <ColumnsDirective>
                    <ColumnDirective field='Inventor' headerText='Inventor' width='120' clipMode= 'EllipsisWithTooltip' textAlign='Right' />
                    <ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='150' />
                    <ColumnDirective field='Country' headerText='Country' width='130' />
                    <ColumnDirective field='Number of INPADOC patents' headerText='Number of INPADOC patents'width='150'/>
                    <ColumnDirective field='Active' headerText='Active' width='250' />
                    <ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='120'/>
                </ColumnsDirective>
                <Inject services={[Resize]} />
            </GridComponent></div>
    )
}
export default App;
export const inventoryData = [
    {
        'Inventor': 'Kia Silverbrook',
        'NumberofPatentFamilies': 4737,
        'Country': 'Australia',
        'Number of INPADOC patents': 9839,
        'Active': '1994-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',

    },
    {
        'Inventor': 'Shunpei Yamazaki',
        'NumberofPatentFamilies': 4677,
        'Country': 'Japan',
        'Number of INPADOC patents': '10000+',
        'Active': '1976-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',

    },
    {
        'Inventor': 'Lowell L. Wood, Jr.',
        'NumberofPatentFamilies': 1419,
        'Country': 'USA',
        'Number of INPADOC patents': 1332,
        'Active': '1977-2016',
        'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',

    },
    {
        'Inventor': 'Paul Lapstun',
        'NumberofPatentFamilies': 1281,
        'Country': 'Australia',
        'Number of INPADOC patents': 3099,
        'Active': '2000-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',

    },
    {
        'Inventor': 'Gurtej Sandhu',
        'NumberofPatentFamilies': 1255,
        'Country': 'India',
        'Number of INPADOC patents': 2038,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',

    },
    {
        'Inventor': 'Jun Koyama',
        'NumberofPatentFamilies': 1240,
        'Country': 'Japan',
        'Number of INPADOC patents': 4126,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',

    },
    {
        'Inventor': 'Roderick A. Hyde',
        'NumberofPatentFamilies': 1240,
        'Country': 'USA',
        'Number of INPADOC patents': 3360,
        'Active': '2001-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Leonard Forbes',
        'NumberofPatentFamilies': 1093,
        'Country': 'Canada',
        'Number of INPADOC patents': 1398,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',

    },
    {
        'Inventor': 'Thomas Edison',
        'NumberofPatentFamilies': 1084,
        'Country': 'USA',
        'Number of INPADOC patents': 2332,
        'Active': '1847(b)-1931(d)',
        'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',

    },
    {
        'Inventor': 'Donald E. Weder',
        'NumberofPatentFamilies': 999,
        'Country': 'USA',
        'Number of INPADOC patents': 1993,
        'Active': '1976-2015',
        'Mainfieldsofinvention': 'Florist supplies',

    },
    {
        'Inventor': 'George Albert Lyon',
        'NumberofPatentFamilies': 993,
        'Country': 'Canada',
        'Number of INPADOC patents': 'NA',
        'Active': '1882(b)-1961(d)',
        'Mainfieldsofinvention': 'Automotive, Stainless steel products',

    },
    {
        'Inventor': 'John F. O\'Connor',
        'NumberofPatentFamilies': 949,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1864(b)-1938(d)',
        'Mainfieldsofinvention': 'Railway draft gearing',

    },
    {
        'Inventor': 'Melvin De Groote',
        'NumberofPatentFamilies': 925,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1895(b)-1963(d)',
        'Mainfieldsofinvention': 'Chemical de-emulsifiers',

    },
    {
        'Inventor': 'Jay S. Walker',
        'NumberofPatentFamilies': 918,
        'Country': 'USA',
        'Number of INPADOC patents': 2206,
        'Active': '1998-2016',
        'Mainfieldsofinvention': 'Gaming machines',

    },
    {
        'Inventor': 'Edward K. Y. Jung',
        'NumberofPatentFamilies': 911,
        'Country': 'USA',
        'Number of INPADOC patents': 2254,
        'Active': '1996-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Francis H. Richards',
        'NumberofPatentFamilies': 894,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1850(b)-19??(d)',
        'Mainfieldsofinvention': 'Mechanical, automation',

    },
    {
        'Inventor': 'Kangguo Cheng',
        'NumberofPatentFamilies': 884,
        'Country': 'USA',
        'Number of INPADOC patents': 1314,
        'Active': '2004-2016',
        'Mainfieldsofinvention': 'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',

    }
];
export const inventoryData: Object[] = [
    {
        'Inventor': 'Kia Silverbrook',
        'NumberofPatentFamilies': 4737,
        'Country': 'Australia',
        'Number of INPADOC patents': 9839,
        'Active': '1994-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI',

    },
    {
        'Inventor': 'Shunpei Yamazaki',
        'NumberofPatentFamilies': 4677,
        'Country': 'Japan',
        'Number of INPADOC patents': '10000+',
        'Active': '1976-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED',

    },
    {
        'Inventor': 'Lowell L. Wood, Jr.',
        'NumberofPatentFamilies': 1419,
        'Country': 'USA',
        'Number of INPADOC patents': 1332,
        'Active': '1977-2016',
        'Mainfieldsofinvention': 'Mosquito laser, Nuclear weapons',

    },
    {
        'Inventor': 'Paul Lapstun',
        'NumberofPatentFamilies': 1281,
        'Country': 'Australia',
        'Number of INPADOC patents': 3099,
        'Active': '2000-2016',
        'Mainfieldsofinvention': 'Printing, Digital paper, Internet, Electronics, CGI, VLSI',

    },
    {
        'Inventor': 'Gurtej Sandhu',
        'NumberofPatentFamilies': 1255,
        'Country': 'India',
        'Number of INPADOC patents': 2038,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film processes and materials, VLSI, Semiconductor device fabrication',

    },
    {
        'Inventor': 'Jun Koyama',
        'NumberofPatentFamilies': 1240,
        'Country': 'Japan',
        'Number of INPADOC patents': 4126,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Thin film transistors, Liquid crystal displays, OLED',

    },
    {
        'Inventor': 'Roderick A. Hyde',
        'NumberofPatentFamilies': 1240,
        'Country': 'USA',
        'Number of INPADOC patents': 3360,
        'Active': '2001-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Leonard Forbes',
        'NumberofPatentFamilies': 1093,
        'Country': 'Canada',
        'Number of INPADOC patents': 1398,
        'Active': '1991-2016',
        'Mainfieldsofinvention': 'Semiconductor Memories, CCDs, Thin film processes and materials, VLSI',

    },
    {
        'Inventor': 'Thomas Edison',
        'NumberofPatentFamilies': 1084,
        'Country': 'USA',
        'Number of INPADOC patents': 2332,
        'Active': '1847(b)-1931(d)',
        'Mainfieldsofinvention': 'Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining',

    },
    {
        'Inventor': 'Donald E. Weder',
        'NumberofPatentFamilies': 999,
        'Country': 'USA',
        'Number of INPADOC patents': 1993,
        'Active': '1976-2015',
        'Mainfieldsofinvention': 'Florist supplies',

    },
    {
        'Inventor': 'George Albert Lyon',
        'NumberofPatentFamilies': 993,
        'Country': 'Canada',
        'Number of INPADOC patents': 'NA',
        'Active': '1882(b)-1961(d)',
        'Mainfieldsofinvention': 'Automotive, Stainless steel products',

    },
    {
        'Inventor': 'John F. O\'Connor',
        'NumberofPatentFamilies': 949,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1864(b)-1938(d)',
        'Mainfieldsofinvention': 'Railway draft gearing',

    },
    {
        'Inventor': 'Melvin De Groote',
        'NumberofPatentFamilies': 925,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1895(b)-1963(d)',
        'Mainfieldsofinvention': 'Chemical de-emulsifiers',

    },
    {
        'Inventor': 'Jay S. Walker',
        'NumberofPatentFamilies': 918,
        'Country': 'USA',
        'Number of INPADOC patents': 2206,
        'Active': '1998-2016',
        'Mainfieldsofinvention': 'Gaming machines',

    },
    {
        'Inventor': 'Edward K. Y. Jung',
        'NumberofPatentFamilies': 911,
        'Country': 'USA',
        'Number of INPADOC patents': 2254,
        'Active': '1996-2016',
        'Mainfieldsofinvention': 'Various',

    },
    {
        'Inventor': 'Francis H. Richards',
        'NumberofPatentFamilies': 894,
        'Country': 'USA',
        'Number of INPADOC patents': 'NA',
        'Active': '1850(b)-19??(d)',
        'Mainfieldsofinvention': 'Mechanical, automation',

    },
    {
        'Inventor': 'Kangguo Cheng',
        'NumberofPatentFamilies': 884,
        'Country': 'USA',
        'Number of INPADOC patents': 1314,
        'Active': '2004-2016',
        'Mainfieldsofinvention': 'Semiconductor device fabrication, Semiconductor memory, Semiconductor device',

    }
];