1.0.0-rc.23 • Published 2 years ago

@bodiless/table v1.0.0-rc.23

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years 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

2 years ago

1.0.0-rc.41

2 years ago

1.0.0-rc.40

2 years ago

1.0.0-rc.39

2 years ago

1.0.0-rc.38

2 years ago

1.0.0-rc.35

2 years ago

1.0.0-rc.34

2 years ago

1.0.0-rc.37

2 years ago

1.0.0-rc.36

2 years ago

1.0.0-rc.24

2 years ago

1.0.0-rc.28

2 years ago

1.0.0-rc.27

2 years ago

1.0.0-rc.26

2 years ago

1.0.0-rc.25

2 years ago

1.0.0-rc.29

2 years ago

1.0.0-rc.31

2 years ago

1.0.0-rc.30

2 years ago

1.0.0-rc.33

2 years ago

1.0.0-rc.32

2 years ago

1.0.0-rc.23

2 years ago

1.0.0-rc.19

3 years ago

1.0.0-rc.18

3 years ago

1.0.0-rc.20

3 years ago

1.0.0-rc.22

3 years ago

1.0.0-rc.21

3 years ago

1.0.0-rc.17

3 years ago

1.0.0-rc.16

3 years ago

1.0.0-rc.15

3 years ago

1.0.0-rc.9

3 years ago

1.0.0-rc.7

3 years ago

1.0.0-rc.8

3 years ago

1.0.0-rc.5

3 years ago

1.0.0-rc.6

3 years ago

1.0.0-rc.13

3 years ago

1.0.0-rc.12

3 years ago

1.0.0-rc.11

3 years ago

1.0.0-rc.10

3 years ago

1.0.0-rc.3

3 years ago

1.0.0-rc.4

3 years ago

1.0.0-rc.14

3 years ago

1.0.0-rc.2

3 years ago

1.0.0-rc.1

3 years ago

1.0.0-beta.11

3 years ago

1.0.0-beta.12

3 years ago

1.0.0-beta.10

3 years ago

1.0.0-beta.17

3 years ago

1.0.0-beta.18

3 years ago

1.0.0-beta.15

3 years ago

1.0.0-beta.16

3 years ago

1.0.0-beta.2

3 years ago

1.0.0-beta.3

3 years ago

1.0.0-beta.4

3 years ago

1.0.0-beta.5

3 years ago

1.0.0-beta.0

3 years ago

1.0.0-beta.1

3 years ago

1.0.0-beta.6

3 years ago

1.0.0-beta.7

3 years ago

1.0.0-beta.8

3 years ago

1.0.0-beta.9

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.7

3 years ago

0.3.2

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.10

4 years ago

0.2.9

4 years ago

0.2.8

4 years ago

0.2.7

4 years ago

0.2.6

4 years ago

0.2.5

4 years ago

0.2.4

4 years ago

0.2.3

4 years ago

0.2.2

4 years ago

0.2.1

4 years ago