Yet another grid. A tool for building dynamic tables and grids with built-in editor and type registry. Targeted to management software.
Using yarn yarn add @seij/yagrid or npm npm i @seij/yagrid.
YAGrid depends on React that shall already be installed in your project as it comes as a peer-dependency. Your React version must support hooks.
We export this component as
- ES Module (located in
dist/index.es.js) - CommonJS module (located in
dist/index.js)
- YAGrid is build with Typescript. You get native typings. All imports shall be resolved to
@seij/yagrid. Do not import from submodules event if you can reach them.
After cloning use the classic npm install and npm run build commands to build.
Build is taken care of by Rollup.
To launch the Storybook interface, use npm run storybook.
Launch npm run test for unit tests.
- @rollup/plugin-typescript doesn't generate Typescript definition files
- Unfortunatly a bug with
@rollup/plugin-typescriptdoesn't generate Typescript definition files
Datatypes add rendering features to types. Each grid can use a registry of data types to customize globally the rendering of known types.
It is possible to build a type registry outside the scope of a particular grid, and pass the type registry as grid properties.
You can also have as many as registries as you want and reuse them across grids of your app.
An important point is that you CAN NOT provide column definitions with types unknown by the registry of the displayed grid.
If no type registry is given, a default one will be used with the following known types:
string, boolean, int, decimal, percent. All data will render toString(). Nullish values will render
as empty text.
To create a custom registry, use the TypesRegistryBuilder and add your types. Each type must come with a renderer
that accepts the data and possiblty nullish values (null, undefined). It MUST return a string (even if empty)
Each type registred will be added to the default registry. If one of your types overlap with the default registry
(like percent in following example), your type wins.
You can combine your type registry with custom renderer for columns. If a renderer had been provided for a column, it wins over the registry.
To be clear, when data must be displayed, we use the first found in this order : column renderer, custom type renderer, default type renderer.
If you ask yourself how to manage i18n issues, here we are. You get a precise control on how data is displayed. Up to you. An advice would be to have a "ready-to-go" registry at start of your app, immutable, and then pass it to all your grids. This way, your collegues won't have to be bothered about formatting in your app anymore.
const customTypes = new TypesRegistryBuilder()
.add("percent", data => data==null ? "" : ""+(data * 100)+"%")
.add("monetaryAmountInt", data => ""+(data || 0))
.add("monetaryAmountDecimal", function(data){
return new Intl.NumberFormat(undefined, { minimumFractionDigits: 2, style: "decimal" })
.format(data||0)
})
.build()
const gridProps: GridProps<S> = {
//... other props like columns, plugins, etc.
types: customTypes
}
return <Grid {...gridProps} />Note that in this example nullish data are handled differently depending on the type. This is useful in many cases. For example, on one table you don't want "0" numbers to appear, on others you want them whatever.
Currently provided plugins
| Name | Description |
|---|---|
| item-add | Provides a toolbar button to add an item. When user clicks, an editable row opens to edit the item. Provides confirm, cancel button and a temporary item to be able to cancel. |
| item-edit | Provides row editing features. A button triggers row editing, then user can validate or cancel the row. Also manages a temporary item to be able to cancel. |
| item-delete | Provides row button to delete item, confirm and cancel buttons. |
| empty-message | Displays a custom empty message or component if data is empty |
| table-footer | Displays a custom component in table footer (tfoot) area |
| table-classnames | Using table layout, adjusts the classnames based in displayed item, column, etc. |
Each plugin comes with its own documentation. Be sure to take a look at it
Internal plugins as well a third-party plugins shall expose a Config object and a create(cfg:Config) function.
The goal is to provide an unified naming for importing and instanciating plugins.
// Could be third party plugins
import { EditItem, DeleteItem, AddItem } from "@seij/yagrid";
// When creating the grid
const props: GridProps<ItemType> = {
// ...
plugins: [
EditItem.create({ /** edit item config */ }),
DeleteItem.create({ /** edit item config */ }),
AddItem.create({ /** edit item config */ }),
// ...
]
}
return <Grid {...props} />
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent