How to hide/disable DataTable checkboxes for some rows?

[balloy]

Hi,
From doc it's easy to add a checkbox on each row for DataTable, e.g.

Code: Select all

<DataTable value={this.state.cars}}
    selection={this.state.selectedCars3} onSelectionChange={(e) => this.setState({selectedCars3: e.data})}>
    <Column selectionMode="multiple" style={{width:'2em'}}/>
    <Column field="vin" header="Vin" />
    <Column field="year" header="Year" />
</DataTable>

Is there any way to let me hide/disable checkboxes for some rows? e.g. hide checkboxes if "year" < 2000.

Thanks.

[balloy]

I figured it out by define custom header and body for <Column>, just in case anyone will be interested in, I put my demo code here:

Code: Select all

import React from 'react';
import { DataTable } from 'primereact/components/datatable/DataTable';
import { Column } from 'primereact/components/column/Column';
import { Checkbox } from 'primereact/components/checkbox/Checkbox';

const cars = [
  {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
  {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
  {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
  {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
  {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
  {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
  {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
  {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
  {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
  {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      allSelected: false,
      selection: []   // init state has empty selection
    };

    // event handlers
    this.rowClassName = this.rowClassName.bind(this);
    this.onRowClick = this.onRowClick.bind(this);
    this.toggleAll = this.toggleAll.bind(this);
  }

  selectable(item) {
    return item.year > 2005;
  }

  allSelectableItems() {
    return cars.filter(x => this.selectable(x));
  }

  isSelected(item) {
    return (this.state.selection.includes(item));
  }

  rowClassName(item) {
    // todo: add cursor hand
    return { 'ui-state-highlight' : this.isSelected(item) };
  }

  onRowClick(e) {
    const item = e.data;
    if (this.selectable(item)) {
      this.toggleSelection(item);
    }
  }

  toggleSelection(item) {
    let selection;
    if (this.isSelected(item)) {
      selection = this.state.selection.filter(x => x !== item);
    } else {
      selection = [...this.state.selection, item];
    }
    const allSelected = selection.length === this.allSelectableItems().length;
    this.setState({ allSelected, selection });
  }

  toggleAll(allSelected) {
    const selection = allSelected ? this.allSelectableItems() : [];
    this.setState({ allSelected, selection });
  }

  displaySelection(data) {
    if(!data || data.length === 0) {
        return <div style={{textAlign: 'left'}}>No Selection</div>;
    }
    else {
        if(data instanceof Array)
            return <ul style={{textAlign: 'left', margin: 0}}>{data.map((car,i) => <li key={car.vin}>{car.vin + ' - ' + car.year + ' - ' + car.brand + ' - ' + car.color}</li>)}</ul>;
        else
            return <div style={{textAlign: 'left'}}>Selected Car: {data.vin + ' - ' + data.year + ' - ' + data.brand + ' - ' + data.color}</div>
    }
  }

  render() {
    return (
      <DataTable
        value={cars}
        onRowClick={this.onRowClick}
        rowClassName={this.rowClassName}
        footer={this.displaySelection(this.state.selection)}
      >
        <Column
          sortable={false}
          header={
            <Checkbox
              onChange={e => this.toggleAll(e.checked)}
              checked={this.state.allSelected}
            />
          }
          body={ (rowData, column) => (
            this.selectable(rowData) ?
              <Checkbox onChange={() => {}} checked={this.isSelected(rowData)} />
              : ''
          ) }
          style={{width: '2em'}}
        />
        <Column field="vin" header="Vin" sortable={true} />
        <Column field="year" header="Year" sortable={true} />
        <Column field="brand" header="Brand" sortable={true} />
        <Column field="color" header="Color" sortable={true} />
      </DataTable>
    );
  }
}

export default App;