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

What is the best way to upload a canvas image from a GUI to the back-end using an AJAX call and setting the content-type as "image/jpeg"?

Encountering an issue: JwPagination in angular 9 throws an error of "Cannot read property 'currentValue' of undefined"

The Jquery script is ineffective for newly added elements

How should one correctly align various classes in a cascading manner within CSS?

Ways to implement CSS in my JQuery Plugin

"Exploring the Power of Angular 2 with Route Resolving

What is the best way to show an element when hovering over another element?

Extract attributes from a string of HTML containing name-value pairs

How to retrieve a parameter value within the app component in Angular 2

What is the best way to ensure observables in a template (using async pipe) are fully subscribed to before executing any initialization code?

Is it necessary to retrieve the data that was posted from the back-end? Implementation using Angular and Node.js

Importing JSON data from a URL to display in an HTML table

Guide on activating a service in one component to close a pop-up in a separate component [angular]

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

What is the best method for automating the transfer of data from a database to the user interface of a website using html and javascript?

Currently working on enhancing the responsiveness of the login form

Why are polyfills-es2015, vendor-es2015, main-es2015, and other files blocked from loading because the MIME type is not allowed (text/html

Developing a customizable datepicker with the ability to select specific months or date ranges

Exploring the Power of TailwindCss in Storybook 6 for Angular Development

Reposition icons accordingly while incorporating a new set of icons