Angular Space-Friendly Table

Question

Angular Space-Friendly Table

After attempting to code the sample in Angular, I realized it wasn't what I was looking for.

                    <table>
                        <th >Number</th>
                        <th >Merchant Name</th>
                        <th >Last Order Total</th>
                        <th >Last Order Date</th>
                        <hr>
                          <tr *ngFor="let item of topFiveActiveMerchant; index as i;">
                            <td>{{i+1}}</td>
                            <td>{{item.merchant_name}}</td>
                            <td>{{item.merchant_name}}</td>
                            <td>{{item.created_date | date:'dd/MM/yyyy h:mm a'}}</td>
                          </tr>
                    </table>

I intended for it to look like this https://i.stack.imgur.com/8foa3.png

but unfortunately, mine ended up looking like https://i.stack.imgur.com/Yf1rj.png

html css angular

Answer 1

Answer №1

If you are looking to implement a simple table, I have a solution for you. However, I recommend checking out mat-table (Documentation) as it offers easy implementation and a wide range of features. Below is the code snippet for a simple table:
HTML:

<table class="my-table">
  <thead class="my-table headers">
    <tr>
      <th *ngFor="let column of config">{{column.header}}</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr my-active *ngFor="let row of data.data; index as rowIndex">
      <td (click)="onSelect(rowIndex)" *ngFor="let column of config; index as i" [ngClass]="{last: i === (config.length - 1) }">{{row[column.value]}}</td>
    </tr>
  </tbody>
</table>

TS:

import {Component, OnInit, ViewChild} from '@angular/core';

export const configColumns = [{
  header: "Name",
  value: "name"
}, {
  header: "E-mail",
  value: "email"
}, {
  header: "Phone",
  value: "phone"
}];
export const data = [{
  name: "John Doe 1",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e747176707a717b4171707b5e7b737f7772307d7173">[email protected]</a>",
  phone: "900001111"
}, {
  name: "John Doe 2",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204a4f484e444f457f54574f60454d41494c0e434f4d">[email protected]</a>",
  phone: "900002222"
}, {
  name: "John Doe 3",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761c191e1812191329021e04131336131b171f1a5815191b">[email protected]</a>",
  phone: "900003333"
}];

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
   data:any;
   config:any;
  ngOnInit() {
    this.config=configColumns;
    this.data=data;
  }
}

CSS:

table.my-table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

thead.my-table.headers tr th {
  border: black solid 1px;
  background-color: darkblue;
  color: white;
  height: 25px;
}

tbody.my-table.body tr td {
  border: black solid 1px;
 
  height: 25px;
}

tbody.my-table.body tr.active {
  background-color: gainsboro;
  cursor: pointer;
}

div.pag-space {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

button.pag-button {
  width: 50px;
  height: 20px;
  cursor: pointer;
}

select.size-page {
  width: 100px;
  text-align-last: center;
  cursor: pointer;
}

Answer 2

If you are looking to implement a simple table, I have a solution for you. However, I recommend checking out mat-table (Documentation) as it offers easy implementation and a wide range of features. Below is the code snippet for a simple table:
HTML:

<table class="my-table">
  <thead class="my-table headers">
    <tr>
      <th *ngFor="let column of config">{{column.header}}</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr my-active *ngFor="let row of data.data; index as rowIndex">
      <td (click)="onSelect(rowIndex)" *ngFor="let column of config; index as i" [ngClass]="{last: i === (config.length - 1) }">{{row[column.value]}}</td>
    </tr>
  </tbody>
</table>

TS:

import {Component, OnInit, ViewChild} from '@angular/core';

export const configColumns = [{
  header: "Name",
  value: "name"
}, {
  header: "E-mail",
  value: "email"
}, {
  header: "Phone",
  value: "phone"
}];
export const data = [{
  name: "John Doe 1",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e747176707a717b4171707b5e7b737f7772307d7173">[email protected]</a>",
  phone: "900001111"
}, {
  name: "John Doe 2",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204a4f484e444f457f54574f60454d41494c0e434f4d">[email protected]</a>",
  phone: "900002222"
}, {
  name: "John Doe 3",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761c191e1812191329021e04131336131b171f1a5815191b">[email protected]</a>",
  phone: "900003333"
}];

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
   data:any;
   config:any;
  ngOnInit() {
    this.config=configColumns;
    this.data=data;
  }
}

CSS:

table.my-table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

thead.my-table.headers tr th {
  border: black solid 1px;
  background-color: darkblue;
  color: white;
  height: 25px;
}

tbody.my-table.body tr td {
  border: black solid 1px;
 
  height: 25px;
}

tbody.my-table.body tr.active {
  background-color: gainsboro;
  cursor: pointer;
}

