Initial table per-cell customization [More Flexible Tables Pt.2a] (#3037)

Co-authored-by: Laurenz <laurmaedje@gmail.com>

4 files changed, 299 insertions, 0 deletions

diff --git a/tests/typ/layout/grid-cell.typ b/tests/typ/layout/grid-cell.typ
new file mode 100644
index 00000000..ced16a97
--- /dev/null
+++ b/tests/typ/layout/grid-cell.typ
@@ -0,0 +1,107 @@
+// Test basic styling using the grid.cell element.
+
+---
+// Cell override
+#grid(
+  align: left,
+  fill: red,
+  stroke: blue,
+  inset: 5pt,
+  columns: 2,
+  [AAAAA], [BBBBB],
+  [A], [B],
+  grid.cell(align: right)[C], [D],
+  align(right)[E], [F],
+  align(horizon)[G], [A\ A\ A],
+  grid.cell(align: horizon)[G2], [A\ A\ A],
+  grid.cell(inset: 0pt)[I], [F],
+  [H], grid.cell(fill: blue)[J]
+)
+
+---
+// Cell show rule
+#show grid.cell: it => [Zz]
+
+#grid(
+  align: left,
+  fill: red,
+  stroke: blue,
+  inset: 5pt,
+  columns: 2,
+  [AAAAA], [BBBBB],
+  [A], [B],
+  grid.cell(align: right)[C], [D],
+  align(right)[E], [F],
+  align(horizon)[G], [A\ A\ A]
+)
+
+---
+#show grid.cell: it => (it.align, it.fill)
+#grid(
+  align: left,
+  row-gutter: 5pt,
+  [A],
+  grid.cell(align: right)[B],
+  grid.cell(fill: aqua)[B],
+)
+
+---
+// Cell set rules
+#set grid.cell(align: center)
+#show grid.cell: it => (it.align, it.fill, it.inset)
+#set grid.cell(inset: 20pt)
+#grid(
+  align: left,
+  row-gutter: 5pt,
+  [A],
+  grid.cell(align: right)[B],
+  grid.cell(fill: aqua)[B],
+)
+
+---
+// Test folding per-cell properties (align and inset)
+#grid(
+  columns: (1fr, 1fr),
+  rows: (2.5em, auto),
+  align: right,
+  inset: 5pt,
+  fill: (x, y) => (green, aqua).at(calc.rem(x + y, 2)),
+  [Top], grid.cell(align: bottom)[Bot],
+  grid.cell(inset: (bottom: 0pt))[Bot], grid.cell(inset: (bottom: 0pt))[Bot]
+)
+
+---
+// Test overriding outside alignment
+#set align(bottom + right)
+#grid(
+  columns: (1fr, 1fr),
+  rows: 2em,
+  align: auto,
+  fill: green,
+  [BR], [BR],
+  grid.cell(align: left, fill: aqua)[BL], grid.cell(align: top, fill: red.lighten(50%))[TR]
+)
+
+---
+// First doc example
+#grid(
+  columns: 2,
+  fill: red,
+  align: left,
+  inset: 5pt,
+  [ABC], [ABC],
+  grid.cell(fill: blue)[C], [D],
+  grid.cell(align: center)[E], [F],
+  [G], grid.cell(inset: 0pt)[H]
+)
+
+---
+#{
+  show grid.cell: emph
+  grid(
+    columns: 2,
+    gutter: 3pt,
+    [Hello], [World],
+    [Sweet], [Italics]
+  )
+}
diff --git a/tests/typ/layout/grid-styling.typ b/tests/typ/layout/grid-styling.typ
index 577e15c4..e076d0c4 100644
--- a/tests/typ/layout/grid-styling.typ
+++ b/tests/typ/layout/grid-styling.typ
@@ -87,3 +87,48 @@ a
   [A],
   [B],
 )
