MDBDataTable disable sort of specific column

Topic: MDBDataTable disable sort of specific column

rvmeode free asked 5 years ago

I am trying to create a MDBDataTable that is sortable and each row is selectable by checkBox on the first column, however when I click the table header checkBox (which will select all), it will perform sort. Is there a way to disable sorting of a specific column in MDBDataTable?

sample array for the data.columns property of MDBDataTable

const columnsData = [
{
label: <MDBInput label=" " type="checkbox" id="checkbox.all" onClick={this.handleAllCheck} />,
field: 'checkboxCol',
width: 50,
},
{
label: 'Merchant Name',
field: 'merchantName',
sort: 'asc',
width: 250,
},
{
label: 'Business Name',
field: 'businessName',
sort: 'asc',
width: 250,
},
{
label: 'Email',
field: 'email',
sort: 'asc',
width: 150,
},
{
label: 'Phone',
field: 'phone',
sort: 'asc',
width: 150,
}
];

Add comment

Nagnedra free answered 5 years ago

0 0 Best answer

Hi How we can show index column in the table just to show the number of rows?

Konrad Stępień staff commented 5 years ago

Hi @Nagnedra,

Can you send me your code? Maybe I can help you. You have to add properties for your data.

If we have data like this:

const data = {
  columns: [
    { 
      label: "ID", 
      field: "id", 
      sort: "asc", 
      width: 1 },
    {
      label: "Name",
      field: "name",
      sort: "asc",
      width: 150
    }
  ],
  rows: [
    {
      id: "1",
      name: "Tiger Nixon",
    },
    {
      id: "2",
      name: "Garrett Winters",
    }
  ]
};

there are many ways to get the number of indexes array itself and insert it into the object, but I need to find out how you get the data.

Best, Konrad.

Please insert min. 15 characters.

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Hi,

It is already available since last release. 
You can set sort property value as <code>disabled</code> for a particular column.

This is how the structure of your data can look like:

<pre class="prettyprint"><code>data = {
 columns: [
 {
 label: String (displayed column label),
 field: String (corresponding key for cells),
 width: Number (Optional minimal column width in px),
 sort: String (Optional, 'asc'/'desc'/'disabled', describes the initial sorting directory, or disables column sorting),
 attributes: {
 "attribute": "value"
 } : Object collection (Optional, sets html attributes of the element | f.e. "aria-controls", "aria-label")

}
 ],
 rows: [
 {
 field: String (corresponds column's field, contains cell data),
 field: String,
 field: String,
 ...
 clickEvent: yourClickHandler
 }
 ]
 }
</code></pre>

You can find more information in our <a href="https://mdbootstrap.com/docs/react/tables/datatables/">documentatio</a> in <code>API</code> section. We are also pleased to take some feedback about docs, what we could do better. You can use click on <code>Rate the docs</code> on the top of the page and send us some info if you want :)

Also we are releasing new update in every 2 weeks, you can find <a href="https://mdbootstrap.com/docs/react/changelog/">changelog here</a>.

Best regards,

Jakub

Please insert min. 20 characters.

Hi,

It is already available since last release. You can set sort property value as disabled for a particular column.

This is how the structure of your data can look like:

data = {
        columns: [
          {
            label: String (displayed column label),
            field: String (corresponding key for cells),
            width: Number (Optional minimal column width in px),
            sort: String (Optional, 'asc'/'desc'/'disabled', describes the initial sorting directory, or disables column sorting),
            attributes: {
              "attribute": "value"
            } : Object collection (Optional, sets html attributes of the element | f.e. "aria-controls", "aria-label")

          }
        ],
        rows: [
          {
            field: String (corresponds column's field, contains cell data),
            field: String,
            field: String,
            ...
            clickEvent: yourClickHandler
          }
        ]
      }

You can find more information in our documentatio in API section. We are also pleased to take some feedback about docs, what we could do better. You can use click on Rate the docs on the top of the page and send us some info if you want :)

Also we are releasing new update in every 2 weeks, you can find changelog here.

Best regards,

Jakub

rvmeode free commented 5 years ago

Thank you very much for this info Jakub.

Quick question though, I have this in my package.json: ""mdbreact": "git+https://(token)@git.mdbootstrap.com/mdb/react/re-pro.git"," Does this update to latest mdb version on npm install?

Jakub Mandra staff commented 5 years ago

There has to be 'oauth2' section: git+https://oauth2:(token)@git.mdbootstrap.com/mdb/react/re-pro.git

With that in your dependencies, every time you hit npm install it will update mdbreact to the newest available version. But to be 100% sure I suggest to delete node_modules before update.

Jakub Mandra staff commented 5 years ago

But of course you have to get PRO access first.

You can find more here: https://mdbootstrap.com/products/react-ui-kit/

and here: https://mdbootstrap.com/docs/react/getting-started/quick-start/

Add comment

Jakub Mandra staff answered 5 years ago

1 0 Best answer

Hello,

There is no such option implemented yet, but we consistently court to fulfill the needs of our users.

Thanks for posting your problem, we're adding this task to our list, this feature should be available soon.

rvmeode free commented 5 years ago

Hi Jacob, May I ask what is the target date or version for this feature to be available? I just need to know if we need to do a work around or just wait for this feature.

Thanks.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.8.4
Device: Laptop
Browser: Google Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

rvmeode

10Support score
2Questions 0Answers 0Snippets