div.pag-space {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

button.pag-button {
  width: 50px;
  height: 20px;
  cursor: pointer;
}

select.size-page {
  width: 100px;
  text-align-last: center;
  cursor: pointer;
}

Answer 3

Answer №2

If you are experienced with Angular Material or Bootstrap, you have the option to utilize their predefined table styles. However, if you wish to create a custom table design, you will need to individually style each element of the table.

To customize the appearance of each column within the Table Header and Table Description, you can apply the following css styling:

In your component.html file, assign a class to the table:

<table class="custom-table">

In your component.css or component.scss file:

.custom-table {
  border-collapse: collapse;
}
.custom-table th,
.custom-table td {
    padding: 10px;
    // add other css properties as needed
}

Distinguish header styling separately:

.custom-table th {
    padding: 10px;
    // add other css properties as needed
}

Differentiate column styling separately:

.custom-table td {
    padding: 10px;
    // add other css properties as needed
}

To specify the width of a column:

<th style="width: 200px">Merchant</th>

Explore additional styles such as alignment:

<th style="width: 200px; text-align: center">Merchant</th>

Apply similar adjustments for column descriptions:

<td style="text-align: center">{{item.merchant_name}}</td>

Refine styling within column descriptions:

<td style="text-align: center">
    <div class="name">{{item.merchant_name}}</div>
    <div class="desg">{{item.merchant_desg}}</div>
</td>

Refer to Angular's component-styles guide for further assistance in styling components.

::ng-deep .custom-table .name {
    font-weight: bold;
    font-size: 18px;
    // add other styles
}
::ng-deep .custom-table .desg {
    font-size: 12px;
    // add other styles
}

If using SCSS:

::ng-deep .custom-table {
    .name {
        font-weight: bold;
        font-size: 18px;
        // add other styles
    }
    .desg {
        font-size: 12px;
        // add other styles
    }
}

Answer 4

If you are experienced with Angular Material or Bootstrap, you have the option to utilize their predefined table styles. However, if you wish to create a custom table design, you will need to individually style each element of the table.

To customize the appearance of each column within the Table Header and Table Description, you can apply the following css styling:

In your component.html file, assign a class to the table:

<table class="custom-table">

In your component.css or component.scss file:

.custom-table {
  border-collapse: collapse;
}
.custom-table th,
.custom-table td {
    padding: 10px;
    // add other css properties as needed
}

Distinguish header styling separately:

.custom-table th {
    padding: 10px;
    // add other css properties as needed
}

Differentiate column styling separately:

.custom-table td {
    padding: 10px;
    // add other css properties as needed
}

To specify the width of a column:

<th style="width: 200px">Merchant</th>

Explore additional styles such as alignment:

<th style="width: 200px; text-align: center">Merchant</th>

Apply similar adjustments for column descriptions:

<td style="text-align: center">{{item.merchant_name}}</td>

Refine styling within column descriptions:

<td style="text-align: center">
    <div class="name">{{item.merchant_name}}</div>
    <div class="desg">{{item.merchant_desg}}</div>
</td>

Refer to Angular's component-styles guide for further assistance in styling components.

::ng-deep .custom-table .name {
    font-weight: bold;
    font-size: 18px;
    // add other styles
}
::ng-deep .custom-table .desg {
    font-size: 12px;
    // add other styles
}

If using SCSS:

::ng-deep .custom-table {
    .name {
        font-weight: bold;
        font-size: 18px;
        // add other styles
    }
    .desg {
        font-size: 12px;
        // add other styles
    }
}

Angular Space-Friendly Table

Answer №1

Answer №2

Similar questions

Loop through the elements of a class in JavaScript and choose all except for the one that was

Pattern for Ajax callback in Javascript

Collaborative service involves objects passing through reference

Utilize Angular 2 routes within your express application

what distinguishes CSS properties for Id versus class selectors

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

Position components in Angular 2 based on an array's values

How can we update the information in the initial observable using data from a separate observable, taking into consideration specific conditions in Angular with RxJS?

Tips for setting height within a flexbox layout?

Generating PDF files from HTML using Angular 6

My element is not being animated by Elementbyclass

Enhance Your File Uploads with Custom Images in Bootstrap

The aligning property "justify-content: space around" does not behave as expected on a line and does not provide the desired spacing

The option to clear searches is missing from the iOS interface

CSS hover effect applied uniformly to all link children

Utilizing the background-clip property with a gradient overlay

What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

Having trouble accessing specific results using Firestore's multiple orderBy (composite index) feature

Exploring Angular5 Testing Utilizing Jasmine: A Component Found in Both the AppModule and DynamicTestModule's Declarations

The height of the container is not adjusted correctly after loading data via ajax which causes it to overlap with