+
+---
+// Test interaction with gutters.
+#grid(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#grid(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  row-gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#grid(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  column-gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#grid(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
diff --git a/tests/typ/layout/table-cell.typ b/tests/typ/layout/table-cell.typ
new file mode 100644
index 00000000..a4d3bba4
--- /dev/null
+++ b/tests/typ/layout/table-cell.typ
@@ -0,0 +1,102 @@
+// Test basic styling using the table.cell element.
+
+---
+// Cell override
+#table(
+  align: left,
+  fill: red,
+  stroke: blue,
+  columns: 2,
+  [AAAAA], [BBBBB],
+  [A], [B],
+  table.cell(align: right)[C], [D],
+  align(right)[E], [F],
+  align(horizon)[G], [A\ A\ A],
+  table.cell(align: horizon)[G2], [A\ A\ A],
+  table.cell(inset: 0pt)[I], [F],
+  [H], table.cell(fill: blue)[J]
+)
+
+---
+// Cell show rule
+#show table.cell: it => [Zz]
+
+#table(
+  align: left,
+  fill: red,
+  stroke: blue,
+  columns: 2,
+  [AAAAA], [BBBBB],
+  [A], [B],
+  table.cell(align: right)[C], [D],
+  align(right)[E], [F],
+  align(horizon)[G], [A\ A\ A]
+)
+
+---
+#show table.cell: it => (it.align, it.fill)
+#table(
+  align: left,
+  row-gutter: 5pt,
+  [A],
+  table.cell(align: right)[B],
+  table.cell(fill: aqua)[B],
+)
+
+---
+// Cell set rules
+#set table.cell(align: center)
+#show table.cell: it => (it.align, it.fill, it.inset)
+#set table.cell(inset: 20pt)
+#table(
+  align: left,
+  row-gutter: 5pt,
+  [A],
+  table.cell(align: right)[B],
+  table.cell(fill: aqua)[B],
+)
+
+---
+// Test folding per-cell properties (align and inset)
+#table(
+  columns: (1fr, 1fr),
+  rows: (2.5em, auto),
+  align: right,
+  fill: (x, y) => (green, aqua).at(calc.rem(x + y, 2)),
+  [Top], table.cell(align: bottom)[Bot],
+  table.cell(inset: (bottom: 0pt))[Bot], table.cell(inset: (bottom: 0pt))[Bot]
+)
+
+---
+// Test overriding outside alignment
+#set align(bottom + right)
+#table(
+  columns: (1fr, 1fr),
+  rows: 2em,
+  align: auto,
+  fill: green,
+  [BR], [BR],
+  table.cell(align: left, fill: aqua)[BL], table.cell(align: top, fill: red.lighten(50%))[TR]
+)
+
+---
+// First doc example
+#table(
+  columns: 2,
+  fill: green,
+  align: right,
+  [*Name*], [*Data*],
+  table.cell(fill: blue)[J.], [Organizer],
+  table.cell(align: center)[K.], [Leader],
+  [M.], table.cell(inset: 0pt)[Player]
+)
+
+---
+#{
+  show table.cell: emph
+  table(
+    columns: 2,
+    [Person], [Animal],
+    [John], [Dog]
+  )
+}
diff --git a/tests/typ/layout/table.typ b/tests/typ/layout/table.typ
index 529f2720..1b250aa4 100644
--- a/tests/typ/layout/table.typ
+++ b/tests/typ/layout/table.typ
@@ -62,6 +62,51 @@
 )
 
 ---
+// Test interaction with gutters.
+#table(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#table(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  row-gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#table(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  column-gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+#table(
+  columns: (3em, 3em),
+  fill: (x, y) => (red, blue).at(calc.rem(x, 2)),
+  align: (x, y) => (left, right).at(calc.rem(y, 2)),
+  gutter: 5pt,
+  [A], [B],
+  [C], [D],
+  [E], [F],
+  [G], [H]
+)
+
+---
 // Ref: false
 #table()