How to remove border table?

[dikitaurensia]

Hello, can we remove the border table with props style? I tried but not work.

<Table
                    style={{border:"none"}}
                    data={[
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},                        
                    ]}
                >
                    <TableHeader styles={{border:"none"}}>
                        <TableCell style={{border:"none", color:"red",includeTopBorder:false,includeBottomBorder:false,includeLeftBorder:false,includeRightBorder:false}} >
                            First Name
                        </TableCell>
                        <TableCell>
                            Last Name
                        </TableCell>
                        <TableCell>
                            DOB
                        </TableCell>
                        <TableCell>
                            Country
                        </TableCell>
                        <TableCell>
                            Phone Number
                        </TableCell>
                    </TableHeader>
                    <TableBody styles={{border:"none"}}>
                        <DataTableCell getContent={(r) => <Link src="https://www.google.com">{r.firstName}</Link> }/>
                        <DataTableCell getContent={(r) => r.lastName}/>
                        <DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
                        <DataTableCell getContent={(r) => r.country}/>
                        <DataTableCell getContent={(r) => r.phoneNumber}/>
                    </TableBody>
                </Table> 

[dmk99]

Borders can be removed but this is not via the style prop. You can toggle this on the TableHeader, TableBody, TableCell and DataTableCell components using the following props includeLeftBorder, includeTopBorder, includeRightBorder and includeBottomBorder. Refer to this documentation: https://github.com/dmk99/react-pdf-table/blob/master/docs/typedoc/interfaces/_tablecell_.tableborder.md

You can specify the border display in the top-level containers TableHeader and TableBody, these options should then be passed to all children components.

There is a bug when disabling the borders though, which I've just found. The right border directive is ignored if you choose not to display borders.

[andrellgrillo]

Hello, can we remove the border table with props style? I tried but not work.

<Table
                    style={{border:"none"}}
                    data={[
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},
                        {firstName: "John", lastName: "Smith", dob: new Date(2000, 1, 1), country: "Australia", phoneNumber: "xxx-0000-0000"},                        
                    ]}
                >
                    <TableHeader styles={{border:"none"}}>
                        <TableCell style={{border:"none", color:"red",includeTopBorder:false,includeBottomBorder:false,includeLeftBorder:false,includeRightBorder:false}} >
                            First Name
                        </TableCell>
                        <TableCell>
                            Last Name
                        </TableCell>
                        <TableCell>
                            DOB
                        </TableCell>
                        <TableCell>
                            Country
                        </TableCell>
                        <TableCell>
                            Phone Number
                        </TableCell>
                    </TableHeader>
                    <TableBody styles={{border:"none"}}>
                        <DataTableCell getContent={(r) => <Link src="https://www.google.com">{r.firstName}</Link> }/>
                        <DataTableCell getContent={(r) => r.lastName}/>
                        <DataTableCell getContent={(r) => r.dob.toLocaleString()}/>
                        <DataTableCell getContent={(r) => r.country}/>
                        <DataTableCell getContent={(r) => r.phoneNumber}/>
                    </TableBody>
                </Table> 

An alternative that I found was the following: in the file "TableCell.js" in the module's lib folder, comment out line 49.

var defaultStyle = {
            flex: (_a = this.props.weighting, (_a !== null && _a !== void 0 ? _a : 1)),
            justifyContent: "stretch",
            textAlign: (_b = this.props.textAlign, (_b !== null && _b !== void 0 ? _b : "left")),
            fontSize: (_c = this.props.fontSize, (_c !== null && _c !== void 0 ? _c : (this.props.isHeader === true ? 14 : 12))),
            // borderRight: includeRightBorder && "1pt solid black",
            wordWrap: "break-word",
            whiteSpace: "pre-wrap"
        };

[pluderes]

Hi, i tried using includeLeftBorder, includeTopBorder, includeRightBorder and includeBottomBorder for TableBody but borderTop still appears.

          <Table data={dataTotal}>
            <TableBody
              includeBottomBorder={false}
              includeLeftBorder={false}
              includeRightBorder={false}
              includeTopBorder={false}
            >
              <DataTableCell
                style={stylesPDF.borderTopNone}
                weighting={0.8}
                getContent={(r) => (
                  <Text style={[stylesPDF.textRight, stylesPDF.fs11, stylesPDF.pd3]}>{r.name}</Text>
                )}
              />
              <DataTableCell
                style={stylesPDF.borderTopNone}
                weighting={0.2}
                getContent={(r) => (
                  <Text style={[stylesPDF.textRight, stylesPDF.fs11, stylesPDF.pd3]}>
                    {formatCurrency(r.value)}
                  </Text>
                )}
              />
            </TableBody>
          </Table>

[pluderes]

i found that when i check file TableBody.js line 39 and 41. did you forget the condition of includeTopBoder?

var TableBody = (function (_super) { __extends(TableBody, _super); function TableBody() { return _super !== null && _super.apply(this, arguments) || this; } TableBody.prototype.render = function () { var _this = this; var _a; var rowCells = React.Children.toArray(this.props.children); var _b = Utils_1.getDefaultBorderIncludes(this.props), includeLeftBorder = _b.includeLeftBorder, includeBottomBorder = _b.includeBottomBorder, includeRightBorder = _b.includeRightBorder; var dataRows = (_a = this.props.data, (_a !== null && _a !== void 0 ? _a : [])); return ((dataRows).map(function (data, rowIndex) { return (React.createElement(TableRow_1.TableRow, __assign({}, _this.props, { key: rowIndex, data: data, includeLeftBorder: includeLeftBorder, includeBottomBorder: includeBottomBorder, includeRightBorder: includeRightBorder, includeTopBorder: false }), rowCells)); })); }; return TableBody; }(React.PureComponent));

[clarklindev]

@dmk99

You can toggle this on the TableHeader, TableBody, TableCell and DataTableCell components using the following props includeLeftBorder, includeTopBorder, includeRightBorder and includeBottomBorder. Refer to this documentation: https://github.com/dmk99/react-pdf-table/blob/master/docs/typedoc/interfaces/_tablecell_.tableborder.md

Hi, thanks for your pdf code: please include this in the top-level documentation, it wasnt obvious that this was the setting to use to remove border on the table and in-hindsight its obvious after looking into the typescript .d.ts files, but spent some time to figure it out.

thanks though for replying to the issue!

[jeffbski-sketch]

I still seem to get a border for the rows (not sure if it is the top or the bottom).

[Destroyer369]

Hi, i tried using includeLeftBorder, includeTopBorder, includeRightBorder and includeBottomBorder for TableBody but borderTop still appears.

          <Table data={dataTotal}>
            <TableBody
              includeBottomBorder={false}
              includeLeftBorder={false}
              includeRightBorder={false}
              includeTopBorder={false}
            >
              <DataTableCell
                style={stylesPDF.borderTopNone}
                weighting={0.8}
                getContent={(r) => (
                  <Text style={[stylesPDF.textRight, stylesPDF.fs11, stylesPDF.pd3]}>{r.name}</Text>
                )}
              />
              <DataTableCell
                style={stylesPDF.borderTopNone}
                weighting={0.2}
                getContent={(r) => (
                  <Text style={[stylesPDF.textRight, stylesPDF.fs11, stylesPDF.pd3]}>
                    {formatCurrency(r.value)}
                  </Text>
                )}
              />
            </TableBody>
          </Table>

To remove all borders you need to install in TableHeader, TableBody: includeBottomBorder={false} includeLeftBorder={false} includeRightBorder={false} includeTopBorder={false}

And in TableCell, DataTableCell: style={[{ border: "0px" }]}

 <View>
          <Table
            data={[
              {
                firstName: "Iggarila",
                lastName: "Smith",
                dob: new Date(),
                country: "Australia",
                phoneNumber: "xxx-0000-0000",
              },
            ]}
          >
            <TableHeader
              textAlign={"center"}
              includeBottomBorder={false}
              includeLeftBorder={false}
              includeRightBorder={false}
              includeTopBorder={false}
            >
              <TableCell style={[{ border: "0px" }]}>
                Name
              </TableCell>
              <TableCell style={[{ border: "0px" }]}>
               Surname
              </TableCell>
              <TableCell style={[{ border: "0px" }]}>
                Date
              </TableCell>
              <TableCell style={[{ border: "0px" }]}>
                Location
              </TableCell>
            </TableHeader>
            <TableBody
              includeBottomBorder={false}
              includeLeftBorder={false}
              includeRightBorder={false}
              includeTopBorder={false}
            >
              <DataTableCell getContent={(r) => r.firstName} style={[{ border: "0px" }]} />
              <DataTableCell getContent={(r) => r.lastName} style={[{ border: "0px" }]} />
              <DataTableCell getContent={(r) => r.dob.toLocaleString()} style={[{ border: "0pxk" }]} />
              <DataTableCell getContent={(r) => r.country} style={[{ border: "0px" }]} />
            </TableBody>
          </Table>
        </View>