table-library
Control select/unselect
Hello, I'm trying this library for my table needs and works good so far, I was playing with the Select option 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?
@CosminPerRam does this help? https://github.com/table-library/react-table-library/pull/117#issuecomment-1536026912 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 disabled prop is not working for me (at all) and I don't seem to find it mentioned anywhere on the docs site, am I missing something?
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: https://github.com/teooko/SESS-Frontend/pull/5 and if you'd like to see the behaviour live, check it here: https://sess-frontend-git-fix-clickrows-teooko.vercel.app/
Bump. Does commit https://github.com/table-library/react-table-library/commit/fe53339519c79c954fd2064a4fb553fece74a51b fixes it?
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, 4.1.4).
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:
(and logs are as expected, logs only on the first select and does not if disabled)
Hey, I had the time to look on why it does not work on my site and found the issue: This is a reproduction example:
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 onDoubleClick={(i, e) => console.log(i, e)} on the Row, by doing this, the disabled prop does not work at all. Am I missing something?
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.
