Control select/unselect #127
Comments
|
@CosminPerRam does this help? #117 (comment) We had a similar case, where we simply disabled the row when it's state is selected. This way, it cannot unselected. |
|
It would make sense of this to work, although this is more of a 'select behaviour' rather than changing a property. Although, it seems like the If you would like to see what I'm talking about, the repo that I'm working on is public, the PR that fixes this is here: CosminPerRam/SESS-Frontend#5 and if you'd like to see the behaviour live, check it here: https://sess-frontend-git-fix-clickrows-teooko.vercel.app/ |
|
Hey, any updates on this? Does |
|
Bump. |
|
I think so. Can you check? |
|
It doesn't seem so, I'll try this in a fresh project and I'll report back. |
|
By reproducing a minimal working example, it shows that disable indeed works (even on the version that I originally made this issue on, The minimal working example for future people that might encounter this: import * as React from 'react';
import {
Table,
Header,
HeaderRow,
Body,
Row,
HeaderCell,
Cell,
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { getTheme } from '@table-library/react-table-library/baseline';
import {useRowSelect} from "@table-library/react-table-library/select";
const Component = () => {
const data = { nodes: [
{id: "a", name: "Test", type: "Wow", isComplete: false, tasks: 2},
{id: "b", name: "Another", type: "NotWow", isComplete: true, tasks: 7}
] };
const theme = useTheme(getTheme());
const select = useRowSelect(data, {
onChange: (action, state) => {
console.log(action, state);
}
});
return (
<Table data={data} theme={theme} select={select}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell>Task</HeaderCell>
<HeaderCell>Type</HeaderCell>
<HeaderCell>Complete</HeaderCell>
<HeaderCell>Tasks</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item} disabled={item.id === select.state.id}>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
<Cell>{item.tasks.toString()}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};
function App() {
return (
<div className={'App'}>
<Component/>
</div>
);
}
export default App;Capture of showing this in action: |
|
Thanks for leaving the example here! Glad it worked now :) |
|
Hey, I had the time to look on why it does not work on my site and found the issue: import * as React from 'react';
import {
Table,
Header,
HeaderRow,
Body,
Row,
HeaderCell,
Cell,
} from '@table-library/react-table-library/table';
import { useTheme } from '@table-library/react-table-library/theme';
import { getTheme } from '@table-library/react-table-library/baseline';
import {useRowSelect} from "@table-library/react-table-library/select";
const Component = () => {
const data = { nodes: [
{id: "a", name: "Test", type: "Wow", isComplete: false, tasks: 2},
{id: "b", name: "Another", type: "NotWow", isComplete: true, tasks: 7}
] };
const theme = useTheme(getTheme());
const select = useRowSelect(data, {
onChange: (action, state) => {
console.log(action, state);
}
});
return (
<Table data={data} theme={theme} select={select}>
{(tableList) => (
<>
<Header>
<HeaderRow>
<HeaderCell>Task</HeaderCell>
<HeaderCell>Type</HeaderCell>
<HeaderCell>Complete</HeaderCell>
<HeaderCell>Tasks</HeaderCell>
</HeaderRow>
</Header>
<Body>
{tableList.map((item) => (
<Row key={item.id} item={item} disabled={item.id === select.state.id} onDoubleClick={(i, e) => console.log(i, e)}>
<Cell>{item.name}</Cell>
<Cell>{item.type}</Cell>
<Cell>{item.isComplete.toString()}</Cell>
<Cell>{item.tasks.toString()}</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
);
};
function App() {
return (
<div className={'App'}>
<Component/>
</div>
);
}
export default App;The only difference compared to my last example is that i have added Here is a screen capture to show it: |
|
It would be good to have this prop mentioned somewhere in the docs. I also came looking for a disabled prop and checked all over https://react-table-library.com/, but could not find. Thankfully I stumbled onto this by searching issues. |
Hello, I'm trying this library for my table needs and works good so far, I was playing with the
Selectoption and was wondering if we could control the select behaviour.As of right now, if a row gets clicked, it gets selected, if gets clicked again, it gets unselected, is it possible to control this behaviour to make it stay selected until other (selectable) row is selected?
The text was updated successfully, but these errors were encountered: