@sito/dashboard

@sito/dashboard is a React + TypeScript UI library for dashboard and admin interfaces.

Highlights

• Table component with sorting, filtering, pagination, row selection, bulk actions, and expandable rows.
• Reusable UI pieces: Badge, Button, Chip, Dropdown, IconButton, Loading, Tooltip, SvgIcons, Actions, and ActionsDropdown.
• Form controls: TextInput, SelectInput, AutocompleteInput, CheckInput, and FileInput.
• Built-in providers for translations and table state (TranslationProvider, TableOptionsProvider).

Installation

# npm
npm install @sito/dashboard

# yarn
yarn add @sito/dashboard

# pnpm
pnpm add @sito/dashboard

Peer dependency

• react (>=18.2 <20)
• react-dom (>=18.2 <20)

Quick Usage

Import directly from @sito/dashboard (do not import from internal paths).

import {
  FilterTypes,
  Table,
  TableOptionsProvider,
  TranslationProvider,
  type BaseDto,
} from "@sito/dashboard";

type UserRow = BaseDto & {
  name: string;
  age: number;
};

const rows: UserRow[] = [
  { id: 1, deletedAt: null, name: "John Doe", age: 30 },
  { id: 2, deletedAt: null, name: "Jane Smith", age: 25 },
];

const t = (key: string) => key;

export function UsersTable() {
  return (
    <TranslationProvider t={t} language="en">
      <TableOptionsProvider>
        <Table<UserRow>
          entity="users"
          title="Users"
          data={rows}
          columns={[
            {
              key: "name",
              label: "Name",
              sortable: true,
              filterOptions: {
                type: FilterTypes.text,
                placeholder: "Search by name",
              },
            },
            { key: "age", label: "Age", sortable: true },
          ]}
          actions={(row) => [
            {
              id: "view",
              tooltip: `View ${row.name}`,
              icon: <span>View</span>,
              onClick: () => console.log("View", row),
              sticky: true, // always visible; omit to place in the ellipsis dropdown
            },
          ]}
        />
      </TableOptionsProvider>
    </TranslationProvider>
  );
}

Form Input Notes

• SelectInput expects Option items with an id (plus optional value/name).
• CheckInput is controlled with checked (not value).
• FileInput onChange receives the native input event; read files from e.currentTarget.files.

TableOptionsProvider Initial State

TableOptionsProvider supports optional initialState configuration:

import { SortOrder, TableOptionsProvider } from "@sito/dashboard";

<TableOptionsProvider
  defaultHiddenColumns={["email"]}
  initialState={{
    currentPage: 0,
    pageSize: 50,
    pageSizes: [25, 50, 100],
    sortingBy: "createdAt",
    sortingOrder: SortOrder.ASC,
    filters: { status: "active" },
  }}
>
  <UsersTable />
</TableOptionsProvider>;

Core Table Props

| Prop | Type | Required | Description | | --------------------------- | ----------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- | | entity | string | No | Optional logical entity identifier. | | data | TRow[] | Yes | Rows to render. TRow must extend BaseDto and include id. | | columns | ColumnType<TRow>[] | No | Column definitions. | | actions | (row: TRow) => ActionType<TRow>[] | No | Per-row action factory. | | title | string | No | Header title. | | toolbar | ReactNode | No | Extra content rendered in the table header. | | isLoading | boolean | No | Loading state for table UI. | | filterOptions | FilterOptions | No | Extra options passed to filter behavior/components. | | canHideColumns | boolean | No | Shows column visibility menu in the header. | | canReset | boolean | No | Shows table reset button in the header. | | onSort | (prop: string, sortOrder: SortOrder) => void | No | Sort callback when a sortable column is toggled. | | onRowSelect | (row: TRow, selected: boolean) => void | No | Row selection callback. | | onSelectedRowsChange | (rows: TRow[]) => void | No | Callback with selected rows. | | softDeleteProperty | keyof TRow | No | Property name used to determine soft-deleted rows. Defaults to deletedAt. | | allowMultipleExpandedRows | boolean | No | Enables multiple expanded rows (uncontrolled mode). | | expandedRowId | TRow["id"] \| null | No | Controlled expanded row id. | | onExpandedRowChange | (expandedRow: TRow \| null, collapsedRow: TRow \| null) => void | No | Called when expanded row changes. | | onRowExpand | (expandedRow: TRow, collapsedRow: TRow \| null) => ReactNode | No | Returns content rendered inside expanded row area. | | className | string | No | Wrapper class name. | | contentClassName | string | No | Content container class name. |

Exported API

Main package exports include:

• Components: Action, Actions, ActionsDropdown, Badge, Button, Chip, Dropdown, IconButton, Loading, SvgIcons, Table, Tooltip, TextInput, SelectInput, AutocompleteInput, CheckInput, FileInput.
• Providers: FiltersProvider, TableOptionsProvider, TranslationProvider and related hooks/types (useFilters, useTableOptions, useTranslation).
• Utilities and models: FilterTypes, SortOrder, BaseDto, and query/filter helpers from lib.

Development Setup

1. Clone the repository.

git clone https://github.com/sito8943/-sito-dashboard.git
cd -- -sito-dashboard

2. Use the expected Node version.

nvm install
nvm use

Current .nvmrc: 20.19.0

3. Install dependencies.

npm install

4. Start development.

# Vite dev server
npm run dev

# Storybook (recommended for component work)
npm run storybook

Scripts

npm run build            # Build library (types + bundles)
npm run test             # Run tests once with Vitest
npm run lint             # ESLint + Prettier + depcheck
npm run format           # Prettier on src files
npm run build-storybook  # Build static Storybook
npm run preview          # Preview Vite build
npm run full             # lint + build + test

Contributing

1. Create a branch from main.
2. Add or update tests for your changes.
3. Run npm run full.
4. Open a pull request with a clear summary.

License

MIT