Config Table¶

A component for displaying, editing and deleting configuration data.

Anatomy¶

<ConfigTable>
    <ConfigTable.Table>
        <ConfigTable.Header>
            <ConfigTable.Row>
                <ConfigTable.CellHeader />
            </ConfigTable.Row>
        </ConfigTable.Header>
        <ConfigTable.Body>
            <ConfigTable>
                <ConfigTable.CellCheckbox />
                <ConfigTable.Cell />
                <ConfigTable.CellActions />
            </ConfigTable>
        </ConfigTable.Body>
    </ConfigTable.Table>
    <ConfigTable.ActionBar>
            <ConfigTable.ActionButton  />
    </ConfigTable.ActionBar>
</ConfigTable.>

Reference¶

ConfigTable¶

Contains all parts of the table. Config table child components must be wrapped with this component.

Prop	Type	Default	Description
`status`	`"pending" / "error" / "success"`		This will usually be the status returned from a `react-query` query

Table¶

Equivalent of HTML <table>. Shows a loading spinner when status is loading, and error message when status is error.

Prop	Type	Default
`maxHeight`	`string`	`100%`

Equivalent of a HTML <thead>.

Body¶

Equivalent of a HTML <tbody>.

Row¶

Equivalent of a HTML <tr>.

Prop	Type	Default	Description
`key`	`string / number`		A row `key` should be unique

CellHeader¶

Equivalent of a HTML <th>.

Prop	Type	Default
`textAlign`	`"left" / "center" / "right"`	`left`

Cell¶

Equivalent of a HTML <td>.

Prop	Type	Default	Description
`textAlign`	`left / center / right`	`left`
`fitContent`	`boolean`	`false`	If `true` the cell column will shrink to fit its contents

CellActions¶

A cell that provides inline 'edit' and 'delete' functionality to a row.

Prop	Type	Description
`rowId`	`number`	A unique identifier for the row
`onEditClick`	`function: (rowId) => void`	An event handler for edit click
`onDeleteClick`	`function: (rowId) => void`	An event handler for delete click

CellCheckbox¶

A cell containing a checkbox. Usually used to perform bulk actions.

Prop	Type	Description
`rowId`	`number`	A unique identifier for the row
`checked`	`boolean`
`onCheckedChange`	`function: (rowId) => void`

ActionBar¶

A container for bulk action buttons. Can be placed before or after a Table.

ActionButton¶

A button for performing a bulk action.

Prop	Type	Default	Description
`type`	`"delete"`	`"delete"`	*note: this button can be extended to allow other bulk actions
`onClick`	`function: () => void`