# Directory

Directory — Legend List documentation.

Source: https://legend.so/list/v3/react/examples/directory/

Legend List v3 documentation. Current documentation version.

Features used

-   `live filtering` to swap the visible dataset immediately as the query changes without rebuilding the surrounding list shell.

example-web/src/examples/DirectoryExample.tsx

[View source in legend-list](https://github.com/LegendApp/legend-list/blob/a71f2cf68b30061f72bc0735b1326c6a21e2f762/example-web/src/examples/DirectoryExample.tsx)

```tsx
import React from "react";

import { LegendList } from "@legendapp/list/react";
import { buildDirectoryPeople, type DirectoryPerson } from "@examples/directory";
import { CARD_CLASS, cardStyle, listViewportStyle, Shell } from "./shared";

const directoryPeople = buildDirectoryPeople();

export function DirectoryExample() {
    const [query, setQuery] = React.useState("");
    const filtered = React.useMemo(() => {
        const q = query.toLowerCase();
        return directoryPeople.filter(
            (person) => person.name.toLowerCase().includes(q) || person.department.toLowerCase().includes(q),
        );
    }, [query]);

    return (
        <Shell title="Directory">
            <div className="flex min-h-0 flex-1 flex-col">
                <input
                    className="mb-3 rounded-2xl border border-slate-200 bg-white px-[14px] py-3"
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Search people or team..."
                    value={query}
                />
                <LegendList
                    data={filtered}
                    estimatedItemSize={72}
                    keyExtractor={(item) => item.id}
                    recycleItems
                    renderItem={({ item }: { item: DirectoryPerson }) => (
                        <div className={`${CARD_CLASS} flex items-center gap-3`} style={cardStyle()}>
                            <div
                                className="flex size-[42px] items-center justify-center rounded-full text-white font-extrabold"
                                style={{
                                    background: item.accent,
                                }}
                            >
                                {item.initials}
                            </div>
                            <div>
                                <div className="font-extrabold">{item.name}</div>
                                <div className="text-slate-500">
                                    {item.title} · {item.department} · {item.city}
                                </div>
                            </div>
                        </div>
                    )}
                    style={listViewportStyle}
                />
            </div>
        </Shell>
    );
}
```

[View Markdown](https://legend.so/list/v3/react/examples/directory.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Directory&body=Page%3A+https%3A%2F%2Flegend.so%2Flist%2Fv3%2Freact%2Fexamples%2Fdirectory%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)