table-library / react-table-library Goto Github PK

:bento: React Table Library

Home Page: https://react-table-library.com

License: MIT License

JavaScript 81.58% HTML 0.21% Dockerfile 0.04% Makefile 0.10% Shell 0.01% TypeScript 14.91% MDX 3.14%

react reactjs react-table react-data-grid react-datagrid react-data-table react-datatable react-table-library table datagrid

react-table-library's People

Contributors

Stargazers

Watchers

react-table-library's Issues

Upgrade react-window to 1.8.7 to avoid warnings

With React 18 the library will give warnings.

Can you update the react-window package dependency to use version 1.8.7 as its fixes the peerDependencies. See bvaughn/react-window#623

Also I think react-virtualized-auto-size will also give warnings but that package hasn't been updated.

props.item in tree sub-node has unexpected value

When expanding one of the root nodes of a table with tree enabled the item for that row is not as expected.

My table data is simple:

const tableData = {
    nodes: [
      {
        id: '1',
        terms: "zero",
        num_docs: 4,
        nodes: [
          {
            id: '2',
            terms: "one",
            num_docs: 12,
            nodes: null
          },
          {
            id: '3',
            terms: "two",
            num_docs: 12,
            nodes: null
          }
        ]
      }
    ]
  };

I'm expecting something along these lines:

{
    "id": "1",
    "terms": "zero",
    "num_docs": 4,
    "nodes": [
        "2",
        "3"
    ],
    "treeXLevel": 0,
    "treeYLevel": 0,
    "parentNode": {
        (truncated)
    },
    "ancestors": [
       (truncated)
    ]
}

but instead I'm getting:

{
    "nodes": [
        {
            "id": "1",
            "terms": "zero",
            "num_docs": 4,
            "nodes": [
                {
                    "id": "2",
                    "terms": "one",
                    "num_docs": 12,
                    "nodes": null
                },
                {
                    "id": "3",
                    "terms": "two",
                    "num_docs": 12,
                    "nodes": null
                }
            ]
        }
    ],
    "[object Object],[object Object]": [
        "1"
    ]
}

Also, I'm seeing this warning:

Warning: Each child in a list should have a unique "key" prop.

The warning appears to come from a <D> which has no key attribute, unlike the root nodes. Also, its props.item is shown by the React plugin as: {[object Object],[object Object]: Array(1), nodes: …}. Specifically, it has an attribute named "[object Object],[object Object]". The value of that property is ["1"]. Also, its nodes attribute looks different than what's on the others, and it doesn't have attributes such as ancestors or parentNode. So it seems like something strange is happening.

Could this be because I am using React 18.2.0? I am using 4.0.10 of react-table-library.

How to make several select fields for Table/Cell component?

I was trying to make several fields-filters (Select) but every time the data-value (data = {nodes} was ovewritten.
How to deal with it?

Could you provide an example.

row 'select' hook doesn't trigger when a cell contains an Icon

The select hook is trigger on a row selection except if a call contains an icon. Do you know a workaround for this, for example being able to call the select function from the Icon's onclick() callback?

To re-create:

npx create-react-app my-app --template typescript
cd my-app
npm install @table-library/react-table-library @emotion/react @emotion/styled @mui/icons-material

Replace App.tsx with:

import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
  Body,
  Row,
  Cell,
} from "@table-library/react-table-library/table";

import { useRowSelect } from "@table-library/react-table-library/select";

import StarIcon from "@mui/icons-material/Star";

const list = [
  {
    id: "1",
    name: "VSCode",
  },
  {
    id: "2",
    name: "JavaScript",
  },
  {
    id: "3",
    name: "React",
  },
];

const App = () => {
  const select = useRowSelect(
    { nodes: list },
    {
      onChange: onSelectChange,
    }
  );

  function onSelectChange(action: any, state: any) {
    console.log(action, state);
  }

  const data = { nodes: list };

  return (
    <Table data={data} select={select}>
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCell>Icon</HeaderCell>
              <HeaderCell>Name</HeaderCell>
            </HeaderRow>
          </Header>

          <Body>
            {tableList.map((item) => (
              <Row key={item.id} item={item}>
                <Cell>
                  <StarIcon />
                </Cell>
                <Cell>{item.name}</Cell>
              </Row>
            ))}
          </Body>
        </>
      )}
    </Table>
  );
};

export default App;

Click on the row, it works. Click on the icon, nothing happens.

Documentation Website Down

The documentation website listed in the readme is up, but the docs aren't populating the page.

Tried in a few different browsers. Could just be my end.

Someone wanna verify?

Allow className to Table

That would be super helpful if we could pass classnames to the table. I am not sure if there's a way to do it right now.

CellTree component styling

Sir can we provide a style props for CellTree typescript interface ?

All Contributors

set up all contributors

bug(typescript): Could not find declaration file for module @table-library/react-table-library/mantine

I cant seem to import it without this error

import {
  DEFAULT_OPTIONS,
  getTheme,
} from "@table-library/react-table-library/mantine";

I think the type is already in @table-library/react-table-libary/themes/mantine but I don't know how to fix it.

unable set Width to cell for compact table library

like label ,renderCell any possible to set width props in react table library

Set column widths on Composable table using HeaderCellSelect

I'm using a Composable table in a create-react-app. I have a HeaderCellSelect in the HeaderRow and a CellSelect in the Body Row.

Are there any examples of how to set the column width of the HeaderCellSelect/CellSelect column?

I have a 4-column table, with this as the first column, and it takes up 1/4 of the table width no matter what I try. I'm using Tailwind css, so a Tailwind example would be fantastic, but any example of how column widths can be set on a Composable table would be wonderful.

CI for Linting/Testing/Prettier

set up a GitHub action for linting, testing, prettier

Virtualized Table fails DOM nesting validation

Virtualized Table fails DOM nesting validation
I am using the example in the docs
https://react-table-library.com/?path=/docs/compact-table--virtualized

Warning: validateDOMNesting(...): <div> cannot appear as a child of <table>
Warning: validateDOMNesting(...): <thead> cannot appear as a child of <div>
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>
Warning: validateDOMNesting(...): <tbody> cannot appear as a child of <div>

feature request: allow user config the scrollbar component for compact table scroll

I am using mantine theme for the compact table, but mantineUI provides custom scrollbar component called ScrollArea, I want to use ScrollArea for table scrollbar instead of the browser native scrollbar, have any ideas or options to achieve this need?

Module not found: Can't resolve '@table-library/react-table-library/material-ui'

When attempting to use the material-ui theme as given here: https://react-table-library.com/?path=/docs/library-themes-material-ui--base,

import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/material-ui';

I get:

Module not found: Can't resolve '@table-library/react-table-library/material-ui'

Further, under Storybook > Lib themes > Material UI > Editable (https://react-table-library.com/?path=/docs/library-themes-material-ui--editable), it has:

import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material';

That doesnt work either, and

import { DEFAULT_OPTIONS, getTheme } from '@table-library/react-table-library/themes/material-ui';

also doesnt work.

Am I missing something?

Remove emotion dependency as many people have moved to Zero-Runtime CSS-in-JS solutions

As more and more people are aware of the costs of runtime css-in-js libraries many people have started migrating away from styled-components, emotion etc. to Zero-Runtime CSS in JS libraries instead. I really wanted to use this library, but the fact that it requires emotion to be installed, is a deal breaker for me - and I'm probably not the only one facing this problem.

While I know you primarily developed this for your own use, may I suggest you remove the dependency on emotion and just stick to normal css or even reacts inline styles, so you leave it up to the user what custom styling solution they want to use.

Typescript support

Wondering why Typescript was not used and if there is a plan to migrate or provide type definitions? If there is a willingness I could see if I can assist with this effort.

virtualized + variable row height

is it possible to combine these two features on the same table?

Support for CommonJS

Hi,
do you plan on supporting a commonJS build of the library or will it stay pure ESM?

renderAfterRow is not working correctly when using Virtualized Tables

Hi.

renderAfterRow is not working correctly when using Virtualized Tables.

App crashes with error: React is not defined

Steps:

Bootstrap an application using create-react-app (npx create-react-app my-app --template typescript)
Add the dependencies npm install @table-library/react-table-library @emotion/react)
App crashes with following error:

