ftm-components-react

Bare, unstyled React components for rendering Follow The Money entity data.

Components emit semantic HTML with stable class names (e.g. PropertyTable, Property__url, EntityLink__a) and ship no CSS — bring your own styles.

There have been efforts by the aleph team to maintain a react-ftm library which eventually got inlined into the main codebase. This library is based on that idea but not intended to be a replacement.

Installation

npm install @dataresearchcenter/ftm-components-react

Peer dependencies your project provides:

• react / react-dom 18 or 19
• @mui/x-data-grid ^6.16 (used by EntitiesTable)

Alternatively, use this repo as a git submodule, as a convention at the path lib/ftm:

git submodule add https://github.com/dataresearchcenter/ftm-components.git lib/ftm
git submodule update --remote lib/ftm

Usage

import {
  EntitiesTable,
  EntityLink,
  PropertyTable,
} from "@dataresearchcenter/ftm-components-react";

<PropertyTable entity={entity} />
<EntitiesTable entities={payments} schema="Payment" />

Components accept a LinkComponent prop to integrate entity links with any routing framework (Next.js, React Router, …).

Country flags

CountryFlag (and country property rendering) only emits semantic-ui-flag class names (<i class="de flag" />) — no stylesheet is included. To display flags, install the optional peer dependency and load its CSS once in your app:

npm install semantic-ui-flag

// e.g. in your app entry
import "semantic-ui-flag/flag.css";

Without it, flags simply render as empty inline elements.

Development

npm install
npm run storybook        # component dev environment with docs
npm run build            # compile library to dist/
npm run build-storybook  # static Storybook build

Supported by

Media Tech Lab Bayern batch #3