Comments (3)
Playing around a bit locally I got some ugly version to work with the following code, which of course is horrible:
function getNestedValue(obj, path) {
return path.split('.').reduce((acc, part) => acc && acc[part], obj);
}
$: if (shouldFilterRows) {
let rows = originalRows;
if (value.trim().length > 0) {
if (shouldFilterRows === true) {
rows = rows.filter((row) => {
return Object.entries(row) // Use entries to get key-value pairs
.filter(([key]) => key !== "id")
.some(([key, _value]) => {
if (typeof _value === "object" && _value !== null) {
// Handling nested objects
return Object.entries(_value).some(([nestedKey, nestedValue]) => {
if (typeof nestedValue === "string" || typeof nestedValue === "number") {
return nestedValue
.toString()
.toLowerCase()
.includes(value.trim().toLowerCase());
}
return false;
});
} else if (typeof _value === "string" || typeof _value === "number") {
// Handling non-object (string/number) values
return _value
.toString()
.toLowerCase()
.includes(value.trim().toLowerCase());
}
return false;
});
});
} else if (typeof shouldFilterRows === "function") {
rows = rows.filter((row) => shouldFilterRows(row, value) ?? false);
}
}
tableRows.set(rows);
filteredRowIds = rows.map((row) => row.id);
}
So it searches through all data available, not just the visible data. Though if I remove the id column from the table, it no longer searches in that. There is some odd behavior here from a usage perspective. My expectation was that it uses the header defined fields, which is not the case.
I will give it a go with a user defined function next in the hopes of not needing my ugly hack. But a generic solution would be pretty welcome I think.
from carbon-components-svelte.
The horribleness continues, however this does the job for my usecase for the very moment in time. It's crappy if you have have nested replies, so perhaps having limited or flattened replies would be better for other use cases, or the ability to specify which fields to look for and supporting nested properties would be great.
Just pasting the Toolbar here for brevity, the rest is bog standard.
<ToolbarSearch
persistent
value=""
shouldFilterRows={(row, value) => {
const searchValue = value.trim().toLowerCase();
function searchInObject(obj) {
return Object.entries(obj).some(([key, val]) => {
if (typeof val === 'object' && val !== null) {
return searchInObject(val);
} else {
return val.toString().toLowerCase().includes(searchValue);
}
});
}
// Check if the value is in the id or anywhere else in the row
return searchInObject(row) || row.id.toString().toLowerCase().includes(searchValue);
}}
bind:filteredRowIds
/>
from carbon-components-svelte.
I was able to reproduce the issue; would be a good fix for DataTable.
Reproduction: https://svelte.dev/repl/4012e79a919f42d6b3fe5179ef774757?version=4.2.9 (cannot search for 'super').
from carbon-components-svelte.
Related Issues (20)
- RadioButton checked doesn't change HOT 1
- Button with icon only - always shows tooltip HOT 2
- TooltipIcon memory leak HOT 3
- TextInput v11 HOT 4
- PasswordInput v11 HOT 5
- Alphabetize prop names in documentation HOT 5
- Layer (new component) HOT 3
- Use `Button` component instead of native `button` in `HeaderGlobalAction` HOT 1
- Popover v11 HOT 5
- IconButton v11 HOT 1
- DataTable on:click:row is missing target and currentTarget information
- ContextMenu prevents context menu invocations outside of the target HOT 2
- TypeScript cannot find CarbonTheme type when using Theme HOT 5
- `ToastNotification` close event can fire after close due to timeout HOT 1
- Link: do not render `<p>` HOT 2
- Unable to resolve *.js imports HOT 1
- Support minCount in TextArea component HOT 1
- Clean up accessibility warnings
- DataTable sort function return type is restricted to -1, 0 or 1 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carbon-components-svelte.