Table
Updated on August 22, 2024
As an enhancement to the more traditional table element and its children, Baleada Prose offers BaleadaProseTable—a table as defined by the WAI-ARIA spec.
To make the table easier to style than a standard HTML table, BaleadaProseTable renders divs for the table head, table body, and all table columns and rows. To be fully WAI-ARIA compliant, BaleadaProseTable renders those divs with all the necessary aria roles, and it requires the ariaLabel prop (i.e., it will show a warning in development if that prop is not supplied).
Just like BaleadaProseList, BaleadaProseTable also comes with an opt-in "type to filter" feature.
Example
Markdown
::: ariaLabel="Alphabet table" readerCanSearch readerCanChangeSearchCaseSensitivity
| Letter | Word |
| --- | --- |
| A | Apple |
| B | Banana |
| C | Captain Jean Luc Picard of the USS Enterprise |
| D | Dog |
:::
Rendered
Props
ariaLabelfalsearia-label for the table's root element.readerCanSearchfalsesearchIsCaseSensitivefalseIndicates whether or not the table's query filtering is case sensitive by default.
When it's true, BaleadaProseTable renders a text input containing context.messages.table.searchPlaceholder.
For more info on context.messages, see the guide on using context.
minimumSearchScore1Search results from your table are scored based on how closely they match the query. Any number between 0 and 1 is a valid minimumSearchScore, and a minimumSearchScore of 1 will filter out all table rows that don't contain a perfect match for the query.
Set a minimumSearchScore of less than 1 to enable fuzzy matching.
BaleadaProseTable uses Baleada Logic's Searchable class under the hood to support this feature.
readerCanChangeSearchCaseSensitivityfalseIndicates whether or not your end user can change the table's searchIsCaseSensitive setting.
When it's true, BaleadaProseTable renders a checkbox and messages.table.changeSearchCaseSensitivityLabel.
For more info on context.messages, see the guide on using context.
classesStructure
Here's the structure of BaleadaProseTable's markup, written in Pug for simplicity:
section.baleada-prose-table
div // Only renders when readerCanSearch is true
input type="text" placeholder="messages.table.searchPlaceholder" name="Search"
div // Only renders when readerCanSearch and readerCanChangeSearchCaseSensitivity are true
input type="checkbox" name="Change search case sensitivity"
label // Contains messages.table.changeSearchCaseSensitivityLabel
section.baleada-prose-contents
slot // Your table slots in here. See below for more guidance.
Here's the structure of the actual table's markup, written in Pug for simplicity:
div role="table" // Replaces <table>
div role="rowgroup" // Replaces <thead>
div role="row" // Replaces <tr>
div role="columnheader" // Replaces <th>
div role="rowgroup" // Replaces <tbody>
div role="row" // Replaces <tr>. Repeats for each row in the table body.
div role="cell" // Replaces <td>. Repeats for each cell in the row.
