No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Table custom column width via column style property

    Framework
    q-table
    5
    9
    7442
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      thescript last edited by

      It is stated in the quasar documentation that total customization of rows and cells is through scoped slots, would like to know what needs to be done aside from setting the columns array with style property, and also when customizing the body, is it need to also modify the header? thanks.

      Sample from the documentation:

      columns: [
      {
      name: ‘name’,
      required: true,
      label: ‘Dessert (100g serving)’,
      align: ‘left’,
      sortable: true,
      style: ‘width: 100px’,
      classes: ‘myClass’
      },

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @thescript last edited by

        @thescript you will also have to set the headerStyle and use max-width. https://codepen.io/metalsadman/pen/XWXVNoZ

        L 1 Reply Last reply Reply Quote 1
        • T
          thescript last edited by

          @metalsadman thanks awesome, can we have multiple style attributes?

          metalsadman 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @thescript last edited by metalsadman

            @thescript yeah, in a form of a string, or you can use the classes props headerClasses and classes. can check in here https://quasar.dev/vue-components/table#Defining-the-columns.

            1 Reply Last reply Reply Quote 1
            • marcelo
              marcelo last edited by

              I have been trying to set fixed columns width with style and headerStyle and CSS min-width, width, and max-width and looks like these values are sometimes overwritten to make sure table fits on space/screen…
              Still don’t know how to do it 😞
              A working example would be just great!

              metalsadman 1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @marcelo last edited by metalsadman

                @marcelo did you see the codepen above? Otherwise make a codepen of what you’ve done, if cell content is not a simple text then you would probably use slots and set your styles there in a div.

                1 Reply Last reply Reply Quote 0
                • T
                  thescript last edited by

                  @metalsadman thanks for the tips, it’s working fine now.

                  1 Reply Last reply Reply Quote 0
                  • L
                    Li Yao @metalsadman last edited by

                    @metalsadman Wow, this question has been bothering me for a long time. I saw your solution today and suddenly understood. Thank you.

                    1 Reply Last reply Reply Quote 0
                    • F
                      felix41382 last edited by

                      @metalsadman I still have problems with having fixed and auto fitting columns. Could you please extend (or create a new example) with two fixed width column and one filling the left space with ‘ellipsing’ or ‘word-wraping’.

                      See my plain html example: http://jsfiddle.net/g40b6eqt/13/

                      Thanks!

                      1 Reply Last reply Reply Quote 0
                      • First post
                        Last post