Demos
Grid(React)
Columns
Column Width

Column Width (React)

This sample shows how you can use XAML-style star sizing to implement flexible layouts with the FlexGrid. Star sizing is specified in the width property of the Column object. Star sizing is similar to percentage sizing, except that the values do not have to add up to one hundred. A width of '3' means 'three times wider than 1.' The total size used to calculate the layout is the current width of the control minus the width of any non-star columns divided by the number of stars specified.

Learn about FlexGrid | FlexGrid API Reference

This example uses React.

JavaScript
Angular
Vue
React
app.jsx
index.html
app.css
data.jsx
Copy to CodeMine
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import ReactDOM from 'react-dom/client';
import React from 'react';
import * as wjGrid from '@mescius/wijmo.react.grid';
import './app.css';
import { data } from './data';
function App() {
    return (<div className="container-fluid">
      <h4>Example 1:</h4>
      <p>
        This grid has four columns. The first is 80 pixels wide and can be resized between
        40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be
        resized using the mouse.
      </p>
      <p>
        Notice that the second column is twice as wide as the third and fourth columns, and that
        they keep these proportions even as you resize the first column or the whole grid.
      </p>
      <wjGrid.FlexGrid itemsSource={data} autoClipboard={false}>
        <wjGrid.FlexGridColumn header="Date" binding="start" width={80} minWidth={40} maxWidth={160}/>
        <wjGrid.FlexGridColumn header="Product" binding="product" width="2*" allowResizing={false}/>
        <wjGrid.FlexGridColumn header="Revenue" binding="amount" width="*" allowResizing={false}/>
        <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*" allowResizing={false}/>
      </wjGrid.FlexGrid>
      <br />
      <br />
      <h4>Example 2:</h4>
      <p>
        This grid shows how you can make any column stretch to fill the available space. In this case,
        we set the width of the second column to * to achieve that effect.
      </p>
      <p>
        We also set the minimum width of the second column to 100 pixels in order to prevent it from
        getting too narrow when the other columns in the grid are resized, and we prevent users from
        resizing this column with the mouse.
      </p>
      <wjGrid.FlexGrid itemsSource={data} autoClipboard={false}>
        <wjGrid.FlexGridColumn header="Date" binding="start" width={80}/>
        <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100} allowResizing={false}/>
        <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width={120}/>
      </wjGrid.FlexGrid>
      <br />
      <br />
      <h4>
        Example 3:
      </h4>
      <p>
        This example sets all widths to *, which means the space available is divided equally among them.
        Resize the browser and notice how the grid resizes and the columns fill it up equally.
      </p>
      <p>
        Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather
        than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both.
      </p>
      <wjGrid.FlexGrid itemsSource={data} autoClipboard={false} allowResizing="None">
        <wjGrid.FlexGridColumn header="Date" binding="start" width="*"/>
        <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100}/>
        <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width="*"/>
        <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*"/>
      </wjGrid.FlexGrid>
    </div>);
}
const container = document.getElementById('app');
if (container) {
    const root = ReactDOM.createRoot(container);
    root.render(<App />);
}
import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import ReactDOM from 'react-dom/client'; import React from 'react'; import * as wjGrid from '@mescius/wijmo.react.grid'; import './app.css'; import { data } from './data'; function App() { return (<div className="container-fluid"> <h4>Example 1:</h4> <p> This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse. </p> <p> Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid. </p> <wjGrid.FlexGrid itemsSource={data} autoClipboard={false}> <wjGrid.FlexGridColumn header="Date" binding="start" width={80} minWidth={40} maxWidth={160}/> <wjGrid.FlexGridColumn header="Product" binding="product" width="2*" allowResizing={false}/> <wjGrid.FlexGridColumn header="Revenue" binding="amount" width="*" allowResizing={false}/> <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*" allowResizing={false}/> </wjGrid.FlexGrid> <br /> <br /> <h4>Example 2:</h4> <p> This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect. </p> <p> We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse. </p> <wjGrid.FlexGrid itemsSource={data} autoClipboard={false}> <wjGrid.FlexGridColumn header="Date" binding="start" width={80}/> <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100} allowResizing={false}/> <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width={120}/> </wjGrid.FlexGrid> <br /> <br /> <h4> Example 3: </h4> <p> This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally. </p> <p> Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both. </p> <wjGrid.FlexGrid itemsSource={data} autoClipboard={false} allowResizing="None"> <wjGrid.FlexGridColumn header="Date" binding="start" width="*"/> <wjGrid.FlexGridColumn header="Product" binding="product" width="*" minWidth={100}/> <wjGrid.FlexGridColumn header="Revenue" binding="amount" format="n0" width="*"/> <wjGrid.FlexGridColumn header="Expense" binding="amount2" format="n0" width="*"/> </wjGrid.FlexGrid> </div>); } const container = document.getElementById('app'); if (container) { const root = ReactDOM.createRoot(container); root.render(<App />); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Wijmo FlexGrid Column Width</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.src.js" integrity="sha512-G6mEj6h18+m3MvzdviSDfPle/TfH0//cXcB33AKlNR/Rha0yQsKefDZKRTkIZos97HEGq2JMV1RT5ybMoQ3WsQ==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html>
.wj-flexgrid { height: 400px; margin: 6px 0; }
var products = ['Widget', 'Gadget', 'Doohickey']; var colors = ['Black', 'White', 'Red', 'Green', 'Blue']; var someCountries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; function getCountries() { return someCountries; } function getProducts() { return products; } function getColors() { return colors; } function getData(count) { var data = []; var dt = new Date(); // add count items for (var i = 0; i < count; i++) { // constants used to create data items var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * someCountries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); // create the item var item = { id: i, start: date, end: new Date(date.getTime() + Math.random() * 30 * (24 * 60 * 60 * 1000)), country: someCountries[countryId], product: products[productId], color: colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; // add the item to the list data.push(item); } return data; } export const data = getData(500);
(function (global) { window.process = { env: { NODE_ENV: "production" } } System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.grid.immutable': 'npm:@mescius/wijmo.grid.immutable/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.react.chart.analytics": "npm:@mescius/wijmo.react.chart.analytics/index.js", "@mescius/wijmo.react.chart.animation": "npm:@mescius/wijmo.react.chart.animation/index.js", "@mescius/wijmo.react.chart.annotation": "npm:@mescius/wijmo.react.chart.annotation/index.js", "@mescius/wijmo.react.chart.finance.analytics": "npm:@mescius/wijmo.react.chart.finance.analytics/index.js", "@mescius/wijmo.react.chart.finance": "npm:@mescius/wijmo.react.chart.finance/index.js", "@mescius/wijmo.react.chart.hierarchical": "npm:@mescius/wijmo.react.chart.hierarchical/index.js", "@mescius/wijmo.react.chart.interaction": "npm:@mescius/wijmo.react.chart.interaction/index.js", "@mescius/wijmo.react.chart.radar": "npm:@mescius/wijmo.react.chart.radar/index.js", "@mescius/wijmo.react.chart": "npm:@mescius/wijmo.react.chart/index.js", "@mescius/wijmo.react.core": "npm:@mescius/wijmo.react.core/index.js", '@mescius/wijmo.react.chart.map': 'npm:@mescius/wijmo.react.chart.map/index.js', "@mescius/wijmo.react.gauge": "npm:@mescius/wijmo.react.gauge/index.js", "@mescius/wijmo.react.grid.detail": "npm:@mescius/wijmo.react.grid.detail/index.js", "@mescius/wijmo.react.grid.filter": "npm:@mescius/wijmo.react.grid.filter/index.js", "@mescius/wijmo.react.grid.grouppanel": "npm:@mescius/wijmo.react.grid.grouppanel/index.js", '@mescius/wijmo.react.grid.search': 'npm:@mescius/wijmo.react.grid.search/index.js', "@mescius/wijmo.react.grid.multirow": "npm:@mescius/wijmo.react.grid.multirow/index.js", "@mescius/wijmo.react.grid.sheet": "npm:@mescius/wijmo.react.grid.sheet/index.js", '@mescius/wijmo.react.grid.transposed': 'npm:@mescius/wijmo.react.grid.transposed/index.js', '@mescius/wijmo.react.grid.transposedmultirow': 'npm:@mescius/wijmo.react.grid.transposedmultirow/index.js', '@mescius/wijmo.react.grid.immutable': 'npm:@mescius/wijmo.react.grid.immutable/index.js', "@mescius/wijmo.react.grid": "npm:@mescius/wijmo.react.grid/index.js", "@mescius/wijmo.react.input": "npm:@mescius/wijmo.react.input/index.js", "@mescius/wijmo.react.olap": "npm:@mescius/wijmo.react.olap/index.js", "@mescius/wijmo.react.viewer": "npm:@mescius/wijmo.react.viewer/index.js", "@mescius/wijmo.react.nav": "npm:@mescius/wijmo.react.nav/index.js", "@mescius/wijmo.react.base": "npm:@mescius/wijmo.react.base/index.js", '@mescius/wijmo.react.barcode.common': 'npm:@mescius/wijmo.react.barcode.common/index.js', '@mescius/wijmo.react.barcode.composite': 'npm:@mescius/wijmo.react.barcode.composite/index.js', '@mescius/wijmo.react.barcode.specialized': 'npm:@mescius/wijmo.react.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'react': 'npm:react/index.js', 'react-dom': 'npm:react-dom/index.js', 'react-dom/client': 'npm:react-dom/client.js', "scheduler": "npm:scheduler/index.js", 'redux': 'npm:redux/dist/redux.min.js', 'react-redux': 'npm:react-redux/dist/react-redux.min.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', "react-use-event-hook": "npm:react-use-event-hook/dist/esm/useEvent.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);