Topic: Responsive Table with Frozen Columns
Expected behavior: This is regarding one of the technical requirements we have from one of our clients. We are looking forward to buy the Pro-kit from the mdbootstrap for vue.js support and features if this requirement can be met.
Client Requirement: They are looking for a responsive table (data-grid) which we can scroll both horizontally as well as vertically. Also the table should have its first column or first two columns frozen (absolute-position) such that if we scroll along horizontal axis col-1 and col-2 remains fixed and rest portion of the gird moves. Does this functionality is achievable using "Datatable horizontal and vertical scroll-sample given in mdbootstrap" or how we can achieve it. Please suggest
Hi there,
In our demo template there are two examples of such cases. Please check the following sections:
- Fixed header and footer
- Fixed columns
I guess it's all You need in your project. Feel free to ask about more details.
Best regards
varun.srivastava.09 commented 5 years ago
Hi Mikolaj,
Thank you very much for the quick response. The demo template link which you have shared covers the required example but the responsive table samples which is available on the website does not have "FixedColumns" example. Given is the link of the website : https://mdbootstrap.com/docs/vue/tables/scroll/
Can you share the code or the documentation for implementation of Fixed column table or by setting which property we can achieve it ?. Precisely to which section of the Vue-kit should I check to find the implementation?
Mikołaj Smoleński staff commented 5 years ago
In the latest version of Datatable component you just need to set fixedCols property. Here's an example code:
<mdb-datatable-2 v-model="data9" :fixedCols="2" maxWidth="550px" />
Also in this case there could be a need to set :fixedColsPosition="[0, 150]" for fixed cols. It's important to set it according to the column width (cause each column has a sticky position with offset).
Docs: https://mdbootstrap.com/docs/vue/tables/datatables/#a-api-references-table
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No