1.0.0-rc.23 • Published 11 months ago

@bodiless/table v1.0.0-rc.23

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
11 months ago

Table Component

  • Purpose
    • A way for editors to add tabular data.
  • Editable areas
    • Allow for table Rows and Columns to be added deleted and moved
  • Styling
    • Can be implemented in the appropriate token.tsx file by adding necessary tailwind classes - check asTableDefaultStyle

Usage

const ExampleTableExample = flow(
  withDesign({
    Header: addClasses('text-center'),
  }),
  asBodilessTable(),
  asDefaultTableStyle,
)(CleanTable);

asBodilessTable() is used to add the editablity to the table.

 <TableExample nodeKey="table-1" />

Design Components

The table component follows the Bodiless Design Pattern and is easy to style. 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 function for this or someone 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:  flow(
      /**
       * Here we apply a dark column to every other row in the Body, left align 
       * text in the first column and right align in every other column.
       */
      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 second to last column
       */
      addClassesIf((p) => p.columnIndex === (p.tableData.columns.length - 2))('bg-color-orange-700'),
    ),
  }),
});
1.0.0-rc.42

11 months ago

1.0.0-rc.41

11 months ago

1.0.0-rc.40

11 months ago

1.0.0-rc.39

11 months ago

1.0.0-rc.38

12 months ago

1.0.0-rc.35

1 year ago

1.0.0-rc.34

1 year ago

1.0.0-rc.37

1 year ago

1.0.0-rc.36

1 year ago

1.0.0-rc.24

1 year ago

1.0.0-rc.28

1 year ago

1.0.0-rc.27

1 year ago

1.0.0-rc.26

1 year ago

1.0.0-rc.25

1 year ago

1.0.0-rc.29

1 year ago

1.0.0-rc.31

1 year ago

1.0.0-rc.30

1 year ago

1.0.0-rc.33

1 year ago

1.0.0-rc.32

1 year ago

1.0.0-rc.23

1 year ago

1.0.0-rc.19

2 years ago

1.0.0-rc.18

2 years ago

1.0.0-rc.20

2 years ago

1.0.0-rc.22

2 years ago

1.0.0-rc.21

2 years ago

1.0.0-rc.17

2 years ago

1.0.0-rc.16

2 years ago

1.0.0-rc.15

2 years ago

1.0.0-rc.9

2 years ago

1.0.0-rc.7

2 years ago

1.0.0-rc.8

2 years ago

1.0.0-rc.5

2 years ago

1.0.0-rc.6

2 years ago

1.0.0-rc.13

2 years ago

1.0.0-rc.12

2 years ago

1.0.0-rc.11

2 years ago

1.0.0-rc.10

2 years ago

1.0.0-rc.3

2 years ago

1.0.0-rc.4

2 years ago

1.0.0-rc.14

2 years ago

1.0.0-rc.2

2 years ago

1.0.0-rc.1

2 years ago

1.0.0-beta.11

2 years ago

1.0.0-beta.12

2 years ago

1.0.0-beta.10

2 years ago

1.0.0-beta.17

2 years ago

1.0.0-beta.18

2 years ago

1.0.0-beta.15

2 years ago

1.0.0-beta.16

2 years ago

1.0.0-beta.2

2 years ago

1.0.0-beta.3

2 years ago

1.0.0-beta.4

2 years ago

1.0.0-beta.5

2 years ago

1.0.0-beta.0

2 years ago

1.0.0-beta.1

2 years ago

1.0.0-beta.6

2 years ago

1.0.0-beta.7

2 years ago

1.0.0-beta.8

2 years ago

1.0.0-beta.9

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.3.7

2 years ago

0.3.2

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.1

2 years ago

0.3.0

3 years ago

0.2.10

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago