TNO-1193 Replace react-table component #663
Conversation
| import React from 'react'; | ||
| import { Button, FlexboxTable, ITableHookColumn, Row, Text } from 'tno-core'; | ||
|
|
||
| export class DemoData { |
There was a problem hiding this comment.
Helpful page to test stuff... I'll leave it in for now.
| import { ITableProps, SortFlag, TablePager, useTable } from '.'; | ||
| import * as styled from './styled'; | ||
|
|
||
| export const FlexboxTable = <T extends object>({ |
There was a problem hiding this comment.
This is a default implementation. We can create other implementations because it's headless.
| columns, | ||
| data, | ||
| options: { | ||
| isMulti: rest.isMulti, |
There was a problem hiding this comment.
I'd like to find a better way to do this as currently it require manually passing the values down.
| </div> | ||
| </div> | ||
| )} | ||
| {table.options.showHeader && ( |
There was a problem hiding this comment.
I'd like to extend the functionality of the hook to include ways to fetch all the attributes similar to react-table. It would make it easier to create new implementations.
| </header> | ||
| )} | ||
| <div className="rows"> | ||
| {table.groupBy && ( |
There was a problem hiding this comment.
Basic grouping support. But it doesn't support paging when grouping.
| * @param param0 Hook properties | ||
| * @returns A TableInternal object instance. | ||
| */ | ||
| export const useTable = <T extends object>({ |
There was a problem hiding this comment.
I am not a fan of how I implemented state management with this hook. It seems to work okay for now though.
| ) => { | ||
| const cols = [...columns]; | ||
| if (table.options.isMulti) | ||
| cols.unshift( |
There was a problem hiding this comment.
Multi-select comes built in.
Replace react-table Publish tno-core:0.0.232
Created a new React table component that we can use to replace the react-table library. Ran into too many issues with react-table to want to continue with it. There are still pages using the react-table, but I'll remove them later.
The new component also has a headless design, but I've created a basic component that has the features we're using. It needs a lot more time to make it truly performant, but so far doesn't seem to be slower than react-table. There are some state management issues that do require a hard refresh when testing regrettably.
Published tno-core:0.0.232
Content List View
Morning Papers