You need to sign in to do that
Don't have an account?
![Vaibhab Shah Vaibhab Shah](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)
Distorted column at the end of the table
Hi,
I have used one lightning button at the end of the row which is getting distorted and not in shape with the other columns in a row.
Initially there will be any row in the table. only header with columns will be visible. On clicking the Add row, rows will be added.
I have attached the screenshot.
PFB my code:
<template>
<lightning-card class="slds-card_boundary" icon-name="custom:custom13">
<h1 slot="title">{title}</h1>
<div class="slds-card__body slds-card__body_inner">
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-m-bottom_large">
<thead>
<tr class="slds-text-title_caps">
<template for:each={columns} for:item="column">
<th key={column.apiName}><div class="slds-truncate">{column.label}</div></th>
</template>
</tr>
</thead>
<tbody>
<template for:each={rows} for:item="row" for:index="index">
<tr class="inputRows" key={row.uuid}>
<template for:each={columns} for:item="column">
<td key={column.apiName}>
<c-input-table-cell record={row} field={column.apiName}></c-input-table-cell>
</td>
</template>
<td>
<lightning-button value={index} variant="brand" label="Delete Row" onclick={removeRow}></lightning-button>
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td><lightning-button variant="brand" label="Add Row" onclick={addRow}></lightning-button></td>
</tr>
</tfoot>
</table>
</div>
</lightning-card>
</template>
I have used one lightning button at the end of the row which is getting distorted and not in shape with the other columns in a row.
Initially there will be any row in the table. only header with columns will be visible. On clicking the Add row, rows will be added.
I have attached the screenshot.
PFB my code:
<template>
<lightning-card class="slds-card_boundary" icon-name="custom:custom13">
<h1 slot="title">{title}</h1>
<div class="slds-card__body slds-card__body_inner">
<table class="slds-table slds-table_bordered slds-table_cell-buffer slds-m-bottom_large">
<thead>
<tr class="slds-text-title_caps">
<template for:each={columns} for:item="column">
<th key={column.apiName}><div class="slds-truncate">{column.label}</div></th>
</template>
</tr>
</thead>
<tbody>
<template for:each={rows} for:item="row" for:index="index">
<tr class="inputRows" key={row.uuid}>
<template for:each={columns} for:item="column">
<td key={column.apiName}>
<c-input-table-cell record={row} field={column.apiName}></c-input-table-cell>
</td>
</template>
<td>
<lightning-button value={index} variant="brand" label="Delete Row" onclick={removeRow}></lightning-button>
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td><lightning-button variant="brand" label="Add Row" onclick={addRow}></lightning-button></td>
</tr>
</tfoot>
</table>
</div>
</lightning-card>
</template>
![Vaibhab Shah Vaibhab Shah](https://dfc-org-production.my.site.com/img/userprofile/default_profile_45_v2.png)