md-table - कॉलम की चौड़ाई कैसे अपडेट करें

Question

मैंने अपने प्रोजेक्ट के लिए md-table का उपयोग करना शुरू कर दिया है, और मैं निश्चित कॉलम चौड़ाई चाहता हूं। वर्तमान में सभी स्तंभों की चौड़ाई को समान आकार में विभाजित किया गया है।

मुझे डेटा तालिका आयामों के प्रलेखन कहां मिल सकते हैं?

https://material.angular.io/components/table/overview

Answer 1

जब सामग्री तालिका बनाती है, तो यह स्वचालित रूप से आपके लिए दो वर्ग-नाम लागू करता है जिसका उपयोग आप प्रत्येक कॉलम को स्टाइल करने के लिए कर सकते हैं। नीचे दिए गए उदाहरण में शैलियों का नाम mat-column-userIdऔर है cdk-column-userId।

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

अब आप उन नामों को css में उपयोग कर सकते हैं:

.mat-column-userId {
  flex: 0 0 100px;
}

करने के लिए इसी तरह के राहुल पाटिल के जवाब , लेकिन आप अपने स्तंभ परिभाषाओं को अन्य वर्ग को जोड़ने की जरूरत नहीं है।

Comments

मेरे मामले में मुझे इस तरह से लागू की जाने वाली शैलियों के लिए महत्वपूर्ण था क्योंकि अन्यथा शैली के लिए .mat-header-cellपूर्वता होगी। वैकल्पिक रूप से, आप शीर्ष लेख कक्ष के लिए एक और शैली नियम जोड़ सकते हैं।

— एड्रियन स्मिथ

क्या इसके लिए कहीं भी प्रलेखन उपलब्ध है (मैं यह समझना चाहता था कि "फ्लेक्स" के बाद 3 मानों में से प्रत्येक का क्या अर्थ है और कैसे .mat-column- <colName> संबंधित कॉलम में भेजा गया है)? धन्यवाद!

— राह्स

@RahulSaha फ्लेक्स अब एक मानक सीएसएस संपत्ति है: "यह एक आशुलिपि संपत्ति है जो फ्लेक्स-ग्रो, फ्लेक्स-हटना और फ्लेक्स-बेस सेट करती है।" स्रोत: developer.mozilla.org/en-US/docs/Web/CSS/flex

— एरिक I

यह वह समाधान है जिसका मैंने उपयोग किया है, लेकिन फ्लेक्स के आधार पर सेट करने के बजाय मैंने फ्लेक्स का विकास किया इसलिए सेल अन्य कोशिकाओं की तुलना में 3x बड़ा है (फ्लेक्स: 3 0 0)

— emulcahy

फ्लेक्स के साथ चौड़ाई सेट करना मेरे मामले में काम नहीं करता था। न ही चौड़ाई। न्यूनतम चौड़ाई (किसी कारण से)।

— पॉल इवांस

Answer 2

अभी, इसे एपीआई स्तर पर उजागर नहीं किया गया है। हालाँकि आप इसे कुछ इसी तरह का उपयोग करके प्राप्त कर सकते हैं

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

सीएसएस में, आपको इस कस्टम वर्ग को जोड़ने की आवश्यकता है -

.customWidthClass{
   flex: 0 0 75px;
}

यहाँ कक्षा या कस्टम चौड़ाई जोड़ने के लिए तर्क देने के लिए स्वतंत्र महसूस करें। यह कॉलम के लिए कस्टम चौड़ाई लागू करेगा।

चूंकि md-table उपयोग करता है flex, हमें फ्लेक्स तरीके से निश्चित चौड़ाई देने की आवश्यकता है। यह बस बताते हैं -

0 = नहीं बढ़ता (फ्लेक्स-ग्रो के लिए आशुलिपि)

0 = हटना नहीं है (फ्लेक्स-हटना के लिए आशुलिपि)

75 पीएक्स = 75 पीएक्स पर शुरू करें (फ्लेक्स-बेस के लिए शॉर्टहैंड)

यहां प्लैंक करें - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

Comments

अच्छा काम करता है। धन्यवाद। लेकिन अगर डेटा अधिक है तो इसकी तालिका से भी आगे जाना होगा। और वर्ड-रैप भी काम नहीं कर रहा है

— विनुथा कुमार

आप सामान्य वर्ग के बजाय [ngClass] का उपयोग क्यों करते हैं?

— आंद्रे एलिको

Answer 3

यदि आप अपनी परियोजना में कोणीय / फ्लेक्स-लेआउट का उपयोग कर रहे हैं , तो आप मैट-हेडर-सेल और मैट-सेल में fxFlex निर्देश जोड़कर कॉलम सेट कर सकते हैं :

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

अन्यथा, आप समान परिणाम प्राप्त करने के लिए कस्टम CSS जोड़ सकते हैं:

.mat-column-name{
    flex: 0 0 100px;
}

Answer 4

इसे देखें: https://github.com/angular/material2/issues/5808

चूंकि सामग्री 2 फ्लेक्स लेआउट का उपयोग कर रही है, आप बस fxFlex="40"(या fxFlex के लिए इच्छित मान) सेट कर सकते हैं md-cellऔर md-header-cell।

Comments

यह इंगित करने योग्य है कि fxFlex="40px"यह भी संभव है

— उमुटेन

ऐसा करने का सबसे सरल तरीका। अच्छा सुझाव!

— jseals

Answer 5

