How to pass percentage value to width to React data grid column

Question

Below is my Reactdata grid code

    this._columns = [
          {
            key: 'id',
            name: 'ID',
            width: 40
          },
          {
            key: 'task',
            name: 'Title',
            width:100
          },
          {
            key: 'priority',
            name: 'Priority',
            width:100
          },
          {
            key: 'issueType',
            name: 'Issue Type',
            width:100
          },
          {
            key: 'complete',
            name: '% Complete',
            width:100
          },
          {
            key: 'startDate',
            name: 'Start Date',
            width:100
          },
          {
            key: 'completeDate',
            name: 'Expected Complete',
            width:100
          }
        ];

          render() {
        return  (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120} 
          />);
      }

Using below React data grid: https://github.com/adazzle/react-data-grid

I want to pass width as a percentage, how we can achieve with React data grid. Any help would be appreciated. Thanks

If you don’t specify anything then react by default add px to the number value — Hemadri Dasari, Sep 05 '18 at 09:52

score 2 · Answer 1 · answered Apr 29 '19 at 10:35

2

I know maybe it is late but you can achieve this by setting the value as string

const columns = [
  {
    key: 'Month',
    name: 'Mes',
    width: '50%',
  },
  {
    key: 'Tickets',
    name: 'Tickets',
    width: '10%',
  },
 ];

Hope it helps

answered Apr 29 '19 at 10:35

Marta Tenés

2,102
1
13
22

I thought this was really useful till I realized this works on the headers but not the rows. Is there another setting for rows or do you need to do a custom render? – Andy Allison Jan 29 '21 at 11:53

score 1 · Answer 2 · answered Sep 05 '18 at 09:52

1

To make a given column resizable, set column.resizable = true.

If you need to know when a column has been resized, use the onColumnResize prop. This will be triggered when a column is resized and will report the column index and its new width.

These can be saved on the back-end and used to restore column widths when the component is initialized, by setting width key in each column.

pass resizable:true which you want to resize like below.

this._columns = [
  {
    key: 'id',
    name: 'ID',
    resizable: true,
    width: 40
  },
  {
    key: 'task',
    name: 'Title',
    resizable: true
  }]

refer here for more info

answered Sep 05 '18 at 09:52

Amruth

5,792
2
28
41

I don't want resizable, fix width as per screen size – pareshm Sep 05 '18 at 10:01
then you may have to pass `locked: true` with coloumns – Amruth Sep 05 '18 at 10:02
@Isa4299 no not working need to pass column width is the percentage and it should adjust as per screen size – pareshm Sep 11 '18 at 05:26
As of MUI V5, `resizable` is probably unavailable for MIT (free) version. When I use it, I saw the following message on the console: `Failed prop type: MUI: `column.resizable = true` is not a valid prop. Column resizing is not available in the MIT version.` – Hiroki Oct 21 '22 at 06:17

score 0 · Answer 3 · answered Sep 05 '18 at 09:47

0

To pass with as percentage in a react component you just need to do the following width='100%'.

answered Sep 05 '18 at 09:47

Guillermo Quiros

401
3
14

I want it with React data grid I tried passing width='50%' but not working – pareshm Sep 05 '18 at 10:02
https://github.com/adazzle/react-data-grid/issues/1339#issuecomment-488678166 – Gonki Aug 25 '20 at 06:41

How to pass percentage value to width to React data grid column

3 Answers3