How can i column width with datagrid

Question

I have a datagrid in an angular 5 app:

<clr-datagrid>
  <clr-dg-column>a</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row>
    <clr-dg-cell>1</clr-dg-cell>
    <clr-dg-cell>2</clr-dg-cell>
    <clr-dg-cell>3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

On a mobile display, this table is wider than the screen, how can I set the width of the columns so it shrinks.

EDIT: What I'm trying to acomplish is to recreate this scoresheet: https://boardgamegeek.com/image/3360178/clans-caledonia

I belive it should be possible to create something close to it for input on a mobile device.

Answer 1

You can set column width by using a css class on the column

HTML

<clr-datagrid>
  <clr-dg-column class="width1">a</clr-dg-column>
  <clr-dg-column class="width2">b</clr-dg-column>
  <clr-dg-column class="width3">b</clr-dg-column>
  <clr-dg-column>b</clr-dg-column>

  <clr-dg-row *ngFor="let i of [1,2,3,4,5]">
    <clr-dg-cell >1</clr-dg-cell>
    <clr-dg-cell >2</clr-dg-cell> 
    <clr-dg-cell >3</clr-dg-cell>
    <clr-dg-cell>4</clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

CSS

.width1 {
  width: 15%;
}

.width2 {
  width: 25%;
}

.width3 {
  width: 35%;
}

Update After looking at the StackBlitz it occurs to me that perhaps you could just use a simple table. Overriding the default input styles with

td > input {
  width: 1.5rem;
  min-width: 1.5rem;
}

And using a standard table element

<table class="table">
    <thead>
        <tr>
            <th></th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of [1,2,3,4,5,6]">
            <td>Type {{item}}</td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
            <td><input type="number"></td>
        </tr>
    </tbody>
</table>

It looks like it will collapse down on narrow width viewport.

Here is your modified StackBlitz: https://stackblitz.com/edit/angular-dbzvmg