Skip to content

Latest commit

 

History

History

ebay-table

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
__tests__
__tests__
 
 
README.md
README.md
 
 
index.ts
index.ts
 
 
table-cell.tsx
table-cell.tsx
 
 
table-header.tsx
table-header.tsx
 
 
table-row.tsx
table-row.tsx
 
 
table.tsx
table.tsx
 
 
types.ts
types.ts
 
 

README.md

EbayTable

Demo

Storybook

Usage

Import JS

import {
    EbayTable,
    EbayTableHeader,
    EbayTableRow,
    EbayTableCell,
    type TableSelectHandler,
    type TableSortHandler,
    type TableRowSelectHandler,
    type TableHeaderSortHandler,
} from "@ebay/ui-core-react/ebay-table";

Import following styles from SKIN

import "@ebay/skin/table";

If tokens haven't been added to the project at a higher level, make sure to import

import "@ebay/skin/tokens";

Or import styles using SCSS/CSS

import "@ebay/skin/table.css";

Import icons

Add the below icons to the EbaySvg component.

Note: Make sure that EbaySvg is only rendered on the server so it does not affect the client bundle size.

<EbaySvg
    icons={[
        // If using sorting behavior
        "sort12",
        "sort12up",
        "sort12down",

        // If using selection behavior
        "checkboxChecked18",
        "checkboxUnchecked18",
        "checkboxMixed18",
    ]}
/>
<EbayTable>
    <EbayTableHeader>
        <EbayTableRow>
            <EbayTableCell>Column 1</EbayTableCell>
            <EbayTableCell>Column 2</EbayTableCell>
            <EbayTableCell>Column 3</EbayTableCell>
        </EbayTableRow>
    </EbayTableHeader>
    <EbayTableRow>
        <EbayTableCell>Row 1, Cell 1</EbayTableCell>
        <EbayTableCell>Row 1, Cell 2</EbayTableCell>
        <EbayTableCell>Row 1, Cell 3</EbayTableCell>
    </EbayTableRow>
    <EbayTableRow>
        <EbayTableCell>Row 2, Cell 1</EbayTableCell>
        <EbayTableCell>Row 2, Cell 2</EbayTableCell>
        <EbayTableCell>Row 2, Cell 3</EbayTableCell>
    </EbayTableRow>
</EbayTable>

Attributes

EbayTable

Name Type Required Description Data
density String No Table density, compact, relaxed, none
mode String No Table mode, selection, none
allSelected String No Select all tri-state checkbox state, true, false, mixed
a11ySelectAllText String No Accessibility text for select all checkbox
a11ySelectRowText String No Accessibility text for select row checkbox
onSelect Function No Triggered on selection (event: Event, { selected, allSelected })
onSort Function No Triggered on column sort (event: Event, { sorted })

EbayTableHeader

Name Type Required Description Data
columnType String No Column type, normal, numeric, layout, icon-action
name String No Column name that will be used in the EbayTable event sorted object
sort String No Defines which icon will be shown, asc, desc, none
rowHeader Boolean No Defines if the column is a row header
onSort Function No Triggered on column sort (event: Event)

EbayTableRow

Name Type Required Description Data
name String No Column name that will be used in the EbayTable events objects selected
selected Boolean No Defines if the row is selected
mode String No Row mode, selection, none
a11ySelectRowText String No Accessibility text for select row checkbox
onSelect Function No Triggered on row selection (event: Event, { name, selected })

EbayTableCell

Name Type Required Description Data
rowHeader Boolean No Defines if the cell is a row header (<th>)
columnType String No Column type, normal, numeric, layout, icon-action