Brickslab.Tools

@brickslab./ui-web

Tableau de liste des utilisateurs avec colonnes ID, Username, Email, Password et actions Edit/Delete. Utilisé dans les dashboards d'administration.

Aperçu

Tableau avec actions

Utilisateurs

ID	Username	Email	Password
USR-001	john_doe	john.doe@example.com	••••••••
USR-002	jane_smith	jane.smith@example.com	••••••••
USR-003	bob_wilson	bob.wilson@example.com	••••••••

Tableau sans actions (lecture seule)

Utilisateurs (lecture seule)

ID	Username	Email	Password
USR-001	john_doe	john.doe@example.com	••••••••
USR-002	jane_smith	jane.smith@example.com	••••••••
USR-003	bob_wilson	bob.wilson@example.com	••••••••

Tableau vide

Aucun utilisateur

ID	Username	Email	Password	Actions
Aucun utilisateur trouvé

Props

Prop	Type	Défaut	Requis	Description
`users`	`User[]`	—	✓	Liste des utilisateurs à afficher dans le tableau. Chaque utilisateur doit avoir un id, username, email et password.
`onEdit`	`(user: User) => void`	—	—	Callback déclenché lors du clic sur le bouton Edit. Reçoit l'utilisateur concerné.
`onDelete`	`(user: User) => void`	—	—	Callback déclenché lors du clic sur le bouton Delete. Reçoit l'utilisateur concerné.
`title`	`string`	`"Utilisateurs"`	—	Titre affiché en haut du tableau.

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  users={[]}
  onEdit={...}
  onDelete={...}
  title="Utilisateurs"
/>

usersonEditonDeletetitle

Utilisation

tsx

import { UserTable } from "@brickslab./ui-web";

const users = [
  { id: "1", username: "john_doe", email: "john@example.com", password: "••••••••" },
  { id: "2", username: "jane_smith", email: "jane@example.com", password: "••••••••" },
  { id: "3", username: "bob_wilson", email: "bob@example.com", password: "••••••••" },
];

<UserTable 
  users={users} 
  onEdit={(user) => console.log("Edit", user)}
  onDelete={(user) => console.log("Delete", user)}
/>

Types

typescript

export type User = {
  id: string;
  username: string;
  email: string;
  password: string;
};

export type UserTableProps = {
  users: User[];
  onEdit?: (user: User) => void;
  onDelete?: (user: User) => void;
  title?: string;
};