/**
 * @module Table
 * @type {object}
 * @author Berk Baski <berk.baski@smartface.io>
 * @copyright Smartface 2021
 */
import WebView from "@smartface/native/ui/webview";
/** CSS properties available within this component */
declare const Styles: {
    width: string;
    height: string;
    margin: string;
    marginLeft: string;
    marginRight: string;
    marginBottom: string;
    marginTop: string;
    padding: string;
    paddingLeft: string;
    paddingRight: string;
    paddingBottom: string;
    paddingTop: string;
    color: string;
    background: string;
    backgroundColor: string;
    fontSize: string;
    fontWeight: string;
    fontFamily: string;
    border: string;
    borderLeft: string;
    borderRight: string;
    borderBottom: string;
    borderTop: string;
    alignItems: string;
    justifyContent: string;
    diplay: string;
    position: string;
    left: string;
    right: string;
    bottom: string;
    top: string;
    zIndex: string;
};
/**
 * Custom props of elements
 */
declare type AttributeOptions = {
    /** Key and Value of the prop */
    [key: string]: any;
};
/** Properties of columns in the row */
declare type ColumnOptions = {
    /** Value of column */
    key: string;
    /** Class of column */
    columnClass?: string;
    /** Inline style of column */
    columnStyles?: typeof Styles;
    /** Attributes of column */
    columnAttributes?: AttributeOptions;
};
/** Properties of rows in the table */
declare type RowOptions = {
    /** Inline style of row */
    rowStyles?: Partial<typeof Styles>;
    /** Class of row */
    rowClass?: string;
    /** Attributes of row */
    rowAttributes?: AttributeOptions;
    /** Columns in the row */
    columns?: ColumnOptions[];
};
/** Options for creating a table */
declare type TableOptions = {
    /** **link** elements to add to the header of the page */
    styleLinks?: string[];
    /** External styles to add to the page's **style** element */
    externalStyles?: string;
    /** Class of table */
    tableClass?: string;
    /** Inline style of table */
    tableStyles?: Partial<typeof Styles>;
    /** Attributes of table */
    tableAttributes?: AttributeOptions;
    /** Rows in the table */
    rows?: RowOptions[];
};
interface TableInitOptions {
    /** **WebView** or **WebViewBridge** component to show after rendering given table options */
    webView: WebView;
    /** Options of table */
    tableOptions: TableOptions;
}
/**
 * It's creating a table in **WebView** or **WebViewBridge** using given values and style parameters
 * @public
 * @class
 * @param {object} options options - Base options object
 * @param {WebView} webView The browser for creating a table
 * @param {TableOptions} tableOptions The options for creating a table
 * @example
 * ```
 * const headerColumns = ['First name', 'Last name'];
 * const bodyColumns = [
 *     { first: 'Shmi', last: 'Skywalker' },
 *     { first: 'Anakin', last: 'Skywalker' },
 *     { first: 'Luke', last: 'Skywalker' },
 *     { first: 'Leia', last: 'Organa' },
 *     { first: 'Han', last: 'Solo' }
 * ];
 *
 * const table = new Table({
 *     webView: this.webView1,
 *     tableOptions: {
 *         rows: [
 *             {
 *                 rowStyles: {
 *                     color: '#fff',
 *                     fontWeight: 'bold',
 *                     backgroundColor: '#000'
 *                 },
 *                 columns: headerColumns.map(key => ({ key }))
 *             },
 *             ...bodyColumns.map(column => ({
 *                 rowStyles: {
 *                     padding: '10px 0',
 *                     borderBottom: '1px solid #000'
 *                 },
 *                 columns: [
 *                     { key: column.first },
 *                     { key: column.last }
 *                 ]
 *             }))
 *         ]
 *     }
 * });
 * table.render();
 * ```
 */
export default class Table implements TableInitOptions {
    /** Web equivalent of CSS properties */
    styleTypes: Readonly<typeof Styles>;
    webView: WebView;
    tableOptions: TableOptions;
    /**
     * It's creating a table in **WebView** or **WebViewBridge** using given values and style parameters
     * @public
     * @class
     * @param {object} options options - Base options object
     * @param {WebView} webView The browser for create a table
     * @param {TableOptions} tableOptions The options for create a table
     * @example
     * ```
     * const headerColumns = ['First name', 'Last name'];
     * const bodyColumns = [
     *     { first: 'Shmi', last: 'Skywalker' },
     *     { first: 'Anakin', last: 'Skywalker' },
     *     { first: 'Luke', last: 'Skywalker' },
     *     { first: 'Leia', last: 'Organa' },
     *     { first: 'Han', last: 'Solo' }
     * ];
     *
     * const table = new Table({
     *     webView: this.webView1,
     *     tableOptions: {
     *         rows: [
     *             {
     *                 rowStyles: {
     *                     color: '#fff',
     *                     fontWeight: 'bold',
     *                     backgroundColor: '#000'
     *                 },
     *                 columns: headerColumns.map(key => ({ key }))
     *             },
     *             ...bodyColumns.map(column => ({
     *                 rowStyles: {
     *                     padding: '10px 0',
     *                     borderBottom: '1px solid #000'
     *                 },
     *                 columns: [
     *                     { key: column.first },
     *                     { key: column.last }
     *                 ]
     *             }))
     *         ]
     *     }
     * });
     * table.render();
     * ```
     */
    constructor(options: TableInitOptions);
    /**
     * It renders the table chart options to the WebView or WebViewBridge browser
     * @method
     * @public
     */
    render(): void;
    /**
     * It returns the generated html string
     * @method
     * @public
     */
    generateHtml(): string;
    private parseAttributes;
    private parseClasses;
    private parseStyles;
    private getTableRows;
    private getRowColumns;
}
export {};