CODEWITHSUNDEEP
sapui5
melomg
melomg

Reputation: 748

resizing columns width in sap.m.Table

I have a lot of rows in sap.m.table and I want to show all rows' names properly. First I made table auto and gave the columns 100% width and made them demand popin. I tried a lot of combinations but I couldn't manage to show them properly. Here what I've got at the end. enter image description here

My view is at the below:

<m:ScrollContainer
    height="100%"
    width="100%"
    horizontal="true"
    vertical="true"
    focusable="true">
    <m:Table id="idTable"
        inset="false"
        growing="true" 
        growingThreshold="3"
        fixedLayout="false"
        visibleRowCount="7"
        border-collapse="collapse"
        items="{
            path: '/...',
            sorter: {
                path: '...'
            }
        }">
    <m:headerToolbar>
    </m:headerToolbar>
    <m:columns>
        <m:Column
            minScreenWidth="Desktop"
            demandPopin="true"
            width="12em">
            <m:Text text="{i18n>YUKLEME_NO}" />
        </m:Column>
        <m:Column
             minScreenWidth="Desktop"
             demandPopin="true"
             hAlign="Left">
             <m:Text text="{i18n>GEMI_BILGISI}" />
        </m:Column>
        <m:Column
             minScreenWidth="Desktop"
             demandPopin="true"
             width="12em"
             hAlign="Left">
             <m:Text text="{i18n>YUKLEME_ARAC_SAYISI}" />
        </m:Column>
        <m:Column
            minScreenWidth="Desktop"
            demandPopin="true"
            hAlign="Left">
            <m:Text text="{i18n>PROFORMA_NO}" />
        </m:Column>
        ...             
        <m:Column
            demandPopin="true"
            width="14em"
            hAlign="Left">
            <m:Text text="{i18n>MODEL}" />

I also tried minScreenWidth="Desktop" and wrapping="true" for columns. But still it didn't change.

Thank you for your helps.

Upvotes: 4

Views: 12585

Answers (2)

Nabi
Nabi

Reputation: 2566

See sap.m.Column.minScreenWidth as well as Enum sap.m.ScreenSize.

You are using minScreenWidth="Desktop" for all your columns. That means the columns will look like what you see until your screen width goes below 1024px. You could play around with different combinations of sap.m.ScreenSize for your columns. But you could also use something like minScreenWidth="1280px" instead of using the enum. Furthermore, you could use the width="9em" or what ever value. So basically the issue you described occurs if you have a bad configuration for your column's minScreenWidth properties.

Upvotes: 2

Sunil B N
Sunil B N

Reputation: 4225

If you are not thinking of going mobile this particular scenario, I would suggest you to go to for sap.ui.table.Table.

Sample code:

oTable = new sap.ui.table.Table({
    title: "Table with fixed columns Example and scroller",
    visibleRowCount: 7,
    firstVisibleRow: 3,
    selectionMode: sap.ui.table.SelectionMode.Single,
    navigationMode: sap.ui.table.NavigationMode.Paginator,
    fixedColumnCount: 0
});

Working JS Fiddle here

Upvotes: 1

Related Questions