# px-datatable
The `<datatable/>` component enables you to ...



## Usage

```react
const { datatable } = px;
<datatable>
  This is the children
</datatable>
```


## Properties

```table
span: 6
rows:
  - Name: children
    Type: node
    Description: The children content.
```


### Styling

```table
span: 6
rows:
  - Property: --px-data-table-border-color
    Default: null
    Description: The table border color

  - Property: --px-data-table-separator-color
    Default: null
    Description: The table separator color

  - Property: --px-data-table-header-text-color
    Default: null
    Description: The text color of header rows

  - Property: --px-data-table-header-background-color
    Default: null
    Description: The background color of header rows

  - Property: --px-data-table-cell-border-color--edit
    Default: null
    Description: The cell border color when in edit mode

  - Property: --px-data-table-cell-border-color--selected
    Default: null
    Description: The cell border color when selected

  - Property: --px-data-table-cell-border-validation--failed
    Default: null
    Description: The cell border color when validation fails

  - Property: --px-data-table-cell-background-color--selected
    Default: null
    Description: The cell background color when selected

  - Property: --px-data-table-cell-background-color--edit
    Default: null
    Description: The cell background color when in edit mode

  - Property: --px-data-table-background-color-striped--even
    Default: null
    Description: The background color of a striped cell (even)

  - Property: --px-data-table-cell-text-color--selected
    Default: null
    Description: The cell text color when selected

  - Property: --px-data-table-cell-text-color-validation--failed
    Default: null
    Description: The cell text color when validation fails

  - Property: --px-data-table-cell-text-color--sorted
    Default: null
    Description: The text color of a sorted column

  - Property: --px-data-table-cell-text-color--editing
    Default: null
    Description: The text color of a cell in edit mode

  - Property: --px-data-table-results-text-color--none
    Default: null
    Description: The text color for the "no results" message

  - Property: --px-data-table-insertion-indicator-td-background-color
    Default: null
    Description: The color of the insertion indicator for reordering

  - Property: --px-data-table-text-input-background-color--filter
    Default: null
    Description: The background color of a filter input box

  - Property: --px-data-table-text-color--dragged
    Default: null
    Description: The text color of a dragged item

  - Property: --px-data-table-text-color--hover
    Default: null
    Description: The text color of a column header when hovered

  - Property: --px-data-table-highlight--high
    Default: null
    Description: A highlight of value 'high'

  - Property: --px-data-table-highlight--medium
    Default: null
    Description: A highlight of value 'medium'

  - Property: --px-data-table-highlight--low
    Default: null
    Description: A highlight of value 'low'

  - Property: --px-data-table-padding-top
    Default: null
    Description: The top padding for table cells

  - Property: --px-data-table-padding-bottom
    Default: null
    Description: The bottom padding for table cells

  - Property: --px-data-table-padding-left
    Default: null
    Description: The left padding for table cells

  - Property: --px-data-table-padding-right
    Default: null
    Description: The right padding for table cells
```
