T
TanStack•3y ago
equal-aqua

Need help on creating table with react

Can someone help me convert this table to tanstack table(react js with javascript not typescript) with filteration , pagination and search . thanks 
<table className="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Course Code</th>
                            <th scope="col">Name</th>
                            <th scope="col">Fees</th>
                        </tr>
                    </thead>
                    <tbody>
                        {props.courses?.map(course => (
                            <tr key={course.id}>
                                <td>{course.course_code}</td>
                                <td>{course.name}</td>
                                <td>{course.fees}</td>
                            </tr>
                        ))}
                    </tbody>
                </table> 
<table className="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">Course Code</th>
                            <th scope="col">Name</th>
                            <th scope="col">Fees</th>
                        </tr>
                    </thead>
                    <tbody>
                        {props.courses?.map(course => (
                            <tr key={course.id}>
                                <td>{course.course_code}</td>
                                <td>{course.name}</td>
                                <td>{course.fees}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
2 Replies
equal-aqua
equal-aquaOP•3y ago
any simple example would help , i can't find simple example for react + i tried and i had TypeError: undefined is not an object (evaluating 'originalRows.length')
exotic-emerald
exotic-emerald•3y ago
@hello362 Hummm, the examples on tanstack table docs are good enough, I think. But if it's too abstract for some reason, I think you can use the v7 docs examples that are written in JS only. Once you understand how things work you can try to do things in v8: https://react-table-v7.tanstack.com/docs/examples/basic
Examples: Basic

Did you find this page helpful?