Uncaught ReferenceError: React is not defined
    at x (objectWithoutProperties.js:19:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at mountIndeterminateComponent (react-dom.development.js:20838:1)
    at beginWork (react-dom.development.js:22342:1)
    at beginWork$1 (react-dom.development.js:27219:1)
    at performUnitOfWork (react-dom.development.js:26392:1)
    at workLoopSync (react-dom.development.js:26303:1)
    at renderRootSync (react-dom.development.js:26271:1)
    at performSyncWorkOnRoot (react-dom.development.js:25924:1)
    at flushSyncCallbacks (react-dom.development.js:11982:1)

TableNode.id string or number

Many entities have numeric ids. Does it make sense to you to update TableNode.id to allow numbers as well?

export type TableNode = {
  id: string | number;
  nodes?: TableNode[] | Nullish;
  [prop: string]: any;
};

React 17: export 'useInsertionEffect' (imported as 'e') was not found

When running yarn start on my project I get the following error. I have checked and all preconditions in my package.json are fullfilled.
I have added the contents of my package.json underneath the error listing

failed Building development bundle - 24.852s
ERROR in ./node_modules/@table-library/react-table-library/Cell-9ed34849.js 9:10466-10486
export 'useInsertionEffect' (imported as 'e') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement,
createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)
@ ./node_modules/@table-library/react-table-library/compact.js 1:0-53 1:792-793 1:826-827 1:835-836 1:954-955 1:1004-1005 1:1217-1218 1:1247-1248 1:1314-1315 1:1329-1330 1:2054-2055 1:2088-2089 1:2163-2164 1:2167-2168 1:2509-2510 1:2533-2534 1:2575-2576 1:2579-2580
1:2694-2695 1:2739-2740 1:2776-2777 1:3851-3852 1:3912-3913 1:3926-3927 1:3934-3935 1:3947-3948 1:3951-3952 1:3969-3970 1:4083-4084 1:4146-4147 1:4190-4191 1:4194-4195 1:4360-4361 1:4374-4375 1:4428-4429 1:4617-4618 1:4621-4622 1:4845-4846 1:4859-4860 1:4877-4878
1:4881-4882 1:4899-4900 1:4934-4935 1:4938-4939 1:5039-5040 1:5048-5049 1:5085-5086 1:5357-5358 1:5563-5564 1:5664-5665 1:5744-5745 1:5748-5749 1:5823-5824 1:5827-5828 1:5922-5923
@ ./src/components/UICore/organisms/ExtendedStickyTable/ExtendedStickyTable.tsx 38:0-74 126:74-86
@ ./src/components/UICore/organisms/ExtendedStickyTable/index.ts 4:0-38 4:0-38
@ ./src/components/UICore/organisms/index.ts 9:0-38 9:0-38
@ ./src/components/UICore/index.ts 6:0-28 6:0-28
@ ./src/components/StartFrame/StartFrame.tsx 9:0-43 15:53-67
@ ./src/templates/index.tsx 12:0-61 30:48-58
@ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 31:11-33:5
@ ./.cache/app.js 14:0-52 27:87-31:1 30:29-42 33:27-40 27:0-31:2

{
"name": "test",
"private": true,
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build --prefix-paths",
"develop": "gatsby develop",
"format": "prettier --write "**/.{js,jsx,ts,tsx,json,md}"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"fix": "tslint --fix --project . && prettier --write .",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
"storybook": "BROWSER='Firefox Developer Edition' start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"dependencies": {
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
"@iconify/react": "^3.2.1",
"@mui/icons-material": "^5.8.0",
"@mui/lab": "^5.0.0-alpha.83",
"@mui/material": "^5.8.1",
"@mui/styled-engine": "^5.8.0",
"@mui/styles": "^5.8.0",
"@mui/system": "^5.8.1",
"@mui/x-data-grid": "^5.11.1",
"@reduxjs/toolkit": "^1.8.1",
"@table-library/react-table-library": "^3.1.4",
"@testing-library/jest-dom": "^5.16.4",
"axios": "^0.27.2",
"clsx": "^1.1.1",
"date-fns": "latest",
"dotenv": "^16.0.1",
"downshift": "^6.1.7",
"express": "^4.18.1",
"gatsby": "^4.14.0",
"gatsby-plugin-manifest": "^4.14.0",
"html-react-parser": "^1.4.12",
"http-proxy-middleware": "^2.0.6",
"moment": "^2.29.2",
"moment-timezone": "^0.5.34",
"notistack": "^2.0.5",
"react": "17.0.2",
"react-device-detect": "^2.2.2",
"react-dom": "17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-intersection-observer": "^9.1.0",
"react-number-format": "^4.9.3",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^8.0.1",
"redux": "^4.1.1",
"redux-actions": "^2.6.5",
"redux-saga": "^1.1.3"
},
"devDependencies": {
"@babel/core": "^7.17.10",
"@storybook/react": "^6.5.0",
"@types/express": "^4.17.13",
"@types/node": "^17.0.33",
"@types/react-helmet": "^6.1.0",
"@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.26.0",
"eslint": "^8.15.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"lint-staged": "^12.4.1",
"prettier": "^2.6.2",
"typescript": "^4.6.4"
},
"lint-staged": {
".js": "eslint --cache --fix"
}
}

It doesn't work on nextjs

Table always take the max height of container div

Basically, even if the table has only 2 rows, all the container space will be occupied and the header + 2 rows will each be very big in height(1/3 of the container each). I'm using tree table, is there a way to prevent this or specify a fixed height for each row(and header too)?

React filtering with multiple columns is not giving the expected output

In this code, you used filtering using a single column (item.type). I am trying to use multiple columns and this code does not work as expected.

For Example see the below(made changes to the code on the website by adding one more filter with a different column):

const data = {
nodes: nodes.filter(
(item) =>
(filters.includes('SETUP') && item.type === 'SETUP') ||
(filters.includes('LEARN') && item.type === 'LEARN') ||
(filters.includes(‘2’) && item.Severity === ‘2’)
),
};

So here, since I am using both Severity and type both the columns, my results are not as expected. The above works perfectly well if I use a single column.
Please help me with this!

Using Typescript & Adding Typescript to the docs

I am trying to strictly type my Node array & while using the sort functionality, I see errors such as Type 'TableNode[]' is not assignable to type 'NodeType[]', any idea how to fix this? I have tried extending my type with TableNode, but when doing this the error Type 'TableNode' is missing the following properties from type 'NodeType': platform, position, openInterest, APY, and 2 more. shows. Any ideas or documentation to support this use case?

NodeType:

interface NodeType extends TableNode {
    id: string;
    platform: string;
    position: string;
    openInterest: string;
    APY: string;
    fixedYield: string;
    variableYield: string;
}

I also believe the docs should include some documentation for using the library with typescript. I can help with this if necessary. Love the library though! Thanks!

Looks like the documentation site is broken?

404 error thrown on the JS bundle. just raising up - maybe needs a re-deploy :)

Layout regression introduced in 4.1.0

before:

after:

looks like https://github.com/table-library/react-table-library/releases/tag/v4.1.1 was trying to address this? however it doesn't fix it for me.

Use arbitrary tree child node key name

As far as I can tell, a tree data object must use the convention that child nodes are all in the nodes key. My API uses a different key.
It would be great to be able to be able to a) specify a child/parent relationship for a flat list and have the library assemble the tree according to arbitrary id/parentId fields and/or b) specify an arbitrary key for node children in a nested tree.

There seems to be a problem with the code in the example?

Example in 'usage'

  const nodes = [
      {
        id: '0',
        name: 'Shopping List',
        deadline: new Date(2020, 1, 15),
        type: 'TASK',
        isComplete: true,
        nodes: 3,  // The type of 'nodes' is TableNode, not Number。
      },
    ];

Columns, if you want to add a generic type to it.Used to represent the type of 'item'

  const COLUMNS: Column[] = [
    { label: "Task", renderCell: (item) => item.name },
    {
      label: "Deadline",
      renderCell: (item) =>
        item.deadline.toLocaleDateString("en-US", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit"
        })
    },
    { label: "Type", renderCell: (item) => item.type },
    {
      label: "Complete",
      renderCell: (item) => item.isComplete.toString()
    },
    { label: "Tasks", renderCell: (item) => item.nodes }
  ];

Table doesn't resize correctly with layout={{ custom: true }}

When re-sizing a window the columns do not automatically adjust when the custom: true setting is used.

To reproduce, use the example code below, start with a wide browser window, resize to half it's size and notice the column alignment is wrong and some columns are cut-off. Then F5/Refresh the browser window and see how it correctly adjusts itself during the re-render.

import { useTheme } from "@table-library/react-table-library/theme";
import {
  Table,
  Header,
  HeaderRow,
  HeaderCell,
  Body,
  Row,
  Cell,
} from "@table-library/react-table-library/table";

import { IconButton } from "@mui/material";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";

const list = [
  {
    id: "1",
    name: "A",
    type: 3,
    code: 10,
  },
  {
    id: "2",
    name: "B",
    type: 2,
    code: 11,
  },
  {
    id: "3",
    name: "C",
    type: 1,
    code: 12,
  },
];

const App = () => {
  const my_theme = useTheme({
    BaseRow: `
      font-size: 14px;
      color: white;
      height: 46px;
      &:focus {
        z-index: 2;
        border-top: 1px solid #177ac9;
        border-bottom: 1px solid #177ac9;
      }
    `,
    HeaderRow: `
      text-transform: uppercase;
      background-color: black;
      color: #90CAF9;
      border-bottom: 1px solid #e0e0e0;
      font-weight: 500;
    `,
    Row: `
      background-color: #1e1e1e;
      border-top: 1px solid #565656;
      border-bottom: 1px solid #565656;
      position: relative;
      z-index: 1;
      &:not(:last-of-type) {
        margin-bottom: -1px;
      }
      &:not(:first-of-type) {
        margin-top: -1px;
      }
      &:hover {
        z-index: 2;
        color: white;
        border-top: 1px solid #177ac9;
        border-bottom: 1px solid #177ac9;
      },
      &.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
        background-color: #3d4752;
        color: white;
        font-weight: normal;
        z-index: 2;
        border-top: 1px solid #177ac9;
        border-bottom: 1px solid #177ac9;
      }
    `,
    BaseCell: `
      border-top: 1px solid transparent;
      border-right: 1px solid transparent;
      border-bottom: 1px solid transparent;
      &:not(.stiff) > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &:nth-of-type(1) {
        padding-left: 8px;
        min-width: 42px;
        width: 42px;
        div {
          width: 100%;
        }
      }
      &:nth-of-type(2) {
        min-width: 100px;
        width: 100px;
      }
      &:nth-of-type(3) {
        flex: 1;
      }
      &:nth-of-type(4) {
        text-align: center;
        max-width: 100px;
      }
      &:last-of-type {
        padding-left: 0px;
        text-align: center;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
      }
    `,
  });

  return (
    <Table data={{ nodes: list }} theme={my_theme} layout={{ custom: true }}>
      {(tableList) => (
        <>
          <Header>
            <HeaderRow>
              <HeaderCell />
              <HeaderCell resize>NAME</HeaderCell>
              <HeaderCell resize>TYPE</HeaderCell>
              <HeaderCell>CODE</HeaderCell>
              <HeaderCell />
            </HeaderRow>
          </Header>

          <Body>
            {tableList.map((item) => (
              <Row key={item.id} item={item}>
                <Cell>
                  <IconButton size="small">
                    <InfoOutlinedIcon
                      color="info"
                      sx={{ fontSize: 16, verticalAlign: "middle" }}
                    />
                  </IconButton>
                </Cell>
                <Cell>{item.name}</Cell>
                <Cell>{item.type}</Cell>
                <Cell>{item.code}</Cell>
                <Cell>
                  <IconButton size="small">
                    <InfoOutlinedIcon
                      color="info"
                      sx={{ fontSize: 16, verticalAlign: "middle" }}
                    />
                  </IconButton>
                </Cell>
              </Row>
            ))}
          </Body>
        </>
      )}
    </Table>
  );
};

export default App;

Question: Row click not cancelable by child event stoppropagation?

Hi there guys,

I was messing with the library and so far love it.

This is more of a question than a bug or issue, but I was not able to construct a way for the row click to be cancelled by the cell click. I can see my child cell is cancelling, but the row click never receives the stoppropagation call from the child element. And so the row click fires along with the cell click. I tried a few 'tricks' but had to move on for the sake of time, and just add the click event to certain cells, etc. Not super ideal, but is what it is.

My quick investigation lead down the path that the react synthetic events was not making it to the Row which is using native events. Wasn't able to quite confirm this, and still couldn't get the results I was expecting. I am using the composable table, so maybe there is something I am missing or not wiring up correctly?

Thanks in advance for any feedback or help!

Update react-virtualized-auto-sizer dependency to support react 18

The current dependency "react-virtualized-auto-sizer" is fixed to 1.0.6 which in turn lock the version to be lower than 18.

[email protected] updates dependency to include also react 18.

By updating it i can remove npm overrides which are causing me quite a lot of headaches 😄

Thanks

How to implement "expand all children"?

in a tree view I would like to make it so that a normal click opens the item, and alt+click open the item and all its descendants. – how would I go about implementing this?

CompactTable and row props

Is it possible to set row props based on the row data in CompactTable? For example, I would like a row background based on the data status (red/green).

If not, could we introduce a new property getRowProps: (item: TableNode, index: number) => CompactRowProps to CompactTableProps? The logic should be that if this property is provided, it would be used to create rowProps that are passed to CompactRow.

bug table-library / [email protected]

I think this is a bug.
"styled-components": "^5.3.0"

When resize, all columns shrink

When I resize a column, all columns shrink to a minimum.

Creating a Sort + Filter Header

Hi All! :)

I may be unable to locate this in the documentation. Apologies if this is already there.

I'm trying to create a table with features similar to that within the Demo, per:
https://react-table-library.com/?path=/docs/getting-started--demo

The feature I am trying to replicate is when you click on 24%, it gives you multiple options to select from:

My goal is to use this feature to:

Allow users to select/deselect rows that don't apply to them.
Still allow users to sort the rows by size.

Is there any existing documentation on how to replicate this?

Regards,

Tim.

Example code in Readme and Docs working with NextJS

The code is giving below error:

Unhandled Runtime Error
TypeError: (0 , _emotion_utils__WEBPACK_IMPORTED_MODULE_4__.registerStyles) is not a function

Call Stack
Insertion
node_modules\@emotion\react\dist\emotion-element-6a883da9.browser.esm.js (175:16)
renderWithHooks
node_modules\react-dom\cjs\react-dom.development.js (14985:0)
mountIndeterminateComponent
node_modules\react-dom\cjs\react-dom.development.js (17811:0)
beginWork
node_modules\react-dom\cjs\react-dom.development.js (19049:0)
HTMLUnknownElement.callCallback
node_modules\react-dom\cjs\react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules\react-dom\cjs\react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules\react-dom\cjs\react-dom.development.js (4056:0)
beginWork$1
node_modules\react-dom\cjs\react-dom.development.js (23964:0)
performUnitOfWork
node_modules\react-dom\cjs\react-dom.development.js (22776:0)
workLoopSync
node_modules\react-dom\cjs\react-dom.development.js (22707:0)
renderRootSync
node_modules\react-dom\cjs\react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (22293:0)
scheduleUpdateOnFiber
node_modules\react-dom\cjs\react-dom.development.js (21881:0)
updateContainer
node_modules\react-dom\cjs\react-dom.development.js (25482:0)
eval
node_modules\react-dom\cjs\react-dom.development.js (26021:0)
unbatchedUpdates
node_modules\react-dom\cjs\react-dom.development.js (22431:0)
legacyRenderSubtreeIntoContainer
node_modules\react-dom\cjs\react-dom.development.js (26020:0)
Object.hydrate
node_modules\react-dom\cjs\react-dom.development.js (26086:0)
renderReactElement
node_modules\next\dist\client\index.js (526:30)
doRender
node_modules\next\dist\client\index.js (852:4)
_callee3$
node_modules\next\dist\client\index.js (421:18)
tryCatch
node_modules\regenerator-runtime\runtime.js (63:15)
Generator.invoke [as _invoke]
node_modules\regenerator-runtime\runtime.js (293:0)
Generator.eval [as next]
node_modules\regenerator-runtime\runtime.js (118:0)
asyncGeneratorStep
node_modules\next\dist\client\index.js (31:28)
_next
node_modules\next\dist\client\index.js (49:16)
eval
node_modules\next\dist\client\index.js (54:12)
new Promise
<anonymous>
eval
node_modules\next\dist\client\index.js (46:15)
_render
node_modules\next\dist\client\index.js (439:19)
render
node_modules\next\dist\client\index.js (412:19)
_callee2$
node_modules\next\dist\client\index.js (407:8)
tryCatch
node_modules\regenerator-runtime\runtime.js (63:15)
Generator.invoke [as _invoke]
node_modules\regenerator-runtime\runtime.js (293:0)
Generator.eval [as next]
node_modules\regenerator-runtime\runtime.js (118:0)
asyncGeneratorStep
node_modules\next\dist\client\index.js (31:28)
_next
node_modules\next\dist\client\index.js (49:16)

Does not work with SSR yet

import { Table } from '@table-library/react-table-library/table'

showing error

Server Error SyntaxError: Unexpected token 'export' This error happened while generating the page. Any console logs will be displayed in the terminal window.

default open to certain level of tree table

Can we have a feature of setting certain tree table's row already open to a certain level ?

Unable to connect the theme

import {
  DEFAULT_OPTIONS,
  getTheme,
} from '@table-library/react-table-library/themes/mantine';

Error: module not found.

Such an import solves the problem, but TypeScript swears

import {
  DEFAULT_OPTIONS,
  getTheme,
} from '@table-library/react-table-library/mantine'

I get styled-components warning, if using react-table-library

Hey,

I have an app (create-react-app) with the styled-components-dependency. Now I added react-table-library and get following warning:

It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.

See https://s-c.sh/2BAXzed for more info.

I see, we have babel-plugin-styled-components at package.json of react-table-library, but I can't figure out why the warning happened, so far.

Do you have an idea? Should we mark styled-components as external in this lib? Do you know a workaround for now (maybe resolutions)?

Thx

Allow custom styles to be applied to CellTree

Would be good to be able to style the CellTree component a bit more.

My specific use case is to move the icon to the end, not the start, of the column label.

Virtualized + editable cause input to lose focus at every keystroke

Title. I guess it happens because of modifying the state with handleUpdate. If i remove virtualizedOptions from the table it keeps the focus as normal. Is this issue known?is there any workaround?

No responsive options out of the box?

Am I right that there is no mobile devices support at all?
Like, when all the columns cant fit horizontally due to device screen width,
they start to become collapsed underneath current row in a form of
column1 name: column1 value
column2 name: column2 value
etc (like here - try to reduce window size to ee effect:
https://tabulator.info/examples/5.4?#responsive-layout-collapse
)

Table sorting appears to be broken, at least in compactTable

Starts with:

Then click Deadline twice:

This is reproduceable in the docs: https://react-table-library.com/?path=/docs/compact-table--sort

Seems as though the key prop is not unique.

When I use 3.1.5, I cannot reproduce.

question: how to toggle sort between 3 states (none, sort, sort reverse)

Is there a way to use the onToggleSort function to cylce through 3 states (NONE + sorting by sortKey) instead of only between sorting & reverse sorting?

if that makes sense.

Semantic Release

add semantic release automation with GitHub actions

table-library / react-table-library Goto Github PK

react-table-library's People

Contributors

Stargazers

Watchers

Forkers

react-table-library's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs