Change width of table column


Topic: Change width of table column

rashesh patel asked 3 years ago

Hi, I am using Basic And Material Design of Datatables of MDB React Tables in my project by using the same format, when I change the value of width of the column it can't show any changes in table.So how can I change the width of column of the table.


Aliaksandr Andrasiuk staff answered 3 years ago

Hello,

For change width of a column, you should add one of the next properties: scrollX or scrollY.

<MDBDataTable striped bordered scrollY hover entriesOptions={[5, 20, 25]} entries={5} pagesAmount={4} data={yourData} />

Best regards,

Aliaksandr from MDB.


Even in MDB official website in Datatable vertical scroll example there is no alignment of labels and its components.

https://wetransfer.com/downloads/ad0e7b60eb8767c3fbd0c0821b4c582d20190328045432/cc7f5a/preview/50e44ced18abb77670c30c37490f9f4120190328045432

So what should I do for alignment??


Aliaksandr Andrasiuk staff answered 3 years ago

Hello,

Thank you for the information. Unfortunately, after tests it becomes that is the bug, we will fix it in the near future.

Best regards,

Aliaksandr from MDB.


rashesh patel commented 3 years ago

Is that bug resolved??


Aliaksandr Andrasiuk staff commented 3 years ago

For now, it's not resolved. Work on this in progress.

Best regards.


Fahad Abdul Karim commented 2 years ago

i still cant set the width of the columns, is there a solution now? Thanks


i still cant set the width of the columns, is there a solution now? Thanks


Piotr Glejzer staff commented 2 years ago

did you try to do something like that?

columns: [ { label: 'Name', field: 'name', width: 150, attributes: { 'aria-controls': 'DataTable', 'aria-label': 'Name' } }, ....


Fahad Abdul Karim commented 2 years ago

@Piotr Glejzer it still doesnt work added code for ref const data = { columns: [ { label: "Question Type", field: "questionType", sort: "asc", width: 120 }, { label: "Text", field: "questionText", sort: "asc", width: 200 }, { label: "Created On", field: "createdAt", sort: "asc", width: 100 }, { label: "Options", field: "options", sort: "asc", width: 30 } ], rows: questionsListArr };

return ( Entire Question Banks {!loading && questionsList ? ( ) : ( )} ); };


Piotr Glejzer staff commented 2 years ago

can you copy and paste all your code?


Rickal Hamilton commented a year ago

was there a solution to this?


FREE CONSULTATION

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

Status

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.11.1
  • Device: LAPTOP
  • Browser: CHROME
  • OS: WINDOWS 10
  • Provided sample code: No
  • Provided link: No