CODEWITHSUNDEEP
tabulator
BlackICE
BlackICE

Reputation: 8926

Is there a way to toggle the row selectable option on/off without recreating the tabulator

title pretty much says it, I have users that have different roles they can choose from and I need to toggle the row selection functionality on/off depending on the role they choose, is this possible or do you have to recreate the tabulator to change this value?

Upvotes: 0

Views: 828

Answers (2)

Oli Folkerd
Oli Folkerd

Reputation: 8348

This option is not toggleable once the table has been instantiated, but you could use a Selection Eligibility function to determine if the row should currently be selectable:

var table = new Tabulator("#example-table", {
    selectableCheck:function(row){
        //row - row component
        return row.getData().age > 18; //allow selection of rows where the age is greater than 18
    },
});

You could tweak the above example to look at a global boolean that you toggle to determine if the table is selectable

Upvotes: 1

dota2pro
dota2pro

Reputation: 7856

In this I can select rows with name Oli Bob only See Documentation

Use as per your convinience

selectableCheck:function(row){
    //row - row component
    return row.getData().age > 18; //allow selection of rows where the age is greater than 18
},


const tabledata = [{
    name: "Oli Bob",
    location: "United Kingdom",
    gender: "male",
    col: "red",
    dob: "14/04/1984"
  },
  {
    name: "Oli Bob",
    location: "United Kingdom",
    gender: "male",
    col: "red",
    dob: "14/04/1984"
  },
  {
    name: "Jamie Newhart",
    location: "India",
    gender: "male",
    col: "green",
    dob: "14/05/1985"
  }
];

let selectable = false;
const table = new Tabulator("#example-table", {
  data: tabledata,
  selectable: true,
  selectableCheck: function(row) {
    const name = row.getData().name;
    return name === "Oli Bob";
  },
  columns: [{
      title: "Row Num",
      formatter: "rownum"
    },
    {
      title: "Name",
      field: "name",
      width: 200
    },
  ],
});
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<div id="example-table"></div>

Upvotes: 0

Related Questions