Tables in Flutter PDF

14 May 202421 minutes to read

The Syncfusion Flutter PDF provides support for creating customizable tables in a PDF document by using PdfGrid table model. It is designed with advanced customization, styling, and formatting.

Creating a table

PdfGrid allows you to create table by entering the data manually.

The following code example explains how to create a table directly using PdfGrid with PdfGridStyle, PdfGridColumn and PdfGridRow classes.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid class
    PdfGrid grid = PdfGrid();
    
    //Add the columns to the grid
    grid.columns.add(count: 3);
    
    //Add header to the grid
    grid.headers.add(1);
    
    //Add the rows to the grid
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Employee ID';
    header.cells[1].value = 'Employee Name';
    header.cells[2].value = 'Salary';
    
    //Add rows to grid
    PdfGridRow row = grid.rows.add();
    row.cells[0].value = 'E01';
    row.cells[1].value = 'Clay';
    row.cells[2].value = '\$10,000';
    
    row = grid.rows.add();
    row.cells[0].value = 'E02';
    row.cells[1].value = 'Simon';
    row.cells[2].value = '\$12,000';
    
    //Set the grid style
    grid.style = PdfGridStyle(
        cellPadding: PdfPaddings(left: 2, right: 3, top: 4, bottom: 5),
        backgroundBrush: PdfBrushes.blue,
        textBrush: PdfBrushes.white,
        font: PdfStandardFont(PdfFontFamily.timesRoman, 25));
    
    //Draw the grid
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Cell customization in PdfGrid

    PdfGridCell provides various direct options to customize cells such as columnSpan, rowSpan, textPen, backgroundBrush, and more.

    The following code snippet explains how to customize the cell in PdfGrid.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid
    PdfGrid grid = PdfGrid();
    
    //Add columns to grid
    grid.columns.add(count: 3);
    
    //Add headers to grid
    PdfGridRow header = grid.headers.add(1)[0];
    header.cells[0].value = 'Employee ID';
    header.cells[1].value = 'Employee Name';
    header.cells[2].value = 'Salary';
    
    //Add the styles to specific cell
    header.cells[0].style.stringFormat = PdfStringFormat(
        alignment: PdfTextAlignment.center,
        lineAlignment: PdfVerticalAlignment.bottom,
        wordSpacing: 10);
    header.cells[1].style.textPen = PdfPens.mediumVioletRed;
    header.cells[2].style.backgroundBrush = PdfBrushes.yellow;
    header.cells[2].style.textBrush = PdfBrushes.darkOrange;
    
    //Add rows to grid
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'E01';
    row1.cells[1].value = 'Clay';
    row1.cells[2].value = '\$10,000';
    
    //Apply the cell style to specific row cells
    row1.cells[0].style = PdfGridCellStyle(
      backgroundBrush: PdfBrushes.lightYellow,
      cellPadding: PdfPaddings(left: 2, right: 3, top: 4, bottom: 5),
      font: PdfStandardFont(PdfFontFamily.timesRoman, 17),
      textBrush: PdfBrushes.white,
      textPen: PdfPens.orange,
    );
    
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'E02';
    row2.cells[1].value = 'Simon';
    row2.cells[2].value = '\$12,000';
    
    //Add the style to specific cell
    row2.cells[2].style.borders = PdfBorders(
        left: PdfPen(PdfColor(240, 0, 0), width: 2),
        top: PdfPen(PdfColor(0, 240, 0), width: 3),
        bottom: PdfPen(PdfColor(0, 0, 240), width: 4),
        right: PdfPen(PdfColor(240, 100, 240), width: 5));
    
    //Draw the grid in PDF document page
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Row customization in PdfGrid

    You can customize row height and styles using the rows property in PdfGrid class.

    The following code snippet explains how to customize the row in PdfGrid.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid
    PdfGrid grid = PdfGrid();
    
    //Add columns to grid
    grid.columns.add(count: 3);
    
    //Add headers to grid
    grid.headers.add(2);
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Employee ID';
    header.cells[1].value = 'Employee Name';
    header.cells[2].value = 'Salary';
    
    //Add rows to grid
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'E01';
    row1.cells[1].value = 'Clay';
    row1.cells[2].value = '\$10,000';
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'E02';
    row2.cells[1].value = 'Simon';
    row2.cells[2].value = '\$12,000';
    
    //Set the row span
    row1.cells[1].rowSpan = 2;
    
    //Set the row height
    row2.height = 20;
    
    //Set the row style
    row1.style = PdfGridRowStyle(
        backgroundBrush: PdfBrushes.dimGray,
        textPen: PdfPens.lightGoldenrodYellow,
        textBrush: PdfBrushes.darkOrange,
        font: PdfStandardFont(PdfFontFamily.timesRoman, 12));
    
    //Create the PDF grid row style. Assign to second row
    PdfGridRowStyle rowStyle = PdfGridRowStyle(
        backgroundBrush: PdfBrushes.lightGoldenrodYellow,
        textPen: PdfPens.indianRed,
        textBrush: PdfBrushes.lightYellow,
        font: PdfStandardFont(PdfFontFamily.timesRoman, 12));
    row2.style = rowStyle;
    
    //Draw the grid in PDF document page
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Columns customization in PdfGrid

    You can customize the column width and text formats using the columns property in PdfGrid class.

    The following code snippet explains how to customize the column in PdfGrid.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid
    PdfGrid grid = PdfGrid();
    
    //Add columns to grid
    grid.columns.add(count: 3);
    
    //Add headers to grid
    grid.headers.add(1);
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Employee ID';
    header.cells[1].value = 'Employee Name';
    header.cells[2].value = 'Salary';
    
    //Add rows to grid
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'E01';
    row1.cells[1].value = 'Clay';
    row1.cells[2].value = '\$10,000';
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'E02';
    row2.cells[1].value = 'Simon';
    row2.cells[2].value = '\$12,000';
    
    //Set the width
    grid.columns[1].width = 50;
    //Create and customize the string formats
    PdfStringFormat format = PdfStringFormat();
    format.alignment = PdfTextAlignment.center;
    format.lineAlignment = PdfVerticalAlignment.bottom;
    
    //Set the column text format
    grid.columns[0].format = format;
    
    //Draw the grid in PDF document page
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Table customization in PdfGrid

    Flutter PDF supports users to create a customizable PDF table like cellSpacing, cellPadding, borderOverLapStyle, and more. This can be achieved by using the PdfGridStyle class.

    The following code snippet explains how to customize the PdfGrid using PdfGridStyle.

  • DART
  • //Create a new Pdf document
    PdfDocument document = PdfDocument();
    
    //Create a border
    PdfBorders border = PdfBorders(
        left: PdfPen(PdfColor(240, 0, 0), width: 2),
        top: PdfPen(PdfColor(0, 240, 0), width: 3),
        bottom: PdfPen(PdfColor(0, 0, 240), width: 4),
        right: PdfPen(PdfColor(240, 100, 240), width: 5));
    
    //Create a string format
    PdfStringFormat format = PdfStringFormat(
        alignment: PdfTextAlignment.center,
        lineAlignment: PdfVerticalAlignment.bottom,
        wordSpacing: 10);
    
    //Create a cell style
    PdfGridCellStyle cellStyle = PdfGridCellStyle(
      backgroundBrush: PdfBrushes.lightYellow,
      borders: border,
      cellPadding: PdfPaddings(left: 2, right: 3, top: 4, bottom: 5),
      font: PdfStandardFont(PdfFontFamily.timesRoman, 17),
      format: format,
      textBrush: PdfBrushes.white,
      textPen: PdfPens.orange,
    );
    
    //Create a grid style
    PdfGridStyle gridStyle = PdfGridStyle(
      cellSpacing: 2,
      cellPadding: PdfPaddings(left: 2, right: 3, top: 4, bottom: 5),
      borderOverlapStyle: PdfBorderOverlapStyle.inside,
      backgroundBrush: PdfBrushes.lightGray,
      textPen: PdfPens.black,
      textBrush: PdfBrushes.white,
      font: PdfStandardFont(PdfFontFamily.timesRoman, 17),
    );
    
    //Create a grid
    PdfGrid grid = PdfGrid();
    
    //Adds the columns to the grid
    grid.columns.add(count: 3);
    grid.headers.add(1);
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Employee Id';
    header.cells[1].value = 'Employee name';
    header.cells[2].value = 'Employee role';
    
    //Apply the grid style
    grid.rows.applyStyle(gridStyle);
    
    //Add rows to grid. Set the cells style
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'E01';
    row1.cells[1].value = 'Clay';
    row1.cells[2].value = 'Product manager';
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'E02';
    row2.cells[1].value = 'Thomas';
    row2.cells[2].value = 'Software engineer';
    PdfGridRow row3 = grid.rows.add();
    row3.cells[0].value = 'E03';
    row3.cells[1].value = 'Albert';
    row3.cells[2].value = 'Test engineer';
    
    //Set the row cells style
    for (int i = 0; i < grid.columns.count; i++) {
      row1.cells[i].style = cellStyle;
      row2.cells[i].style = cellStyle;
      row3.cells[i].style = cellStyle;
    }
    
    //Draw the grid in PDF document page
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(0, 0, 0, 0));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Pagination in PdfGrid

    Flutter PDF supports to paginate the PdfGrid using the PdfLayoutFormat class.

    The following sample explains how to allow PdfGrid to flow across pages.

  • DART
  • //Create a new PDF documentation
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid
    PdfGrid grid = PdfGrid();
    
    //Add the columns to the grid
    grid.columns.add(count: 3);
    grid.headers.add(1);
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Name';
    header.cells[1].value = 'Age';
    header.cells[2].value = 'Sex';
    
    //Add rows to grid. Set the cells style
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'Bob';
    row1.cells[1].value = '22';
    row1.cells[2].value = 'Male';
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'Sam';
    row2.cells[1].value = '23';
    row2.cells[2].value = 'Male';
    PdfGridRow row3 = grid.rows.add();
    row3.cells[0].value = 'Falitha';
    row3.cells[1].value = '19';
    row3.cells[2].value = 'Female';
    
    //Create a PdfLayoutFormat for pagination
    PdfLayoutFormat format = PdfLayoutFormat(
        breakType: PdfLayoutBreakType.fitColumnsToPage,
        layoutType: PdfLayoutType.paginate);
    
    //Draw the grid in PDF document page
    grid.draw(
        page: document.pages.add(),
        bounds: const Rect.fromLTWH(0, 0, 0, 0),
        format: format);
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Adding multiple tables

    The Flutter PDF supports maintaining the position of a PDF grid drawn on PDF page using PdfLayoutResult. It provides the rendered bounds of previously added grid, which can be used to place successive elements without overlapping. You can add multiple PDF grids using the bottom position of previously rendered PDF grid. The following code snippet explains this.

  • DART
  • //Create a new PDF document
    PdfDocument document = PdfDocument();
    
    //Create a PdfGrid
    PdfGrid grid = PdfGrid();
    
    //Add the columns to the grid
    grid.columns.add(count: 3);
    grid.headers.add(1);
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Product Id';
    header.cells[1].value = 'Product name';
    header.cells[2].value = 'Price';
    
    //Add rows to grid
    PdfGridRow row1 = grid.rows.add();
    row1.cells[0].value = 'P01';
    row1.cells[1].value = 'Water bottle';
    row1.cells[2].value = 'Rs: 100';
    PdfGridRow row2 = grid.rows.add();
    row2.cells[0].value = 'P02';
    row2.cells[1].value = 'Trimmer';
    row2.cells[2].value = 'Rs: 1200';
    
    //Draw grid on the page of PDF document and store the grid position in PdfLayoutResult
    PdfLayoutResult result = grid.draw(
        page: document.pages.add(),
        bounds: const Rect.fromLTWH(0, 0, 400, 300)) as PdfLayoutResult;
    
    //Create a second PdfGrid in the same page
    PdfGrid grid2 = PdfGrid();
    
    //Add columns to second grid
    grid2.columns.add(count: 3);
    grid2.headers.add(1);
    PdfGridRow header1 = grid2.headers[0];
    header1.cells[0].value = 'Employee ID';
    header1.cells[1].value = 'Employee Name';
    header1.cells[2].value = 'Salary';
    
    //Add rows to grid
    PdfGridRow row11 = grid2.rows.add();
    row11.cells[0].value = 'E01';
    row11.cells[1].value = 'Clay';
    row11.cells[2].value = '\$10,000';
    PdfGridRow row12 = grid2.rows.add();
    row12.cells[0].value = 'E02';
    row12.cells[1].value = 'Simon';
    row12.cells[2].value = '\$12,000';
    
    //Draw the grid in PDF document page
    grid2.draw(
        page: result.page,
        bounds: Rect.fromLTWH(0, result.bounds.bottom + 20, 400, 300));
    
    //Save and dispose the PDF document
    File('SampleOutput.pdf').writeAsBytes(await document.save());
    document.dispose();

    Apply built-in grid style

    Essential Flutter PDF supports Built-in table styles. This will help you apply background colors and styles to your grid. This is applicable to the PdfGrid model, and the appearance is identical to Microsoft Word’s built-in table styles. You can also apply in-built table styles with the following additional table style options.

    • Banded columns
    • Banded rows
    • First column
    • Last column
    • Header row
    • Last row

    We have various built-in styles for PdfGrid and some of the styles have no changes to the background color property. For example, the below listed styles do not have a background color. As the default background color is white, it is directly applied to each row in the grid.

    • PdfGridBuiltInStyle.gridTable1Light
    • PdfGridBuiltInStyle.gridTable1LightAccent1
    • PdfGridBuiltInStyle.gridTable1LightAccent2
    • PdfGridBuiltInStyle.gridTable1LightAccent3
    • PdfGridBuiltInStyle.gridTable1LightAccent4
    • PdfGridBuiltInStyle.gridTable1LightAccent5
    • PdfGridBuiltInStyle.gridTable1LightAccent6

    And we have some styles that have background color only in the header rows. Please find the below list for the same,

    • PdfGridBuiltInStyle.listTable3
    • PdfGridBuiltInStyle.listTable3Accent1
    • PdfGridBuiltInStyle.listTable3Accent2
    • PdfGridBuiltInStyle.listTable3Accent3
    • PdfGridBuiltInStyle.listTable3Accent4
    • PdfGridBuiltInStyle.listTable3Accent5
    • PdfGridBuiltInStyle.listTable3Accent6

    NOTE

    We can also customize the background color of the ‘PdfGrid’ by using the PdfGrid.style.backgroundBrush, PdfGridRow.style.backgroundBrush and PdfGridCell.style.backgroundBrush properties. Please note that the changes in the above properties are not considered, when we apply the ‘PdfGridBuiltInStyle’ .
    The below code example illustrates how to apply a built-in table style using the ‘applyBuiltInStyle’ method of the PdfGrid with styles from the ‘PdfGridBuiltInStyle’ Enum.

  • DART
  • //Create a new PDF document.
    PdfDocument document = PdfDocument();
    //Create a PdfGrid class.
    PdfGrid grid = PdfGrid();
    //Add columns to the grid.
    grid.columns.add(count: 3);
    //Add a header to the grid.
    grid.headers.add(1);
    //Add rows to the grid.
    PdfGridRow header = grid.headers[0];
    header.cells[0].value = 'Employee ID';
    header.cells[1].value = 'Employee Name';
    header.cells[2].value = 'Salary';
    //Add rows to the grid.
    PdfGridRow row = grid.rows.add();
    row.cells[0].value = 'E01';
    row.cells[1].value = 'Clay';
    row.cells[2].value = '\$10,000';
    row = grid.rows.add();
    row.cells[0].value = 'E02';
    row.cells[1].value = 'Simon';
    row.cells[2].value = '\$12,000';
    PdfGridBuiltInStyleSettings tableStyleOption =  PdfGridBuiltInStyleSettings();
    tableStyleOption.applyStyleForBandedRows = true;
    tableStyleOption.applyStyleForHeaderRow = true;
    //Apply built-in table style.
    grid.applyBuiltInStyle(PdfGridBuiltInStyle.listTable6ColorfulAccent1,
        settings: tableStyleOption);
    //Draw the grid.
    grid.draw(
        page: document.pages.add(), bounds: const Rect.fromLTWH(10, 10, 0, 0));
    //Save the document.
    List<int> bytes =await document.save();
    //Dispose the document.
    document.dispose();