Topic: Change width of table column
rashesh patel asked 6 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 6 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.
rashesh patel answered 6 years ago
Hi, I have tried the same but I didn't get the perfect result, You can find in below link. https://wetransfer.com/downloads/ced3c42ff51664adb11392c13fb1346020190328042614/5cbc0bdfc3ecb0a83d2b1f84ffca23f620190328042614/77314d/preview/94bd93fddb41062503c7ea858b6f3f6620190328042614
rashesh patel answered 6 years ago
Even in MDB official website in Datatable vertical scroll example there is no alignment of labels and its components.
So what should I do for alignment??
Aliaksandr Andrasiuk staff answered 6 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 6 years ago
Is that bug resolved??
Aliaksandr Andrasiuk staff commented 6 years ago
For now, it's not resolved. Work on this in progress.
Best regards.
Fahad Abdul Karim commented 5 years ago
i still cant set the width of the columns, is there a solution now? Thanks
Fahad Abdul Karim answered 5 years ago
i still cant set the width of the columns, is there a solution now? Thanks
Piotr Glejzer staff commented 5 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 5 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 5 years ago
can you copy and paste all your code?
Rickal Hamilton commented 4 years ago
was there a solution to this?
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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