@some-angular-utils/table

DEMO

NPM

IMPORT

import { SAUTableModule } from '@some-angular-utils/table';

TYPESCRIPT

public url = 'https://pokeapi.co/api/v2/pokemon';

public headers = [
    { name: 'NOMBRE', key: 'name' },
    { name: 'URL', key: 'url', type: 'link', linkName: 'Ver' },
    { name: 'IMG', key: 'name', type: 'image', url: 'https://img.pokemondb.net/artwork/{key}.jpg' }
]

HTML

<sau-table
    [url]="url"
    contentList="results"
    contentTotal="count"
    pageParamName="offset"
    limitParamName="limit"
    [sizeBetweenPages]="10"
    [limit]="10"
    [headers]="headers"
></sau-table>

COLORS

.sau-table{
    --sau-color-primary: rgb(147, 51, 234);
    --sau-color-secondary: var(--sau-color-primary);
    --sau-color-background: rgb(255, 255, 255);
    --sau-color-edit: rgb(34, 197, 94);
    --sau-color-delete: rgb(239, 68, 68);
    --sau-color-text: rgb(31, 41, 55);
}

CUSTOM BUTTONS

<sau-table ... >

    <ng-template #editButton let-item>
        <button>
            ✏️ Edit {{item.name}}
        </button>
    </ng-template>

    <ng-template #deleteButton let-item>
        <button>
            🗑️ Delete {{item.name}}
        </button>
    </ng-template>

</sau-table>