@bodiless/table
Advanced tools
Weekly downloads
Changelog
1.0.0-rc.23 (2023-02-08)
Note: Version bump only for package bodiless-js
Readme
The Table Component provides a way to add tabular data to your site.
The Table Component Edit UI allows for table rows and columns to be added, deleted, and reordered.
By default, two variations of the Table Component are available to choose from:
To add a Table Component to your page:
To edit the text within a Table Component, select the table cell you'd like to edit, and enter the desired text.
To format the text within a Table Component, highlight the text you'd like to format, and use the Rich Text Editor formatting toolbar that pops up.
?> Note: Bulk cell-selection (highlighting) is not possible; you can only highlight — and, therefore, format — text within a single cell at a time.
?> Note: For more information on the Rich Text Editor, please see: Rich Text Editor Component.
You can add columns and rows to a Table Component using the context menu. (You must be in Edit Mode.)
To add a column to your table:
?> Note: If you're using the Table Header First Column Table variant, you can only have one header column. (This is unlike header rows, of which there can be multiple.)
To add a body (i.e., non-header/non-footer) row to your table:
Both of the default Table Component variants already have a header row, but you're able to add as many as you require.
Header rows can only be positioned in the header (upper) region of a table — they cannot be added or moved below it. Body rows and footer rows cannot be positioned above a header row.
To add a header row to your table:
Footer rows are typically used for column summaries. Neither of the included Table Component variants include a footer row by default, but you may add as many as you require.
Footer rows can only be positioned in the footer (lower) region of a table — they cannot be added or moved above it. Body rows and header rows cannot be positioned below a footer row.
To add a footer row to your table:
Out of the box, footer rows don't appear any different from body rows — and, depending on the styling of your site, this may remain the case. If you need to discern whether a row is a body row or a footer row, simply select it, and, in its context menu, you will see either a "Row" section or a "Footer Row" section, revealing the type of row that it is.
To delete a column or row from your table:
?> Note: If you're using the Table Header First Column Table variant, the column in the first (leftmost) position is always styled as the header column. If you delete the header column, the second column will become the first column, and, thus, become the new header column.
Using the Move button in the context menu, columns and rows can be reordered.
The Move operation moves items in a single direction:
To move a column or row:
?> Note: If you're using the Table Header First Column Table variant, the column in the first (leftmost) position is always styled as the header column. If you move the header column, the data from the first column will be swapped with that of the second, and the first column (which now contains what was the second column's data) will continue to be styled as the header column.
?> Note: A row can't be moved out of its respective region.
Header, body, and footer rows are restricted to the upper, middle, and lower regions of the table,
respectively, and cannot be reordered out of those regions.
(E.g., a header row can't be moved below a body row.)
const TableExample = asToken(
withDesign({
Header: addClasses('text-center'),
}),
asBodilessTable(),
asDefaultTableStyle,
)(CleanTable);
The table is made editable via asBodilessTable()
.
<TableExample nodeKey="table-1" />
The Table Component follows the Bodiless Design Pattern and is easy to style. Styling can be
implemented in the appropriate token.tsx
file by adding the necessary Tailwind classes (see
asTableDefaultStyle
in
examples/test-site/src/components/Table/index.tsx
).
Here is an example demonstrating all possible design components:
import { withDesign, addClasses } from '@bodiless/fclasses';
const asTableExampleStyle = withDesign({
Wrapper: addClasses('p-3'),
THead: addClasses('bg-gray-200'),
TBody: addClasses('text-primary'),
TFoot: addClasses('ml-2'),
Row: addClasses('ml-2'),
Cell: addClasses('border border-solid border-gray-200'),
});
Because each Cell knows where it is in the table, it is possible to use conditional styling. There are several helper functions for this; or you can provide a custom function with all Cell Props, as well as table data.
import { withDesign, addClasses, addClassesIf, and, not } from '@bodiless/fclasses';
import { useIsFirstColumn, useIsOddColumnn } from '@bodiless/organisms';
const asTableExampleStyle = withDesign({
Cell: asToken(
/**
* Here, we apply a dark column to alternating rows in the Body, left-align
* text in the first column, and center-align text in the remaining columns.
*/
addClassesIf(and(useIsInBody, useIsOddColumnn))('bg-gray-200'),
addClassesIf(useIsFirstColumn)('text-left'),
addClassesIf(not(useIsFirstColumn))('text-center'),
/**
* Here, we use a custom function to style the penultimate column.
*/
addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),
),
});
?> Note: useIsOddColumnn
is the name of the function, and is not a typo in the documentation.
The Table Component will render as a typical HTML <table>
element.
For example, the following TSX—
const TableExample = asToken(
asTableCenterText,
)(StandardTable);
export default (props: any) => (
<Page {...props}>
<Layout>
{ /* @ts-ignore missing unnecessary rows, columns, headRows and footRows props */ }
<TableExample nodeKey="table-1" data-list-element="outerlist" />
</Layout>
</Page>
);
—Will render an HTML <table>
element like the following (a number of details have been stripped
for demonstration purposes):
<table data-bl-design-key="Table:Wrapper" data-list-element="outerlist" class="...">
<thead data-bl-design-key="Table:THead" class="...">...</thead>
<tbody data-bl-design-key="Table:TBody">
<tr data-bl-design-key="Table:Row">
<td data-bl-design-key="Table:Cell" class="text-center ...">...</td>
<td data-bl-design-key="Table:Cell" class="text-center ...">...</td>
<td data-bl-design-key="Table:Cell" class="text-center ...">...</td>
</tr>
<tr data-bl-design-key="Table:Row">...</tr>
<tr data-bl-design-key="Table:Row">...</tr>
</tbody>
<tfoot data-bl-design-key="Table:TFoot"></tfoot>
</table>
Note that header and footer rows are appropriately positioned within <thead>
and <tfoot>
elements, respectively.
FAQs
Provide a Bodiless table component and HOC to make it editable
The npm package @bodiless/table receives a total of 1,322 weekly downloads. As such, @bodiless/table popularity was classified as popular.
We found that @bodiless/table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.