Table

The ETable efficiently displays details, compares items, shows timetables, and lists contacts, enhancing usability by organizing information logically. Demo Here

Import

import ETable from "@components/Elements/ETable";
import ETableHead from "@components/Elements/ETable/ETableHead";
import ETableBody from "@components/Elements/ETable/ETableBody";
import ETableRow from "@components/Elements/ETable/ETableRow";
import ETableCell from "@components/Elements/ETable/ETableCell";

Usage

const TableExample = () => {
    return (
        <ETable>
            <ETableHead>
                <ETableRow>
                    <ETableCell>Name</ETableCell>
                    <ETableCell>Status</ETableCell>
                    <ETableCell>Date</ETableCell>
                </ETableRow>
            </ETableHead>
            <ETableBody>
                <ETableRow>
                    <ETableCell>
                        First
                    </ETableCell>
                    <ETableCell>Active</ETableCell>
                    <ETableCell>
                        15/11/2022
                    </ETableCell>
                </ETableRow>

                <ETableRow>
                    <ETableCell>
                        Second
                    </ETableCell>
                    <ETableCell>Pending</ETableCell>
                    <ETableCell>
                        15/11/2022
                    </ETableCell>
                </ETableRow>

                <ETableRow>
                    <ETableCell>
                        Third
                    </ETableCell>
                    <ETableCell>Error</ETableCell>
                    <ETableCell>
                        15/11/2022
                    </ETableCell>
                </ETableRow>
            </ETableBody>
        </ETable>
    );
};

export default TableExample;

Props

For Table component, the following props are available:

Prop	Type	Default	Note
striped	Boolean	false	Create a zebra striped table.
height	[String, Number]	-	Sets the component's height. Default unit is px.
bordered	Boolean	false	Adds vertical border to the cell.
className	String	-	Overrides or extends the component's wrapper styles.
stickyHead	Boolean	false	Makes the header of a table stick to the top of the screen.
size	String	"md"	The ETable element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container. Possible values are start, center and end.
square	Boolean	false	Removes rounded corners of the element.

For ETableHead component, the following props are available:

Prop	Type	Default	Note
size	String	"md"	The ETable element has three predefined sizes: sm, md, lg.
stickyHead	Boolean	false	Makes the header of a table stick to the top of the screen.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container. Possible values are start, center and end.
className	String	-	Overrides or extends the component's wrapper styles.

For ETableRow component, the following props are available:

| Prop      | Type     | Default | Note                                                 |

|-----------|----------|---------|------------------------------------------------------| | className | String | - | Overrides or extends the component's wrapper styles. |

For ETableBody component, the following props are available:

Prop	Type	Default	Note
striped	Boolean	false	Create a zebra striped table.
bordered	Boolean	false	Adds vertical border to the cell.
className	String	-	Overrides or extends the component's wrapper styles.
size	String	"md"	The ETable element has three predefined sizes: sm, md, lg.
align	String	"start"	Specifies how the pagination buttons are distributed along the cross axis in a container. Possible values are start, center and end.

For ETableCell component, the following props are available:

Prop	Type	Default	Note
className	String	-	Overrides or extends the component's wrapper styles.
tag	elementType	-	The html tag used for the root node.(th, td)
sort	String	"indeterminate"	Represents sort order. @values: 'indeterminate', 'asc', 'desc'. (Uses an up or down arrow to represent sorting.)
sortable	Boolean	-	Enables sorting option.

NOTE

The ETableCell component renders a th element for table header and td for table data cells.

Children

The ETable component provides a children props that enable you to customize the content.

Children	Description
ETableHead	thead
ETableRow	tr
ETableBody	tbody
ETableCell	th or td based on parent context.