मुझे जयदामन का संयोजन मिला और राहुल पाटिल के जवाब मेरे लिए सबसे अच्छा काम कर रहे हैं:

.mat-column-userId {
  flex: 0 0 75px;
}

इसके अलावा, यदि आपके पास एक "अग्रणी" कॉलम है जिसे आप हमेशा अलग-अलग उपकरणों में एक निश्चित स्थान पर कब्जा करना चाहते हैं, तो मैंने उपलब्ध कंटेनर चौड़ाई को और अधिक संवेदनशील तरीके से अपनाने के लिए निम्नलिखित काफी उपयोगी पाया (यह शेष स्तंभों को मजबूर करता है। शेष स्थान का समान रूप से उपयोग करें):

.mat-column-userName {
  flex: 0 0 60%;
}

Comments

यह सबसे अच्छा जवाब है।

— PedroPovedaQ

Answer 6

कोणीय सामग्री प्रलेखन का उपयोग करता है

.mat-column-userId {
    max-width: 40px;
}

स्तंभ की चौड़ाई को बदलने के लिए इसकी तालिका घटक के लिए। फिर, userId कोशिकाओं का नाम होगा।

Answer 7

मैं FlexLayout का उपयोग क्वेरी मीडिया के अनुसार कॉलम की चौड़ाई को अपडेट करने के लिए कर रहा हूं जो FlexLayout हमें देता है।

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

इसका अर्थ है कि यह कॉलम डिफ़ॉल्ट रूप से 30% पंक्ति चौड़ाई का उपयोग करेगा, जब gt-xs @mediaQuery से मुलाकात की जाती है, नई चौड़ाई 15% होगी और अन्य स्थितियों के लिए समान व्यवहार होगा

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

FlexLayout और @MediaQueries के बारे में https://github.com/angular/flex-layout/wiki/Responsive-API पर अधिक पढ़ें

Comments

एक कॉलम में fxFlex निर्देश जोड़ना उन सभी को प्रभावित करता है। क्या केवल एक कॉलम को लक्षित करने का कोई तरीका है?

— zakdances

Answer 8

मैंने अभी उपयोग किया है:

th:nth-child(4) {
    width: 10%;
}

4 हेडर की स्थिति के साथ बदलें जिसे आपको चौड़ाई समायोजित करने की आवश्यकता है। उपयोग किए गए दस्तावेज़ में उदाहरण :

td, th {
  width: 25%;
}

इसलिए मैंने जो चाहा उसे पाने के लिए मैंने इसे संशोधित किया।

Answer 9

आप .mat-cell वर्ग को फ्लेक्स पर सेट कर सकते हैं: 0 0 200px; फ्लेक्स के बजाय: 1 के साथ-साथ नथ-बच्चे के साथ।

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}

Answer 10

अब आप इसे इस तरह से कर सकते हैं

<cdk-cell [style.flex]="'0 0 75px'">

Answer 11

आप उपयोग कर सकते हैं fxFlex"@ कोणीय / फ्लेक्स लेआउट" से में thऔर tdइस तरह:

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
       </th>
</ng-container>

Answer 12

.mat-column-skills {
    max-width: 40px;
}

Comments

क्या आपको यकीन है, कि यह शीर्ष मतदान से विचलित होता है? शायद आपका cdkColumnDef सिर्फ अलग है?

— user1781290

कोई बहुत अधिक वही नहीं, बस प्रकाश डालना चाहता था, कि केवल मेरे लिए यह काम किया।

— प्रगति दुगड़

Answer 13

आप तत्व चयनकर्ताओं का उपयोग भी कर सकते हैं:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

लेकिन अधिकांश मामलों में जाने के लिए jymdman का जवाब सबसे अनुशंसित तरीका है।

Answer 14

नमूना चटाई-तालिका स्तंभ और संगत CSS:

HTML / खाका

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

सीएसएस

.mat-column-courtFolderId {
    flex: 0 0 35%;
}

Answer 15

आप चाहें तो मार्कअप में सीधे स्टाइल भी जोड़ सकते हैं:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

Answer 16

यदि आपके पास बहुत अधिक टेबल कॉलम है और इसे कोणीय तालिका में उपयोग करके समायोजित नहीं किया गया है md-table, तो component.cssफ़ाइल में निम्न शैली पेस्ट करें । यह स्क्रॉल के साथ आकर्षण की तरह क्षैतिज रूप से काम करेगा।

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

अपने कॉलम को अलग से बदलने के लिए इस शैली को जोड़ें।

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

वैकल्पिक रूप से इस लिंक की जाँच करें , (जहाँ ऊपर कोड आया था) , और अधिक विवरण के लिए।

Answer 17

एक उदाहरण लेते हैं। यदि आपकी तालिका में निम्नानुसार कॉलम हैं:

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

चूंकि इसमें दो कॉलम होते हैं। तब हम स्तंभों की चौड़ाई का उपयोग कर सेट कर सकते हैं

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

इस उदाहरण के लिए, हम लेते हैं

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }

Answer 18

मुझे इसके लिए बहुत आसान समाधान मिला - सेल और हेडर सेल दोनों को ओवरराइड करके स्टाइल शीट में कॉलम के लिए अलग चौड़ाई सेट करना:

उदाहरण - 1 और 5 वें कॉलम के लिए कस्टम चौड़ाई सेट करना:

.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
  flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
  flex: 0 0 10%;
}

GitHub