🤩
Windframe Import Update is finally here.

EditableTable

Angular Bootstrap EditableTable

The Contrast Angular Bootstrap Editable component allows you to create tables you can edit on the website. You can add and remove rows, change texts and informaton within cells.

Importing the Contrast Angular Bootstrap EditableTable Module

To use the Contrast Angular Bootstrap EditableTable component in your project you need to import EditableTableModule.

typescript
import {EditabletableModule } from 'cdbangular';

Default EditableTable

Set the striped prop to true to have a striped table, the bordered to true for borders. The data prop takes in an array of arrays, this is the data in the editabletable.

Angular Bootstrap EditableTable

html
html
<CDBCard>
<CDBCardBody>
<CDBEditableTable [striped]=true [bordered]=true [data]='data' [columns]='columns' ></CDBEditableTable>
</CDBCardBody>
</CDBCard>
typescript
Typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-editable-table',
templateUrl: './editable-table.component.html',
styleUrls: ['./editable-table.component.scss'],
})
export class EditableTableComponent implements OnInit {
columns = ['Fullname', 'Age', 'Company Name', 'City', 'Country'];
data = [
['Guerra Cortez', 45, 'Insectus', 'San Francisco', 'USA'],
['Elisa Gallagher', 31, 'Portica', 'London', 'United Kingdom'],
['Aurelia Vega', 30, 'Deepends', 'Madrid', 'Spain'],
['Guadalupe House', 26, 'Isotronic', 'Berlin', 'Germany'],
];
constructor() {}
ngOnInit(): void {}
}

API Reference: Contrast Angular Bootstrap EditableTable Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap EditableTable component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBEditableTable component.

NameTypeDefaultDescriptionExample
classStringAdds custom classesclass="myClass"
autoWidthBooleanfalseAdds w-auto to the classNameautoWidth=true
borderedBooleanfalseAdds borders on all sides of the table and cells.bordered=true
borderlessBooleanfalseRemoves borders on all sides of the table and cells.borderless=true
dataArrayBinds your data into the component.data = ['Aurelia Vega', 30, 'Depends']
columnsArraySpecify headers and number of columnscolumns=['Person Name', 'Age', 'Company Name']
hoverBooleanfalseEnables a hover state on table rows within a table body.hover=true
responsiveBooleanMakes table responsive across all viewportsresponsive=true
responsiveSmBooleanMakes table responsive up to the small breakpointresponsiveSm=true
responsiveMdBooleanMakes table responsive up to the medium breakpointresponsiveMd=true
responsiveLgBooleanMakes table responsive up to the large breakpointresponsiveLg=true
responsiveXlBooleanMakes table responsive up to the extra large breakpointresponsiveXl=true
hoverBooleanfalseEnables a hover state on table rows within a table body.hover=true
smallBooleanfalseMakes tables more compact by cutting cell padding in half.small=true
stripedBooleanfalseAdds zebra-striping to any table row within the table body.striped=true

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast