nanorise Posts - Answer Overflow

nanorise

•Created by nanorise on 3/21/2024 in #questions

Selecting only `td` elements from the root table (not nested tables inside the root table)

Hey! i have a ref to a table element and I want to querySelectorAll its td in a certain index. I came up with the following:

tableRef.current.querySelectorAll<HTMLTableCellElement>(
  `tbody tr td:nth-child(${index + 1})`
)

tableRef.current.querySelectorAll<HTMLTableCellElement>(
  `tbody tr td:nth-child(${index + 1})`
)

it works very nicely but it also selects td elements from nested drawer tables, (which are basically the same table inside a certain tr). I want to select only the tds of the root table. Can someone assist me? i'm open to JS and CSS solutions

6 replies

TTCTheo's Typesafe Cult

•Created by nanorise on 1/12/2023 in #questions

keep scrollbar position in Inverse Infinite scroll

I Implemented Inverse infinite scroll for a chat view It works nicely, and the query triggers when the scrollTop is in the 50px of the top of the container. if the query triggers and ends when the user is scrolled all the way to the top, the viewport stays on the top of the container, instead of staying on the current viewed chat message How can I keep the position of the scrollbar on the current message? (first message before the query ends)

2 replies

TTCTheo's Typesafe Cult

•Created by nanorise on 10/19/2022 in #questions

Type to require elements of array to all have one property or the other

I'm looking for a type that will force all elements of the array to have 1 property or the other example

interface ColumnCommon {
  id: string;
}


type WidthedColumn = ColumnCommon & { width?: Length; };
type WeightedColumn = ColumnCommon & { weight?: number; };

type Columns = Array<WidthedColumn> | Array<WeightedColumn>

interface ColumnCommon {
  id: string;
}


type WidthedColumn = ColumnCommon & { width?: Length; };
type WeightedColumn = ColumnCommon & { weight?: number; };

type Columns = Array<WidthedColumn> | Array<WeightedColumn>

so here I need two things 1. one column can't have both weight and width 2. all columns in the array should have the same property (weight or width)

4 replies

TTCTheo's Typesafe Cult

•Created by nanorise on 10/9/2022 in #questions

Created a Resizable HTML table, missing one last thing

I created a Resizable table with event listeners, I used React because I need it in my project (mainly for useRef Hooks). Stackblitz - https://stackblitz.com/edit/react-ts-devbrv?file=useResizableTable.ts Basically when shrinking a column, it checks that the columns' widths are higher than the minimum width, and if not, recursively searches for the next column it can shrink and focuses on it. The only remaining problem is that if I expand a column and shrink multiple columns with it, and then change direction, it expands the wrong column, basically dragging multiple columns instead of the first available one it can expand. e.g. try to expand the Company column until the end, and then shrink it without leaving mousedown, you would imagine that Company will shrink and Contact will expand, but instead it expands Spouse. Would love to get help on the issue and some thoughts on the implementation, and how would you implement it differently Thanks

7 replies

TTCTheo's Typesafe Cult

•Created by nanorise on 9/28/2022 in #questions

framer-motion does not work well inside a portal

anyone with framer-motion experience? having issues when rendering inside a popover when items are returning to the list, they are coming from seems like (0,0) of the screen also, AnimatePresence doesn't seem to work at all

1 replies

Gaming

Programming