@pdfme/schemas 0.0.0

package/src/tables/index.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from '@pdfme/common';
+import type { TableSchema } from './types.js';
+import { pdfRender } from './pdfRender.js';
+import { uiRender } from './uiRender.js';
+import { propPanel } from './propPanel.js';
+import { Table } from 'lucide';
+import { createSvgStr } from '../utils.js';
+
+const tableSchema: Plugin<TableSchema> = {
+  pdf: pdfRender,
+  ui: uiRender,
+  propPanel,
+  icon: createSvgStr(Table),
+};
+export default tableSchema;

package/src/tables/pdfRender.ts

@@ -0,0 +1,144 @@
+import type { TableSchema } from './types.js';
+import type { PDFRenderProps, Schema, BasePdf, CommonOptions } from '@pdfme/common';
+import { Cell, Table, Row, Column } from './classes.js';
+import { rectangle } from '../shapes/rectAndEllipse.js';
+import cell from './cell.js';
+import { getBodyWithRange } from './helper.js';
+import { createSingleTable } from './tableHelper.js';
+
+// Define the CreateTableArgs interface locally since it's not exported from tableHelper.js
+interface CreateTableArgs {
+  schema: Schema;
+  basePdf: BasePdf;
+  options: CommonOptions;
+  _cache: Map<string | number, unknown>;
+}
+
+type Pos = { x: number; y: number };
+
+const rectanglePdfRender = rectangle.pdf;
+const cellPdfRender = cell.pdf;
+
+async function drawCell(arg: PDFRenderProps<TableSchema>, cell: Cell) {
+  await cellPdfRender({
+    ...arg,
+    value: cell.raw,
+    schema: {
+      name: '',
+      type: 'cell',
+      position: { x: cell.x, y: cell.y },
+      width: cell.width,
+      height: cell.height,
+      fontName: cell.styles.fontName,
+      alignment: cell.styles.alignment,
+      verticalAlignment: cell.styles.verticalAlignment,
+      fontSize: cell.styles.fontSize,
+      lineHeight: cell.styles.lineHeight,
+      characterSpacing: cell.styles.characterSpacing,
+      backgroundColor: cell.styles.backgroundColor,
+      fontColor: cell.styles.textColor,
+      borderColor: cell.styles.lineColor,
+      borderWidth: cell.styles.lineWidth,
+      padding: cell.styles.cellPadding,
+    },
+  });
+}
+
+async function drawRow(
+  arg: PDFRenderProps<TableSchema>,
+  table: Table,
+  row: Row,
+  cursor: Pos,
+  columns: Column[],
+) {
+  cursor.x = table.settings.margin.left;
+  for (const column of columns) {
+    const cell = row.cells[column.index];
+    if (!cell) {
+      cursor.x += column.width;
+      continue;
+    }
+
+    cell.x = cursor.x;
+    cell.y = cursor.y;
+
+    await drawCell(arg, cell);
+
+    cursor.x += column.width;
+  }
+  cursor.y += row.height;
+}
+
+async function drawTableBorder(
+  arg: PDFRenderProps<TableSchema>,
+  table: Table,
+  startPos: Pos,
+  cursor: Pos,
+) {
+  const lineWidth = table.settings.tableLineWidth;
+  const lineColor = table.settings.tableLineColor;
+  if (!lineWidth || !lineColor) return;
+  await rectanglePdfRender({
+    ...arg,
+    schema: {
+      name: '',
+      type: 'rectangle',
+      borderWidth: lineWidth,
+      borderColor: lineColor,
+      color: '',
+      position: { x: startPos.x, y: startPos.y },
+      width: table.getWidth(),
+      height: cursor.y - startPos.y,
+      readOnly: true,
+    },
+  });
+}
+
+async function drawTable(arg: PDFRenderProps<TableSchema>, table: Table): Promise<void> {
+  const settings = table.settings;
+  const startY = settings.startY;
+  const margin = settings.margin;
+  const cursor = { x: margin.left, y: startY };
+
+  const startPos = Object.assign({}, cursor);
+
+  if (settings.showHead) {
+    for (const row of table.head) {
+      await drawRow(arg, table, row, cursor, table.columns);
+    }
+  }
+
+  for (const row of table.body) {
+    await drawRow(arg, table, row, cursor, table.columns);
+  }
+
+  await drawTableBorder(arg, table, startPos, cursor);
+}
+
+export const pdfRender = async (arg: PDFRenderProps<TableSchema>) => {
+  const { value, schema, basePdf, options, _cache } = arg;
+
+  const body = getBodyWithRange(
+    typeof value !== 'string' ? JSON.stringify(value || '[]') : value,
+    schema.__bodyRange,
+  );
+
+  // Create a properly typed CreateTableArgs object
+  const createTableArgs: CreateTableArgs = {
+    schema,
+    basePdf,
+    options,
+    _cache,
+  };
+
+  // Ensure body is properly typed before passing to createSingleTable
+  // Ensure body is properly typed as string[][] before passing to createSingleTable
+  const typedBody: string[][] = Array.isArray(body)
+    ? body.map((row) => (Array.isArray(row) ? row.map((cell) => String(cell)) : []))
+    : [];
+  const table = await createSingleTable(typedBody, createTableArgs);
+
+  // Use the original arg directly since drawTable expects PDFRenderProps<TableSchema>
+  // which is the same type as our arg parameter
+  await drawTable(arg, table);
+};

package/src/tables/propPanel.ts

@@ -0,0 +1,111 @@
+import type { PropPanel } from '@pdfme/common';
+import type { TableSchema } from './types.js';
+import { getFallbackFontName, DEFAULT_FONT_NAME } from '@pdfme/common';
+import {
+  getDefaultCellStyles,
+  getCellPropPanelSchema,
+  getColumnStylesPropPanelSchema,
+} from './helper.js';
+import { HEX_COLOR_PATTERN } from '../constants.js';
+
+export const propPanel: PropPanel<TableSchema> = {
+  schema: ({ activeSchema, options, i18n }) => {
+    // @ts-expect-error Type casting is necessary here as the activeSchema type is generic
+    const tableSchema = activeSchema as TableSchema;
+    const head = tableSchema.head || [];
+    const showHead = tableSchema.showHead || false;
+    const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
+    const fontNames = Object.keys(font);
+    const fallbackFontName = getFallbackFontName(font);
+    return {
+      showHead: {
+        title: i18n('schemas.table.showHead'),
+        type: 'boolean',
+        widget: 'checkbox',
+        span: 12,
+      },
+      repeatHead: {
+        title: i18n('schemas.table.repeatHead'),
+        type: 'boolean',
+        widget: 'checkbox',
+        span: 12,
+      },
+      '-------': { type: 'void', widget: 'Divider' },
+      tableStyles: {
+        title: i18n('schemas.table.tableStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: {
+          borderWidth: {
+            title: i18n('schemas.borderWidth'),
+            type: 'number',
+            widget: 'inputNumber',
+            props: { min: 0, step: 0.1 },
+            step: 1,
+          },
+          borderColor: {
+            title: i18n('schemas.borderColor'),
+            type: 'string',
+            widget: 'color',
+            props: {
+              disabledAlpha: true,
+            },
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+          },
+        },
+      },
+      headStyles: {
+        hidden: !showHead,
+        title: i18n('schemas.table.headStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getCellPropPanelSchema({ i18n, fallbackFontName, fontNames }),
+      },
+      bodyStyles: {
+        title: i18n('schemas.table.bodyStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getCellPropPanelSchema({ i18n, fallbackFontName, fontNames, isBody: true }),
+      },
+      columnStyles: {
+        title: i18n('schemas.table.columnStyle'),
+        type: 'object',
+        widget: 'Card',
+        span: 24,
+        properties: getColumnStylesPropPanelSchema({ head, i18n }),
+      },
+    };
+  },
+  defaultSchema: {
+    name: '',
+    type: 'table',
+    position: { x: 0, y: 0 },
+    width: 150,
+    height: 20,
+    content: JSON.stringify([
+      ['Alice', 'New York', 'Alice is a freelance web designer and developer'],
+      ['Bob', 'Paris', 'Bob is a freelance illustrator and graphic designer'],
+    ]),
+    showHead: true,
+    repeatHead: false,
+    head: ['Name', 'City', 'Description'],
+    headWidthPercentages: [30, 30, 40],
+    tableStyles: {
+      borderColor: '#000000',
+      borderWidth: 0.3,
+    },
+    headStyles: Object.assign(getDefaultCellStyles(), {
+      fontColor: '#ffffff',
+      backgroundColor: '#2980ba',
+      borderColor: '',
+      borderWidth: { top: 0, right: 0, bottom: 0, left: 0 },
+    }),
+    bodyStyles: Object.assign(getDefaultCellStyles(), {
+      alternateBackgroundColor: '#f5f5f5',
+    }),
+    columnStyles: {},
+  },
+};

package/src/tables/tableHelper.ts

@@ -0,0 +1,288 @@
+import {
+  Schema,
+  isBlankPdf,
+  BasePdf,
+  CommonOptions,
+  getDefaultFont,
+  getFallbackFontName,
+  cloneDeep,
+} from '@pdfme/common';
+import type { Font as FontKitFont } from 'fontkit';
+import type {
+  TableSchema,
+  CellStyle,
+  Styles,
+  Spacing,
+  TableInput,
+  StylesProps,
+  Section,
+} from './types.js';
+import { Cell, Column, Row, Table } from './classes.js';
+
+type StyleProp = 'styles' | 'headStyles' | 'bodyStyles' | 'alternateRowStyles' | 'columnStyles';
+
+interface CreateTableArgs {
+  schema: Schema;
+  basePdf: BasePdf;
+  options: CommonOptions;
+  _cache: Map<string | number, unknown>;
+}
+
+interface UserOptions {
+  startY: number;
+  tableWidth: number;
+  margin: Spacing;
+  showHead: boolean;
+  tableLineWidth?: number;
+  tableLineColor?: string;
+  head?: string[][];
+  body?: string[][];
+
+  styles?: Partial<Styles>;
+  bodyStyles?: Partial<Styles>;
+  headStyles?: Partial<Styles>;
+  alternateRowStyles?: Partial<Styles>;
+  columnStyles?: {
+    [key: string]: Partial<Styles>;
+  };
+}
+
+function parseSection(
+  sectionName: Section,
+  sectionRows: string[][],
+  columns: Column[],
+  styleProps: StylesProps,
+  fallbackFontName: string,
+): Row[] {
+  const rowSpansLeftForColumn: { [key: string]: { left: number; times: number } } = {};
+  const result = sectionRows.map((rawRow, rowIndex) => {
+    let skippedRowForRowSpans = 0;
+    const cells: { [key: string]: Cell } = {};
+
+    let colSpansAdded = 0;
+    let columnSpansLeft = 0;
+    for (const column of columns) {
+      if (
+        rowSpansLeftForColumn[column.index] == null ||
+        rowSpansLeftForColumn[column.index].left === 0
+      ) {
+        if (columnSpansLeft === 0) {
+          let rawCell;
+          if (Array.isArray(rawRow)) {
+            rawCell = rawRow[column.index - colSpansAdded - skippedRowForRowSpans];
+          } else {
+            rawCell = rawRow[column.index];
+          }
+          const styles = cellStyles(sectionName, column, rowIndex, styleProps, fallbackFontName);
+          const cell = new Cell(rawCell, styles, sectionName);
+          cells[column.index] = cell;
+
+          columnSpansLeft = 0;
+          rowSpansLeftForColumn[column.index] = {
+            left: 0,
+            times: columnSpansLeft,
+          };
+        } else {
+          columnSpansLeft--;
+          colSpansAdded++;
+        }
+      } else {
+        rowSpansLeftForColumn[column.index].left--;
+        columnSpansLeft = rowSpansLeftForColumn[column.index].times;
+        skippedRowForRowSpans++;
+      }
+    }
+    return new Row(rawRow, rowIndex, sectionName, cells);
+  });
+  return result;
+}
+
+function parseContent4Table(input: TableInput, fallbackFontName: string) {
+  const content = input.content;
+  const columns = content.columns.map((index) => new Column(index));
+  const styles = input.styles;
+  return {
+    columns,
+    head: parseSection('head', content.head, columns, styles, fallbackFontName),
+    body: parseSection('body', content.body, columns, styles, fallbackFontName),
+  };
+}
+
+function cellStyles(
+  sectionName: Section,
+  column: Column,
+  rowIndex: number,
+  styles: StylesProps,
+  fallbackFontName: string,
+) {
+  let sectionStyles;
+  if (sectionName === 'head') {
+    sectionStyles = styles.headStyles;
+  } else if (sectionName === 'body') {
+    sectionStyles = styles.bodyStyles;
+  }
+  const otherStyles = Object.assign({}, styles.styles, sectionStyles);
+
+  const colStyles = styles.columnStyles[column.index] || styles.columnStyles[column.index] || {};
+
+  const rowStyles =
+    sectionName === 'body' && rowIndex % 2 === 0
+      ? Object.assign({}, styles.alternateRowStyles)
+      : {};
+
+  const defaultStyle = {
+    fontName: fallbackFontName,
+    backgroundColor: '',
+    textColor: '#000000',
+    lineHeight: 1,
+    characterSpacing: 0,
+    alignment: 'left',
+    verticalAlignment: 'middle',
+    fontSize: 10,
+    cellPadding: 5,
+    lineColor: '#000000',
+    lineWidth: 0,
+    minCellHeight: 0,
+    minCellWidth: 0,
+  };
+  return Object.assign(defaultStyle, otherStyles, rowStyles, colStyles) as Styles;
+}
+
+function mapCellStyle(style: CellStyle): Partial<Styles> {
+  return {
+    fontName: style.fontName,
+    alignment: style.alignment,
+    verticalAlignment: style.verticalAlignment,
+    fontSize: style.fontSize,
+    lineHeight: style.lineHeight,
+    characterSpacing: style.characterSpacing,
+    backgroundColor: style.backgroundColor,
+    // ---
+    textColor: style.fontColor,
+    lineColor: style.borderColor,
+    lineWidth: style.borderWidth,
+    cellPadding: style.padding,
+  };
+}
+
+function getTableOptions(schema: TableSchema, body: string[][]): UserOptions {
+  const columnStylesWidth = schema.headWidthPercentages.reduce(
+    (acc, cur, i) => ({ ...acc, [i]: { cellWidth: schema.width * (cur / 100) } }),
+    {} as Record<number, Partial<Styles>>,
+  );
+
+  const columnStylesAlignment = Object.entries(schema.columnStyles.alignment || {}).reduce(
+    (acc, [key, value]) => ({ ...acc, [key]: { alignment: value } }),
+    {} as Record<number, Partial<Styles>>,
+  );
+
+  const allKeys = new Set([
+    ...Object.keys(columnStylesWidth).map(Number),
+    ...Object.keys(columnStylesAlignment).map(Number),
+  ]);
+  const columnStyles = Array.from(allKeys).reduce(
+    (acc, key) => {
+      const widthStyle = columnStylesWidth[key] || {};
+      const alignmentStyle = columnStylesAlignment[key] || {};
+      return { ...acc, [key]: { ...widthStyle, ...alignmentStyle } };
+    },
+    {} as Record<number, Partial<Styles>>,
+  );
+
+  return {
+    head: [schema.head],
+    body,
+    showHead: schema.showHead,
+    startY: schema.position.y,
+    tableWidth: schema.width,
+    tableLineColor: schema.tableStyles.borderColor,
+    tableLineWidth: schema.tableStyles.borderWidth,
+    headStyles: mapCellStyle(schema.headStyles),
+    bodyStyles: mapCellStyle(schema.bodyStyles),
+    alternateRowStyles: { backgroundColor: schema.bodyStyles.alternateBackgroundColor },
+    columnStyles,
+    margin: { top: 0, right: 0, left: schema.position.x, bottom: 0 },
+  };
+}
+
+function parseStyles(cInput: UserOptions) {
+  const styleOptions: StylesProps = {
+    styles: {},
+    headStyles: {},
+    bodyStyles: {},
+    alternateRowStyles: {},
+    columnStyles: {},
+  };
+  for (const prop of Object.keys(styleOptions) as StyleProp[]) {
+    if (prop === 'columnStyles') {
+      const current = cInput[prop];
+      styleOptions.columnStyles = Object.assign({}, current);
+    } else {
+      const allOptions = [cInput];
+      const styles = allOptions.map((opts) => opts[prop] || {});
+      styleOptions[prop] = Object.assign({}, styles[0], styles[1], styles[2]);
+    }
+  }
+  return styleOptions;
+}
+
+function parseContent4Input(options: UserOptions) {
+  const head = options.head || [];
+  const body = options.body || [];
+  const columns = (head[0] || body[0] || []).map((_, index) => index);
+  return { columns, head, body };
+}
+
+function parseInput(schema: TableSchema, body: string[][]): TableInput {
+  const options = getTableOptions(schema, body);
+  const styles = parseStyles(options);
+  const settings = {
+    startY: options.startY,
+    margin: options.margin,
+    tableWidth: options.tableWidth,
+    showHead: options.showHead,
+    tableLineWidth: options.tableLineWidth ?? 0,
+    tableLineColor: options.tableLineColor ?? '',
+  };
+
+  const content = parseContent4Input(options);
+
+  return { content, styles, settings };
+}
+
+export function createSingleTable(body: string[][], args: CreateTableArgs) {
+  const { options, _cache, basePdf } = args;
+  if (!isBlankPdf(basePdf)) {
+    console.warn(
+      '[@pdfme/schema/table]' +
+        'When specifying a custom PDF for basePdf, ' +
+        'you cannot use features such as page breaks or re-layout of other elements.' +
+        'To utilize these features, please define basePdf as follows:\n' +
+        '{ width: number; height: number; padding: [number, number, number, number]; }',
+    );
+  }
+
+  const schema = cloneDeep(args.schema) as TableSchema;
+  const { start } = schema.__bodyRange || { start: 0 };
+  if (start % 2 === 1) {
+    const alternateBackgroundColor = schema.bodyStyles.alternateBackgroundColor;
+    schema.bodyStyles.alternateBackgroundColor = schema.bodyStyles.backgroundColor;
+    schema.bodyStyles.backgroundColor = alternateBackgroundColor;
+  }
+  schema.showHead = schema.showHead === false ? false : (!schema.__isSplit || schema.repeatHead === true);
+
+  const input = parseInput(schema, body);
+
+  const font = options.font || getDefaultFont();
+
+  const fallbackFontName = getFallbackFontName(font);
+
+  const content = parseContent4Table(input, fallbackFontName);
+
+  return Table.create({
+    input,
+    content,
+    font,
+    _cache: _cache as unknown as Map<string | number, FontKitFont>,
+  });
+}

package/src/tables/types.ts

@@ -0,0 +1,87 @@
+import type { ALIGNMENT, VERTICAL_ALIGNMENT } from '../text/types.js';
+import type { Schema } from '@pdfme/common';
+
+export type Spacing = { top: number; right: number; bottom: number; left: number };
+type BorderInsets = Spacing;
+type BoxDimensions = Spacing;
+
+export interface CellStyle {
+  fontName?: string;
+  alignment: ALIGNMENT;
+  verticalAlignment: VERTICAL_ALIGNMENT;
+  fontSize: number;
+  lineHeight: number;
+  characterSpacing: number;
+  fontColor: string;
+  backgroundColor: string;
+  borderColor: string;
+  borderWidth: BoxDimensions;
+  padding: BoxDimensions;
+}
+
+export type CellSchema = Schema & CellStyle;
+
+export interface TableSchema extends Schema {
+  showHead: boolean;
+  head: string[];
+  headWidthPercentages: number[];
+  repeatHead?: boolean;
+
+  tableStyles: {
+    borderColor: string;
+    borderWidth: number;
+  };
+  headStyles: CellStyle;
+  bodyStyles: CellStyle & { alternateBackgroundColor: string };
+  columnStyles: {
+    alignment?: { [colIndex: number]: ALIGNMENT };
+  };
+}
+
+export interface Styles {
+  fontName: string | undefined;
+  backgroundColor: string;
+  textColor: string;
+  lineHeight: number;
+  characterSpacing: number;
+  alignment: 'left' | 'center' | 'right' | 'justify';
+  verticalAlignment: 'top' | 'middle' | 'bottom';
+  fontSize: number;
+  cellPadding: Spacing;
+  lineColor: string;
+  lineWidth: BorderInsets;
+  cellWidth: number;
+  minCellHeight: number;
+  minCellWidth: number;
+}
+
+export interface TableInput {
+  settings: Settings;
+  styles: StylesProps;
+  content: ContentInput;
+}
+
+interface ContentInput {
+  body: string[][];
+  head: string[][];
+  columns: number[];
+}
+
+export interface Settings {
+  startY: number;
+  margin: Spacing;
+  tableWidth: number;
+  showHead: boolean;
+  tableLineWidth: number;
+  tableLineColor: string;
+}
+
+export interface StylesProps {
+  styles: Partial<Styles>;
+  headStyles: Partial<Styles>;
+  bodyStyles: Partial<Styles>;
+  alternateRowStyles: Partial<Styles>;
+  columnStyles: { [key: string]: Partial<Styles> };
+}
+
+export type Section = 'head' | 'body';