How to design a striped table ?

[janierrfb]

There is a way to design a striped table ? This may be simple but can't find any documentation about this.

[dmk99]

This is not directly supported, but is definitely a logical thing to implement. One way that you could handle this is to add an index to each item in the data array. Then, when using DataTableCell return a custom View that colours the background based on data.index % 2 === 0.

Something like below. Note I have not tested the code, this is just for illustration.

                    <TableBody>
                        <DataTableCell getContent={(r) => <View style={{backgroundColor: `${r.index % 2 === 0 ? "red" : "blue"}`}}>{r.firstName}</View>}/>
                    ...
                    </TableBody>

[dmk99]

Development Notes:

In getContent, provide the index of the element. Provide support for specifying styles for odd and even rows in TableBody.

[deividkamui]

In order to create a full colored cell you must use flexGrow: 1; if you don't use it the background-color does not cover all the cell content.

example:

<DataTableCell style={pdfStyles.dataTableRowCenter} weighting={0.1} getContent={(r: IEstatus) => {

    return (
          <View style={{ backgroundColor: r.Color, flexGrow: 1 }}>
             <Text style={{ color: "white" }}>
                 {r.Title}
             </Text>
          </View>
    );
 }} />

[andrellgrillo]

I didn't understand, because this solution didn't work for me.

This is not directly supported, but is definitely a logical thing to implement. One way that you could handle this is to add an index to each item in the data array. Then, when using DataTableCell return a custom View that colours the background based on data.index % 2 === 0.

Something like below. Note I have not tested the code, this is just for illustration.

                    <TableBody>
                        <DataTableCell getContent={(r) => <View style={{backgroundColor: `${r.index % 2 === 0 ? "red" : "blue"}`}}>{r.firstName}</View>}/>
                    ...
                    </TableBody>

Error: Type mismatch appendChild C:/Users/user/Documents/Sistema/src/elements/Node.js:22

19 | if (child) { 20 | child.parent = this; 21 | this.children.push(child);

22 | this.layout.insertChild(child.layout, this.layout.getChildCount()); | ^ 23 | } 24 | } 25 |

import React, { useState, useEffect } from "react";
import {
  PDFViewer,
  Document,
  Page,
  StyleSheet,
  View,
} from "@react-pdf/renderer";
import {
  Table,
  TableHeader,
  TableCell,
  TableBody,
  DataTableCell,
} from "@david.kucsai/react-pdf-table";
import api from "./services/api";

import "./App.css";

const styles = StyleSheet.create({
  page: { paddingLeft: 30, paddingRight: 10, paddingTop: 10 },
});

function App() {
  const [loading, setLoading] = useState(false);
  const [condicoes, setCondicoes] = useState([]);

  useEffect(() => {
    async function loadCondicoes() {
      const result = await api.get("condicoes");
      setCondicoes(result.data);
      if (result.data) {
        setLoading(true);
        //console.log(secoes);
      }
    }

    loadCondicoes();
  }, [loading]);

  if (loading) {
    return (
      <div
        style={{
          width: "100%",
          justifyContent: "center",
          alignContent: "center",
          textAlign: "center",
        }}
      >
        <PDFViewer width="1000" height="600" className="app">
          <Document>
            <Page size="A4" style={styles.page}>
              <Table data={condicoes}>
                <TableHeader>
                  <TableCell>Id</TableCell>
                  <TableCell>Descrição</TableCell>
                  <TableCell>Pontuação</TableCell>
                </TableHeader>
                <TableBody >
                  <DataTableCell getContent={(r) => <View>{r.id}</View>} />
                  <DataTableCell getContent={(r) => r.descricao} />
                  <DataTableCell getContent={(r) => r.pontuacao} />
                </TableBody>
              </Table>
            </Page>
          </Document>
        </PDFViewer>
      </div>
    );
  }
  return null;
}

export default App;

[deividkamui]

@andrellgrillo try changing your table body to:

<TableBody >
        <DataTableCell getContent={(r) => {  
              return (  
                 <Text>{r.id}</Text>
              ); 
          }} />
         <DataTableCell getContent={(r) => r.descricao} />
         <DataTableCell getContent={(r) => r.pontuacao} />
</TableBody>

[andrellgrillo]

Thank you!! @deividkamui , Problem resolved

[hkar19]

This is not directly supported, but is definitely a logical thing to implement. One way that you could handle this is to add an index to each item in the data array. Then, when using DataTableCell return a custom View that colours the background based on data.index % 2 === 0.

Something like below. Note I have not tested the code, this is just for illustration.

                    <TableBody>
                        <DataTableCell getContent={(r) => <View style={{backgroundColor: `${r.index % 2 === 0 ? "red" : "blue"}`}}>{r.firstName}</View>}/>
                    ...
                    </TableBody>

how do you get the index? i dont think it was defined in getContent's r param.

[dmk99]

This is not directly supported, but is definitely a logical thing to implement. One way that you could handle this is to add an index to each item in the data array. Then, when using DataTableCell return a custom View that colours the background based on data.index % 2 === 0. Something like below. Note I have not tested the code, this is just for illustration.

                    <TableBody>
                        <DataTableCell getContent={(r) => <View style={{backgroundColor: `${r.index % 2 === 0 ? "red" : "blue"}`}}>{r.firstName}</View>}/>
                    ...
                    </TableBody>

how do you get the index? i dont think it was defined in getContent's r param.

This is a property on your row data.