diff --git a/README.md b/README.md index 090160a..084414b 100644 --- a/README.md +++ b/README.md @@ -1,67 +1,295 @@ -
- -

Typescript Library Boilerplate Basic

-
Minimal Library Starter Kit for your Typescript projects
- - npm version latest commit Build Status Publish Status +# React Material Table Component -For a plain Javascript alternative, check out [js-library-boilerplate-basic](https://github.com/hodgef/js-library-boilerplate-basic). +[![npm version](https://badgen.net/npm/v/@keyvalue/material-table-component?color=blue)](https://www.npmjs.com/package/@keyvalue/material-table-component) +[![Downloads](https://img.shields.io/npm/dw/@keyvalue/material-table-component?label=Downloads)](https://www.npmjs.com/package/@keyvalue/material-table-component) +[![CI/CD](https://github.com/KeyValueSoftwareSystems/material-table-component/actions/workflows/deploy.yml/badge.svg)](https://github.com/KeyValueSoftwareSystems/material-table-component) +
+ +Material Table Component Example
-## ⭐️ Features +>A customizable & responsive Material Design table component for React projects with advanced features like multi-level data display, sorting, filtering, pagination, and row selection. -- Webpack 5 -- Babel 7 -- Hot reloading (`npm start`) -- Automatic Types file generation (index.d.ts) -- UMD exports, so your library works everywhere. -- Jest unit testing -- Customizable file headers for your build [(Example 1)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/index.js) [(Example2)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/css/index.css) -- Daily [dependabot](https://dependabot.com) dependency updates +Try the live demo using this codesandbox link [here](https://codesandbox.io/s/material-table-example) -## 📦 Getting Started +## Installation +The easiest way to use material-table-component is to install it from npm and build it into your app with Webpack. + +```bash +npm install @keyvalue/material-table-component ``` -git clone https://github.com/hodgef/ts-library-boilerplate-basic.git myLibrary -npm install + +You'll need to install React and Material-UI separately since they aren't included in the package. + +## Usage + +Material Table Component can be used in its basic form by providing the `columns` and `data` props: + +```jsx +import { GenericTable } from '@keyvalue/material-table-component'; + + ``` -## 💎 Customization +The columns prop is an array of column definitions with the following structure: -> Before shipping, make sure to: +```jsx +const columns = [ + { + key: "name", + label: "Name", + }, + { + key: "age", + label: "Age", + } +]; +``` -1. Edit `LICENSE` file -2. Edit `package.json` information (These will be used to generate the headers for your built files) -3. Edit `library: "MyLibrary"` with your library's export name in `./webpack.config.js` +The data prop should be an array of objects matching the column keys: -## 🚀 Deployment +```jsx +const data = [ + { + id: "row-1", + name: 'John Doe', + age: 30, + children: [] // Optional children for multi-level tables + }, + { + id: "row-2", + name: 'Jane Smith', + age: 25, + children: [] + } +]; +``` -1. `npm publish` -2. Your users can include your library as usual +### Multi-Level Table Example -### npm +The component supports multi-level data display with parent-child relationships: +```jsx + ``` -import MyLibrary from 'my-library'; -const libraryInstance = new MyLibrary(); -... + +## Props + +Props that can be passed to the component are listed below: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropDescriptionDefault
data: Row<T>[]An array of data objects to be displayed in the table. Each row can have a `children` array for multi-level tables.[]
columns: Column<T>[]An array of column definition objects with `key` and `label` properties[]
meta?: objectMetadata for the table including column types and formatting optionsundefined
actions?: RowAction[]Array of action objects for row-level operations[]
onViewRow?: functionCallback function triggered when a row is clickedundefined
isLoading?: booleanFlag to indicate if data is being loadedfalse
depth?: number | nullControls the depth of expanded rows in multi-level tablesnull
showTotal?: booleanWhether to show totals for numeric columnsfalse
tableHeaderStyles?: React.CSSPropertiesCustom styles for the table headerundefined
tableCellStyles?: React.CSSPropertiesCustom styles for table cellsundefined
rowColors?: string[]Array of colors to be used for alternating rowsundefined
+ +## Column Types and Formatting + +The `meta.columns` property allows you to specify the type and formatting for each column: + +```jsx +meta={{ + chartType: "MULTI_LEVEL_TABLE", + columns: [ + { + id: "name", + name: "Name", + type: "string", + }, + { + id: "amount", + name: "Amount", + type: "currency", + currencyFormat: { + currency: "dollar", + scale: 2, + }, + }, + { + id: "percentage", + name: "Percentage", + type: "percentage", + scale: 2, + }, + { + id: "date", + name: "Date", + type: "date", + dateFormat: "MM/DD/YYYY", + } + ] +}} ``` -### self-host/cdn +Supported column types include: +- `string` - Text data +- `number` - Numeric data +- `currency` - Monetary values with currency formatting +- `percentage` - Percentage values +- `date` - Date values with formatting options +- `boolean` - True/false values + +## Row Actions +You can define actions that appear for each row: + +```jsx +actions={[ + { + label: "View Details", + icon: "visibility", + action: (rowId) => handleViewDetails(rowId), + condition: (rowId) => hasDetails(rowId) + }, + { + label: "Edit", + icon: "edit", + action: (rowId) => handleEdit(rowId) + } +]} ``` - -const MyLibrary = window.MyLibrary.default; -const libraryInstance = new MyLibrary(); -... +## Style Customizations + +You can customize the appearance of the table using the style props: + +```jsx + ``` -## ✅ Libraries built with this boilerplate +## Contributing + +Contributions are welcome! Please feel free to submit a Pull Request. -> Made a library using this starter kit? Share it here by [submitting a pull request](https://github.com/hodgef/ts-library-boilerplate-basic/pulls)! +## License -- [simple-keyboard](https://github.com/hodgef/simple-keyboard) - Javascript Virtual Keyboard -- [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard) - React Virtual Keyboard -- [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) - Keyboard layouts for simple-keyboard +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/package.json b/package.json index 4823565..c68fe7a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "material-table-component", + "name": "@keyvalue/material-table-component", "version": "0.1.7", "description": "A flexible and customizable table component built with React and Material-UI", "main": "build/index.js",