can use this lib for react native? #1492

Activity

1. tannerlinsley commented on Sep 3, 2019

   

   tannerlinsley

   on Sep 3, 2019

   Member

   More actions

   To the best of my knowledge, yes. You should be able to use React Table in React Native.

   👍React with 👍5Reacted by AmirFarahani, Reilly Sweetland, Richard Willis, Corbin Crutchley and Ankur Magan

   🎉React with 🎉2Reacted by AmirFarahani and Corbin Crutchley
2. tannerlinsley

   closed this as completedon Sep 3, 2019
3. netalex commented on Oct 8, 2020

   

   netalex

   on Oct 8, 2020

   More actions

   how to fix #2144???
4. cengit commented on Sep 20, 2022

   

   cengit

   on Sep 20, 2022

   More actions

   react-native table, I'm going to use this one: https://github.com/meliorence/react-native-render-html
5. TomOMara commented on Feb 15, 2023

   

   TomOMara

   on Feb 15, 2023

   Last edited by TomOMara

   More actions

   In-case this helps someone, here's a basic example in react native that uses sorting (react-table v7)

   import { useMemo } from "react";
   import { View, Text } from "react-native";
   import { useTable, useSortBy } from "react-table";
   
   // docs -> https://react-table-v7.tanstack.com/docs/api/useTable
   
   const RText: React.FC<Props> = ({
     color,
   }) => {
     return (
       <Text style={{color: color}}>{...rest}</Text>
     );
   });
         
   
   export const RTable = () => {
     const data = useMemo(
       () => [
         {
           col1: "Hello",
           col2: "World",
         },
         {
           col1: "react-table",
           col2: "rocks",
         },
         {
           col1: "whatever",
           col2: "you want",
         },
       ],
       []
     );
   
     const columns = useMemo(
       () => [
         {
           Header: () => <RText>Column 1</RText>,
           accessor: "col1", // accessor is the "key" in the data
           Cell: (props) => <RText color="secondary">{props.value}</RText>,
         },
         {
           Header: "Column 2",
           accessor: "col2",
         },
       ],
       []
     );
   
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
       useTable({ columns, data }, useSortBy);
   
     return (
       <View style={{ flex: 2, padding: 10, backgroundColor: "red" }}>
         {/* HEAD */}
         <View style={{ flex: 1, flexDirection: "row", backgroundColor: "blue" }}>
           {headerGroups.map((headerGroup) => (
             <View
               style={{ backgroundColor: "purple", flex: 1, flexDirection: "row" }}
             >
               {headerGroup.headers.map((column) => (
                 <View
                   {...column.getHeaderProps(column.getSortByToggleProps())}
                   style={{
                     flex: 1,
                     backgroundColor: "green",
                   }}
                 >
                   <Text style={{ color: "orange" }}>
                     {column.render("Header")}
                     {column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼") : ""}
                   </Text>
                 </View>
               ))}
             </View>
           ))}
         </View>
   
         {/* BODY */}
         <View style={{ flex: 5, flexDirection: "column" }}>
           {rows.map((row) => {
             prepareRow(row);
             return (
               <View style={{ flex: 1, flexDirection: "row" }}>
                 {row.cells.map((cell) => {
                   return (
                     <Text
                       style={{
                         flex: 1,
                         backgroundColor: "papayawhip",
                       }}
                     >
                       {cell.render("Cell")}
                     </Text>
                   );
                 })}
               </View>
             );
           })}
         </View>
       </View>
     );
   };

   👍React with 👍15Reacted by Lucas Garrido, Martin, cbj, Aaron Farr, masiaf, Matthew Wolfe, Juan Salvador Portugal, Mattias Pettersson, Supamagic, DRAPPIER Quentin and 5 more