# Sectioned Directory

Sectioned Directory — Legend List documentation.

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

Legend List v3 documentation. Current documentation version.

Features used

-   `stickyHeaderIndices` for grouped section headers.

example-web/src/examples/SectionedDirectoryExample.tsx

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

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

const sectionedDirectory = buildSectionedDirectoryRows(buildDirectoryPeople());

export function SectionedDirectoryExample() {
    return (
        <Shell title="Sectioned Directory">
            <LegendList
                data={sectionedDirectory.rows}
                estimatedItemSize={62}
                keyExtractor={(item) => item.id}
                recycleItems
                renderItem={({ item }: { item: SectionedDirectoryRow }) =>
                    item.type === "header" ? (
                        <div
                            className="mb-2 px-3 py-[10px] font-extrabold"
                            style={{
                                ...cardStyle("#E2E8F0"),
                                border: "1px solid #e5e7eb",
                                borderRadius: 0,
                            }}
                        >
                            {item.title}
                        </div>
                    ) : (
                        <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.city}
                                </div>
                            </div>
                        </div>
                    )
                }
                stickyHeaderIndices={sectionedDirectory.stickyHeaderIndices}
                style={listViewportStyle}
            />
        </Shell>
    );
}
```

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